前后端数据交互——ajax技术

在实际开发过程中，前端页面通常需要根据后台数据实现动态生成和实时更新，因此如何实现前后端数据交互成了开发过程中的难题。

现将使用ajax技术解决前后端数据的交互：

（1)ajax技术介绍：
ajax一个前后台配合的技术，它可以让javascript发送http请求，与后台通信，获取数据和信息。ajax技术的原理是实例化xml,http对象，使用此对象与后台通信。jquery将它封装成了一个函数$.ajax()，我们可以直接用这个函数来执行ajax请求。
这个对象为向服务器发送请求和解析服务器响应提供了流畅的接口，使得浏览器可以发出HTTP请求与接收HTTP响应，实现在页面不刷新的情况下和服务端进行数据交互。
注意：ajax需要在服务器环境下运行。

(2)ajax()技术从前端传递数据

一、常用参数：
1、url 请求地址
2、type 请求方式，默认是’GET’，常用的还有’POST’
3、dataType 设置返回的数据格式，常用的是’json’格式，也可以设置为’html’
4、data 设置发送给服务器的数据
5、success 设置请求成功后的回调函数
6、error 设置请求失败后的回调函数
7、async 设置是否异步，默认值是’true’，表示异步

示例一：
(mui框架使用ajax技术）

mui.ajax(
'http://192.168.43.119/services/finduser.php', {
	type: 'POST',
	headers: {'Content-Type': 'application/x-www-form-urlencoded'},
	data: {
		'username': loginInfo.account,
		'password': loginInfo.password
	       },
	timeout: 10000,
    success: function(resu) {
	var jo = JSON.parse(resu);//将json数据转换为对象
	},
	error: function(xhr, type, errorThrown) {
		 mui.alert("网络连接失败，请检查网络连接");
		},
	});

【补充】：
1、type:有两个值（get 和 post)
get:表示获取数据，无需从前端传递数据
post:表示发送数据，需要从前端发送数据给后端
2、data:{}封装了前端传到后端的数据
3、function(resu){} 成功时的回调函数，resu即从后端成功返回的值，该值为json数据格式
4、mui框架使用ajax技术，格式上只有两个参数，url自己写一行，剩下的其他所有参数，一起写在{}当中，作为一个统一的参数进行传递，但在{}当中，各个参数也要分清楚，每个参数之间用逗号( ，）隔开

示例二：
（js使用ajax技术）

$.ajax({
	url : "../User/users",
	type : "post",
	dataType : "json",
	success : function(data) {},
	error : function(msg) {
	    alert("ajax连接异常：" + msg);
		}
    });

【补充】：js中每个参数分离，各自管自己

（3）后端接收数据，执行操作后，对结果进行返回

【 本人后端使用php脚本语言编写】

以登录操作为例：

header('Content-Type: text/json');
include 'mysqldbf.php';//导入数据库配置php
//数据库连接
$conn = mysqli_connect($servername,$username,$password,$dbname);
$data = array();//创建数组
$user=$_POST['username'];
$pass=$_POST['password'];
if ($user != "" && $pass != "")
{
   $sql ="SELECT * FROM users WHERE username='$user' AND password='$pass'";
   $result = $conn->query($sql);
   if($result->num_rows != 0)
   {
       $data['status']=200;//给数组赋值，作为状态码返回
   }
   else 
   {
       $data['status']=300;
   }
}
else//用户名和密码为空
{
    $data['status']=400;
}
echo json_encode($data,true);

$user=$_POST['username'];
$pass=$_POST['password'];//获取到前端传递过来的数据，赋给新变量

echo json_encode($data,true);//用echo语句进行返回后端的数据，传递到前端

重点：若正常返回，则去执行success的回调函数，反之，执行error的回调函数

success : function(data) {}, 回调函数中的data即从后端传递回来的值，类型为json数据类型