前后端的数据交互的模拟（ajax和php）

青旅半醒 2022-01-16 00:51 317阅读 0赞

用到的服务器是和php配套使用的apache（阿帕奇）服务器，后端语言是PHP。  
显示效果如下：  
![在这里插入图片描述][20190614140441307.gif]  
![在这里插入图片描述][20190614140501372.gif]

> ### 一、后端的实现 ###

我建立了一个data.php文件，作为后端。整体代码如下，都有详细的注释。  
简单思想是客户端如果发送的是GET请求，一般是要查询数据，我在这里就建立了查询函数；如果发送的是POST请求，一般就是要提交并要在数据库创建新数据，我这里就建立了创建数据函数。  
没有用到数据库，直接保存了几个人的信息在这个文件中，即下面代码的二维数组中。查询的时候是根据编号number进行查询；创建的时候是需要创建个人姓名、编号和工作的。

<?php
    //设置响应头部
    //设置页面内容的html编码格式是utf-8
     header("Content-Type:text/plain;charset=utf-8");
    //header("Content-Type:application/json;charset=utf-8")
    //header("Content-Type:text/html;charset=utf-8")
    //header("Content-Type:text/xml;charset=utf-8")
    //header("Content-Type:application/javascript;charset=utf-8")
    
    //定义一个多维数组，包含每个人的信息，每条个人信息为一个数组
    $person = array
     (
     	array("name" => "Miss Huang","number" => "101","job" => "student"),
     	array("name" => "gentleman Huang","number" => "102","job" => "father"),
     	array("name" => "Miss Fei","number" => "103","job" => "mother")
     );
     //判断如果是GET请求则进行搜索，如果是POST请求则进行新建
     //$_SERVER是一个超全局变量,在一个脚本的全局作用域中都可以使用，不用使用global关键字进行声明
     //$_SERVER["REQUEST_METHOD"]返回请求访问的页面使用的请求方法
     if($_SERVER["REQUEST_METHOD"] =="GET") {
     	search();
     }elseif($_SERVER["REQUEST_METHOD"] == "POST") {
     	create();
     }
    
     //通过个人编号进行搜索
     function search() {
     	//检查是否有个人编号的参数
     	//isset检查变量是否设置；empty判断值是否为空
     	//超全局变量$_GET和$_POST用于收集表单数据
     	if(!isset($_GET["number"]) || empty($_GET["number"])) {
     		/*意思是如果收到的number参数没有给值即客户端没有输入number时就会执行下面的*/
     		echo "您未填入number参数";
     		return;
     	}
     	//函数之外声明的变量拥有global作用域，只能在函数以外进行访问
     	//global关键词用于访问函数内的全局变量
     	global $person;
    
     	//获取number参数
     	$number = $_GET["number"];
     	$result = "没有找到这个人";
    
     	//遍历$person多维数组，查找key值为number的员工的值是否存在，如果存在，则修改返回结果
     	forEach($person as $value) {
     		if($value["number"] == $number) {
     			$result = "找到这个人。编号：".$value["number"]."，姓名："
     			.$value["name"].",职位：".$value["job"];
     			break;
     		}
     	}
     	echo $result;
     }
    
     //创建个人信息
     function create() {
     	//判断信息是否填写完整
     	if(!isset($_POST["number"]) || empty($_POST["number"]) || !isset($_POST["name"]) || empty($_POST["name"]) || !isset($_POST["job"]) || empty($_POST["job"])) {
     		echo "参数错误，个人信息填写不完整";
     		return;
     	}
    
     	//获取表单数据并保存到数据库
    
    
     	//提示保存成功
     	echo $_POST["name"]."你好，信息保存成功！";
     }
    
    ?>

> ### 二、客户端的实现 ###

