AJAX学习之路（三）请求

一。AJAX请求/提交数据到 PHP

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>请求PHP接口</title>
</head>
<body>
	<button id="button">获取PHP数据</button>

	<br><br>

	<h1>正常表单提交数据到PHP</h1>
	<form action="process.php" method="GET">
		<input type="text" name="name">
		<input type="submit" value="提交">
	</form>

	<h1>AJAX请求数据</h1>
	<form id="getForm">
		<input type="text" name="name" id="name1">
		<input type="submit" value="提交">
	</form>

	<hr>

	<h1>正常表单POST提交数据到PHP</h1>
	<form action="process.php" method="POST">
		<input type="text" name="name">
		<input type="submit" value="提交">
	</form>

	<h1>AJAX请求数据POST</h1>
	<form id="postForm">
		<input type="text" name="name" id="name2">
		<input type="submit" value="提交">
	</form>



	<script type="text/javascript">
			document.getElementById('button').addEventListener('click',getData);
			document.getElementById('getForm').addEventListener('submit',getForm);
			document.getElementById('postForm').addEventListener('submit',postForm);

			function getData(){
				var xhr = new XMLHttpRequest();
				xhr.open("GET","process.php?name=Henry",true);
				xhr.onload = function(){
					console.log(this.responseText);
				}
				xhr.send();	
			}


			function getForm(e){
				e.preventDefault();
				var name = document.getElementById('name1').value;
				var xhr = new XMLHttpRequest();
				xhr.open("GET","process.php?name="+name,true);
				xhr.onload = function(){
					console.log(this.responseText);
				}
				xhr.send();	
			}

			function postForm(e){
				e.preventDefault();
				var name = document.getElementById('name2').value;
				var params = "name="+name;
				var xhr = new XMLHttpRequest();
				xhr.open("POST","process.php",true);
				//设置请求头
				xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded')
				xhr.onload = function(){
					console.log(this.responseText);
				}
				xhr.send(params);	
			}





	</script>

</body>
</html>

二。AJAX请求提交数据到github

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>请求Github接口</title>
	<style type="text/css">
		.user{
			display: flex;
			background:#f4f4f4;
			padding: 10px;
			margin-bottom: 10px;  
		}
		.user ul{
			list-style: none;
		}
	</style>
</head>
<body>
	<button id="button">请求Github接口</button>

	<br><br>

	<h1>所有Github用户信息</h1>

	<div id="users"></div>


	<script type="text/javascript">
			document.getElementById('button').addEventListener('click',loadUsers);

			function loadUsers(){
				var xhr = new XMLHttpRequest();
				xhr.open("GET","https://api.github.com/users",true);
				xhr.onload = function(){
					var users = JSON.parse(this.responseText);
					// console.log(users);
					// 上一步console可以检测出来已经拿到了数据，下一步就是遍历数据
					
					var output = '';
					for(var i in users){
						output += `
								<div class="user">
								<img src="${users[i].avatar_url}" width="70" height="70"/>
								<ul>
									<li>ID: ${users[i].id}</li>
									<li>Login: ${users[i].login}</li>
								</ul> 
						`;
					}

					document.getElementById('users').innerHTML = output;
				}
				xhr.send();
			}
	</script>

</body>
</html>

上述例子中使用的两个PHP文件代码如下,记得放在同一级目录下

//users.php
<?php
	
	$conn = mysqli_connect("localhost","root",'',"ajaxtext");

	$query = 'SELECT * FROM users';

	$result = mysqli_query($conn,$query);

	$users = mysqli_fetch_all($result,MYSQLI_ASSOC);

	echo json_encode($users);
?>

//process.php
<?php
	// echo "Hello World!";
	// 
	if(isset($_GET['name'])){
		echo "GET:你的名字是".$_GET['name'];
	}

	#连接数据库
	$conn = mysqli_connect("localhost","root",'',"ajaxtext");

	if(isset($_POST['name'])){
		//echo "POST:你的名字是".$_POST['name'];
		
		#将拿到的数据转化一下
		$name = mysqli_real_escape_string($conn,$_POST['name']);

		$query = "INSERT INTO users(name) VALUES('$name')";

		if(mysqli_query($conn,$query)){
			echo '用户添加成功!';
		}else{
			echo "用户添加失败!".mysqli_error($conn);
		}
		
	}





?>

因为涉及到一个跨域问题，可以下载一些可以在服务端打开的软件，如wamp，xampp等等。我这里使用的是XAMPP，把你的文件放在ht开头的文件下，打开网页后，把路径file修改为localhost

AJAX学习之路（三）请求

猜你喜欢