前后端数据交互的几种方式

您所在的位置：网站首页 › 交互方法有哪些类型 › 前后端数据交互的几种方式

前后端数据交互的几种方式

2024-02-28 06:44| 来源: 网络整理| 查看: 265

文章目录前言一、传统的ajax(原生ajax)二、jQuery中的ajax三、AngularJS（略）四、表单中数据的提交方式五、JSP中的JSTL标签库

前言

前后端数据交互的方式有哪些？常用的有哪些？

一、传统的ajax(原生ajax)

应首先创建 XMLHttpRequest对象这个对象包含的属性如下：

1.readyState:对象的状态：

0：未初始化1：open方法成功调用send方法未调用2：send方法已调用，尚未开始接收数据3：正在接收数据，但尚未接收完成4：完成

2.onreadystatechange:状态改变的时间触发器 3.resposeText：相应的文本内容 4.status:返回的http状态码：200：成功，404未找到；500标识的服务器内部错误

该对象包含的方法有： 1. open(String method, String url, Boolean asynch ,String username, String password)

url:请求的地址 method:请求的方法，get/post asynch:是否采用异步方法，true为异步，false为同步 username和password 提供http认证机制的用户名，通常我们可以不用管。 2. send():向服务器发出请求，异步，会立即返回 null不发送数据， dom输入流或者字符串 json:eval函数用于解析json数组，转换成json字符串

二、jQuery中的ajax

$.ajax{} 代表jQuery中最底层的ajax函数，其属性代表ajax的相关属性和设置

其写法为：

$.ajax({ url:"请求的路径", type:"get/post请求方式", data:{属性名:"属性值",属性名2:"属性值2"}, dataType:"text/json服务器所返回的类型", success:function(data){}, //请求成功时调用的函数 data:服务器所返回的数据 error:function(){}, //请求失败调用的函数 statusCode:{ "400":function(){展示内容}, "500":function(){展示内容}, "200":function(){展示内容}, } }) $.get() $.post() url:请求的路径 $.ajax中的url data:请求的参数 function(){}:请求成功调用的函数 dataType:服务器返回的结果 text/json $.get(url,{属性名："属性值"},function(data){},"text/json") $.getJson(): $.getJson()为ajax获取json数据设置的，支持跨域的调用 url:请求的路径 data:请求的参数 callback:返回成功的调用函数 $.get()和$.post()是对上面的原生ajax的封装，两个方法参数相同 $.post()和$.getJson()都是进行异步请求的方式，两个主要的区别在于： $.post()请求返回的数据类型包括html \ text \ json \ xml ，但主要是text \ json $.getJson()请求返回的数据只能是json格式三、AngularJS（略）四、表单中数据的提交方式 method = "get/post" input 标签内添加个name="" 通过ajax进行返回数据的接收五、JSP中的JSTL标签库

本方法主要用在JSP页面的数据交互

//引用JSTL的标签库，导入需要用的jar包 ${展示的变量.属性名或方法}

【本文地址】

前后端数据交互的几种方式

前后端数据交互的几种方式

今日新闻

推荐新闻