一个简单的客户端页面如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N1bmRheTk3_size_16_color_FFFFFF_t_70]  
客户端的全部代码如下

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Demo_ajax</title>
    	<style>
    		*{
    			margin:0;
    			padding:0;
    		}
    		.block{
    			background-color:rgba(255,0,0,0.1);
    			text-align:center;
    			line-height:60px;
    		}
    		.searchBlock{
    			border-bottom:2px solid black;
    		}
    	</style>
    </head>
    <body>
    	<div class = 'block'>
    		
    		<div class = 'searchBlock'>
    		<h1>个人信息查询</h1>
    	<p>
    	 <labal>请输入个人编号</labal>
    	 <input type = 'text' id = "keyword"/>
    	</p>
    	<button id = 'search'>查询</button>
    	<b><p id = 'searchResult'></p></b>
    	</div>
    
    	
    	<div class = 'createBlock'>
    		<h1>个人信息创建</h1>
    	<p>
    		<label>请输入个人姓名</label>
    	    <input type = 'text' id = 'personName'/>
        </p>
    	<lable>请输入个人编号</lable>
    	<input type = 'text' id = 'personNumber'/>
    	<p>
    		<lable>请输入个人工作</lable>
    	    <input type = 'text' id = 'personJob'/>
    	</p>
    	<button id = 'save'>保存</button>
    	<b><p id = 'createResult'></p></b>
    	</div>
    	</div>
    
    	<script>
    		//查询数据，使用GET请求
    		var search = document.getElementById("search");
    		   search.onclick = function() {
    			var keyword = document.getElementById("keyword").value;
    
               //创建XMLHttpRequest对象
    			var request = new XMLHttpRequest();
    			
    //设置请求方式、数据发送地址、是否异步(默认未true,为异步)，因为是GET请求，数据就放在地址后面
    			request.open("GET","data1.php?number="+keyword,true);
    
                //发送数据
    			request.send();
    
               //因为是异步，所以有readyState属性
    			request.onreadystatechange = function() {
    				if(request.readyState = 4) {
    					if(request.status = 200) {
    					document.getElementById("searchResult").innerHTML = request.responseText;
    					}
    				}else {
    						alert("发生错误；"+request.status)
    					}
    			}
    		}
    
    		//创建数据，使用POST请求
    		var save = document.getElementById("save");
    
    		save.onclick = function() {
    			var keyword = document.getElementById("keyword").value;
    			
    			//创建XMLHttpRequest对象
    			var request = new XMLHttpRequest();
    			
    			//设置请求方式、数据发送地址、是否异步(默认未true,为异步)
    			request.open("POST","data.php",true); 
    			
    			//因为是POST请求，所以要设置发送的数据data
    			var data = "name="+document.getElementById("personName").value
    			+"&number="+document.getElementById("personNumber").nodeValue
    			+"&job="+document.getElementById("personJob").value;   
    			
    			//设置请求头，防止出错
    			request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");      
    
                //发送数据                    
    			request.send(data);
    			request.onreadystatechange = function() {
    
                 //通过readyState属性设置相应的返回信息
    				if(request.readyState = 4) {
    					if(request.status = 200) {
    					document.getElementById("createResult").innerHTML = request.responseText;
    					}else {
    						alert("发生错误；"+request.status)
    					}
    				}
    			}
    		}
    	</script>
    </body>
    </html>

2、上面发送和响应的都是纯文本格式，为了不发生逻辑方面的错误，一般会采用json的数据格式,后面会优化以下改成json的数据格式  
首先了解以下json：https://mp.csdn.net/mdeditor\#

> #### 四、优化后的后端 ####

修改的部分：  
首先把顶部的响应头部设置为json的字符串，即：header(“Content-Type:application/json;charset=utf-8”)  
所有的返回值（大部分是echo的部分）改成json的格式  
改后的大致内容如下：即success为true的时候代表成功就会返回data的部分，success为false的时候就返回msg的信息

'{
    	success:true,
    	msg:'',
    	data:''
    }'

修改后的后端代码如下：

<?php
    //设置响应头部
    //设置页面内容的html编码格式是utf-8
     //header("Content-Type:text/plain;charset=utf-8")
     header("Content-Type:application/json;charset=utf-8");//修改处一
    //header("Content-Type:text/html;charset=utf-8")
    //header("Content-Type:text/xml;charset=utf-8")
    //header("Content-Type:application/javascript;charset=utf-8")
    
    //定义一个多维数组，包含每个人的信息，每条个人信息为一个数组
    $person = array
     (
     	array("name" => "Miss Huang","number" => "101","job" => "student"),
     	array("name" => "gentleman Huang","number" => "102","job" => "father"),
     	array("name" => "Miss Fei","number" => "103","job" => "mother")
     );
    
     //判断如果是GET请求则进行搜索，如果是POST请求则进行新建
     //$_SERVER是一个超全局变量,在一个脚本的全局作用域中都可以使用，不用使用global关键字进行声明
     //$_SERVER["REQUEST_METHOD"]返回请求访问的页面使用的请求方法
     if($_SERVER["REQUEST_METHOD"] =="GET") {
     	search();
     }elseif($_SERVER["REQUEST_METHOD"] == "POST") {
     	create();
     }
    
     //通过个人编号进行搜索
     function search() {
     	//检查是否有个人编号的参数
     	//isset检查变量是否设置；empty判断值是否为空
     	//超全局变量$_GET和$_POST用于收集表单数据
     	if(!isset($_GET["number"]) || empty($_GET["number"])) {
     		/*意思是如果收到的number参数没有给值即客户端没有输入number时就会执行下面的*/
     		echo '{"success":false,"msg":"您未输入个人编号哦！"}';//修改处二
     		return;
     	}
    
     	//函数之外声明的变量拥有global作用域，只能在函数以外进行访问
     	//global关键词用于访问函数内的全局变量
     	global $person;
    
     	//获取number参数
     	$number = $_GET["number"];
     	$result = '{"success":false,"msg":"找不到这个人哦"}';//修改处三
    
     	//遍历$person多维数组，如果输入了编号number那就会在数组里面找到这个人，找不到就输出上面默认的$result
     	forEach($person as $value) {
     		if($value["number"] == $number) {
     			$result = '{"success":true,"msg":"这个人存在；编号为'.$value["number"].';姓名为'.$value["name"].'；工作为'.$value["job"].'"}';//修改处四
     			break;
     		}
     	}
     	echo $result;
     }
    
     //创建个人信息
     function create() {
    
     	
     	//判断信息是否填写完整
     	if(!isset($_POST["number"]) || empty($_POST["number"]) || !isset($_POST["name"]) || empty($_POST["name"]) || !isset($_POST["job"]) || empty($_POST["job"])) {
     		echo '{"success":false,"msg":"您的信息填写的不完整！"}';//修改处五
     		return;
     	}
    
     	//获取表单数据并保存到数据库
    
    
     	//提示保存成功
     	echo '{"success":true,"msg":"您好,'.$_POST["name"].'，您的信息已经提交成功!"}';//修改处六
    
     }
    
    ?>

