前后端数据交互—

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

现将使用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脚本语言编写】

以登录操作为例：

<?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数据类型

前后端数据交互——ajax技术相关推荐

前后端数据交互——ajax（原生及jquery）
目录前后端数据交互--ajax 1. 介绍 2.原生ajax用法 3.jquery的ajax 4.ajax原理说明前后端数据交互--ajax 1. 介绍 1.1 定义 Ajax(Asynchron ...
ajax连接前后端原理,前后端数据交互方法和原理
前后端数据交互方法和原理发布时间:2018-10-28 11:25, 浏览次数:742 对于想要搞web的新手而言,会用html+css+javascript实现一个页面没什么太大的困难,但是想要前 ...
ajax实现前后端数据交互
ajax实现前后端数据交互 1.在做项目的时候,或多或少都会用到ajax来实现前后端数据的交互,接下来我们就看一个简单的实例吧. 实例效果: 点击按钮,发送异步请求,请求后端的数据,显示在网页上. 接 ...
超详细总结：前后端数据交互原理
最近开始接触前后端的一些知识,查了很多资料,今天把互联网产品的前后端数据交互做个总结留做笔记. 互联网产品的前后端数据交互是通过一个通讯协议完成.前后台交互的协议主要包括HTTP,FTP,SMTP,T ...
前后端数据交互方法汇总
这篇文章给大家介绍几种常用的前后端数据交互方法,并给出使用建议.以提高前后端协同开发的效率.非常的详细,推荐给小伙伴们,有需要的小伙伴可以参考下. 1.HTML赋值输出到 Element 的 val ...
干货 | 万字长文全面解析GraphQL，携程微服务背景下的前后端数据交互方案
作者简介古映杰,携程研发高级经理,负责前端框架和基础设施的设计.研发与维护.开源项目react-lite和react-imvc作者. 前言随着多终端.多平台.多业务形态.多技术选型等各方面的发展, ...
详解 AJAX-SpringBoot 前后端数据交互
详解 AJAX-SpringBoot 前后端数据交互 1. Ajax 概述 Ajax 的英文全称是 "Asynchronous JavaScript and XML",即 &quo ...
前后端数据交互|分页查询|表格-双向绑定|get和post的区别
目录 1 前后端数据交互 1.1 前端代码部署在前端服务器 1.2 前端代码在浏览器展示(只展示页面,没有数据)----自给自足 1.3 前端/浏览器请求后端数据 (后端死数据)----给 ...
软件测试的交互,软件测试--前后端数据交互
作为一个合格的软件测试人员, 能够熟练定位bug的位置是属于前端还是后端,是必备技能之一.所以就需要明白前后端数据是怎么进行交互的. 一.网站数据处理主要分为三层第一层,表示层,这部分可以用HTML ...

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

前后端数据交互——ajax技术相关推荐

最新文章

热门文章