写php代码的心酸：可能对有些错误不够敏感，一个语句写完之后少写一个分号或者写成了中文下的分号就疯狂报错，分析半天以为是语句写错。所以能够确认自己语句没有写错的时候一定要想到分号的bug。还有字符串拼接的问题。另外一个自己理解错的问题：以为json数据格式是数据写在单引号里面也可以，结果我的php文件里面有些要返回给页面的数据就写在单引号里面，然后客户端页面用json解析返回的json数据时就会无法显示在页面。

> #### 五、改后的客户端代码 ####

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Demo_ajax</title>
    	<style>
    		*{
    			margin:0;
    			padding:0;
    		}
    		.block{
    			background-color:rgba(255,0,0,0.1);
    			text-align:center;
    			line-height:60px;
    			height:900px;
    		}
    		.searchBlock{
    			height:250px;
    			border-bottom:2px solid black;
    		}
    		.createBlock{
    			height:500px;
    		}
    		#searchResult,#createResult{
    			color:red;
    		}
    	</style>
    </head>
    <body>
    	<div class = 'block'>
    		
    		<div class = 'searchBlock'>
    		 <h1>个人信息查询</h1>
    		 <p>
    	         <labal>请输入个人编号</labal>
    	         <input type = 'text' id = "keyword"/>
    	     </p>
    	     <button id = 'search'>查询</button>
    	     <b><p id = 'searchResult'></p></b>
    	</div>
    
    	
    	<div class = 'createBlock'>
    		<h1>个人信息创建</h1>
    	<p>
    		<label>请输入个人姓名</label>
    	    <input type = 'text' id = 'personName'/>
        </p>
    	<lable>请输入个人编号</lable>
    	<input type = 'text' id = 'personNumber'/>
    	<p>
    		<lable>请输入个人工作</lable>
    	    <input type = 'text' id = 'personJob'/>
    	</p>
    	<button id = 'save'>保存</button>
    	<b><p id = 'createResult'></p></b>
    	</div>
    	</div>
    
    	<script>
    		//使用GET请求
    		var search = document.getElementById("search");
    		   search.onclick = function() {
    			var keyword = document.getElementById("keyword").value;
    			var request = new XMLHttpRequest();
    			request.open("GET","data.php?number="+keyword,true);
    			request.send();
    			request.onreadystatechange = function() {
    				if(request.readyState = 4) {
    					if(request.status = 200) {
    						var data = JSON.parse(request.responseText);
    						if(data.success) {//修改处一
    							document.getElementById('searchResult').innerHTML = data.msg;
    						}else {
    							document.getElementById('searchResult').innerHTML = data.msg;
    						}
    					}
    				}else {
    						alert("发生错误；"+request.status)
    					}
    			}
    		}
    
    		//使用POST请求
    		var save = document.getElementById("save");
    
    		save.onclick = function() {
    			var keyword = document.getElementById("keyword").value;
    			var request = new XMLHttpRequest();
    			request.open("POST","data.php",true); 
    			var data = "name="+document.getElementById("personName").value
    			+"&number="+document.getElementById("personNumber").nodeValue
    			+"&job="+document.getElementById("personJob").value;   
    			request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");                          
    			request.send(data);
    			request.onreadystatechange = function() {
    				if(request.readyState = 4) {
    					if(request.status = 200) {
    					var data = JSON.parse(request.responseText);
    					if(data.success) {//修改处二
    						document.getElementById("createResult").innerHTML = data.msg;
    					}else {
    						document.getElementById("createResult").innerHTML = data.msg;
    					}
    					}else {
    						alert("发生错误；"+request.status)
    					}
    				}
    			}
    		}
    	</script>
    </body>
    </html>

> #### 六、jQuery实现Ajax ####

只是把前面客户端代码的< script>< /script>部分给修改，其它都未改动：

其中进行调试的时候用的是谷歌，然后F12调出控制台，找到里面的Network，然后我提交网页·，这里面就会显示你提交和响应的一些信息：大概过程如下  
![在这里插入图片描述][20190614171700234.gif]

[20190614140441307.gif]: /images/20220115/4db271561d604385a86e52b15a515760.png
[20190614140501372.gif]: /images/20220115/e1fcb7b1e0af4c82bd8224ed88ac14c7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N1bmRheTk3_size_16_color_FFFFFF_t_70]: /images/20220115/2f7461f116904a7f92cf77c1f5770739.png
[20190614171700234.gif]: /images/20220115/ec208f877d894c9eb83e2d5109b28487.png