jQuery框架的ajax
3.1 jQuery框架的ajax简介
jquery是一个优秀的js框架,自然对js原生的ajax进行了封装,封装后的ajax的操 作方法更简洁,功能更强大,与ajax操作相关的jquery方法有如下几种,但开发中 经常使用的有三种:

请求方式 语法
GET请求 $.get(url, [data], [callback], [type])
POST请求 $.post(url, [data], [callback], [type])
AJAX请求 $.ajax([settings])
GET请求 $.get([settings])
POST请求 $.post([settings])
3.2 GET请求方式
3.2.1 GET请求方式概述
通过远程 HTTP GET 请求载入信息。这是一个简单的 GET 请求功能,如需复杂的ajax参数设置请使用$.ajax。

3.2.2 GET请求方式语法
jQuery.get(url, [data], [callback], [type])

其中,参数说明如下:

参数名称 解释
url 请求的服务器端url地址
data 发送给服务器端的请求参数,格式可以是key=value,也可以是js对象
callback 当请求成功后的回掉函数,可以在函数体中编写我们的逻辑代码
type 预期的返回数据的类型,取值可以是 xml, html, script, json, text, _defaul等
3.2.3 GET请求方式代码
3.2.3.1 js代码
3.2.3.1 js代码
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript">
function sendRequest(){
$.get(
"/AjaxDemo/ajaxServlet",
"name=tom&age=33",
function(data){

alert(data);

},
"text"
);
}
</script>
</head>
<body>
<input type="button" value="ajax异步访问服务器端" onclick="sendRequest()">
</body>
</html>
3.3 POST请求方式
3.3.1 POST请求方式概述
通过远程 HTTP POST 请求载入信息。这是一个简单的 POST 请求功能,如需复杂的ajax参数设置请使用$.ajax。

3.3.2 POST请求方式语法
jQuery.post(url, [data], [callback], [type])

其中,参数说明如下(和get中的参数一样):

参数名称 解释
url 请求的服务器端url地址
data 发送给服务器端的请求参数,格式可以是key=value,也可以是js对象
callback 当请求成功后的回掉函数,可以在函数体中编写我们的逻辑代码
type 预期的返回数据的类型,取值可以是 xml, html, script, json, text, _defaul等
3.4 AJAX请求方式

3.4.1 AJAX请求方式概述
通过 HTTP 请求加载远程数据。jQuery 底层 AJAX 实现。简单易用的高层实现见get和post方法。$.ajax()方法可以更加详细的设置底层的参数。

3.4.2 AJAX请求方式语法
jQuery.ajax([settings])

其中,settings是一个js字面量形式的对象,格式是{name:value,name:value… …},常用的name属性名如下:

属性名称 解释
url 请求的服务器端url地址
async (默认: true) 默认设置下,所有请求均为异步请求。如果需要发送同步请求,请将此选项设置为 false
data 发送到服务器的数据,可以是键值对形式,也可以是js对象形式
type (默认: "GET") 请求方式 ("POST" 或 "GET"), 默认为 "GET"
dataType 预期的返回数据的类型,取值可以是 xml, html, script, json, text, _defaul等
success 请求成功后的回调函数
error 请求失败时调用此函数
3.4.3 AJAX请求方式代码
3.4.3.1 js代码
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript">
function sendRequest(){
$.ajax({
url:"/AjaxDemo/ajaxServlet",
async:true,
data:"name=tom&age=33",
type:"GET",
dataType:"text",
success:function(data){

alert(data);

},
error:function(){

alert("数据没有成功返回!")

}
});
}
</script>
</head>
<body>
<input type="button" value="ajax异步访问服务器端" onclick="sendRequest()">
</body>
</html>
3.5 jQuery3.0 的POST新增签名方式
3.5.1 jQuery3.0 的POST新增签名概述
jQuery 3 为 jQuery.post() 函数增加了新签名,从而使得它们和 $.ajax() 的接口风格保持一致。

3.5.2 jQuery3.0 的POST新增签名方式语法
jQuery.post([settings])

其中,settings是一个js字面量形式的对象,格式是{name:value,name:value… …},常用的name属性名如下:

属性名称 解释
url 请求的服务器端url地址
async (默认: true) 默认设置下,所有请求均为异步请求。如果需要发送同步请求,请将此选项设置为 false
data 发送到服务器的数据,可以是键值对形式,也可以是js对象形式
dataType 预期的返回数据的类型,取值可以是 xml, html, script, json, text, _defaul等
success 请求成功后的回调函数
error 请求失败时调用此函数
3.5.3 jQuery3.0 的POST新增签名方式代码
3.5.3.1 js代码
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript">
function sendRequest(){
$.post({
url:"/AjaxDemo/ajaxServlet",
async:true,
data:"name=tom&age=33",
type:"GET",
dataType:"text",
success:function(data){

alert(data);

},
error:function(){

alert("数据没有成功返回!")

}
});
}
</script>
</head>
<body>
<input type="button" value="ajax异步访问服务器端" onclick="sendRequest()">
</body>
</html>
3.6 jQuery3.0 的GET新增签名方式
3.6.1 jQuery3.0 的GET新增签名概述
jQuery 3 为jQuery.get()函数增加了新签名,从而使得它们和 $.ajax() 的接口风格保持一致。

3.6.2 jQuery3.0 的GET新增签名方式语法
jQuery.get([settings])

其中,settings是一个js字面量形式的对象,格式是{name:value,name:value… …},常用的name属性名如下(也是和刚才演示的post方式中的属性一样):

属性名称 解释
url 请求的服务器端url地址
async (默认: true) 默认设置下,所有请求均为异步请求。如果需要发送同步请求,请将此选项设置为 false
data 发送到服务器的数据,可以是键值对形式,也可以是js对象形式
dataType 预期的返回数据的类型,取值可以是 xml, html, script, json, text, _defaul等
success 请求成功后的回调函数
error 请求失败时调用此函数

第4章 json数据格式
4.1 什么是json
JSON(JavaScript Object Notation, JS 对象标记) 是一种轻量级的数据交换格式。它基于ECMAScript的一个子集,采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。 易于人阅读和编写,同时也易于机器解析和生成,并有效地提升网络传输效率。

4.2 json的语法格式
json对象有三种数据格式,分别如下:

类型 语法 解释
对象类型 {name:value,name:value…} 其中name是字符串类型,而value是任意类型
数组/集合类型 [value,value,value…] 其中value是任意类型
混合类型 [{},{}… …] 或 {name:[]… …} 合理包裹嵌套对象类型和数组类型
4.4 json的转换工具
4.4.1 json转换工具的概述
json的转换工具是通过java封装好的一些jar工具包,直接将java对象或集合转换成json格式的字符串。

4.4.2 常见的json转换工具
工具名称 介绍
Jsonlib Java 类库,需要导入的jar包较多
Gson google提供的一个简单的json转换工具
Fastjson alibaba技术团队提供的一个高性能的json转换工具
Jackson 开源免费的json转换工具,springmvc转换默认使用jackson
4.4.3 开发步骤
1)导入json相关jar包https://www.chenqi.fun/wp-content/plugins/UEditor-KityFormula-for-wordpress/ueditor/themes/default/images/spacer.gif

2)创建java对象或集合

3) 使用jackson的ObjectMapper对象的writeValueAsString方法进行转换

4.4.4 转换代码实现
public class JacksonDemo {
public static void main(String[] args) throws JsonProcessingException {
//创建User对象
User user = new User();
user.setId("100");
user.setUsername("haohao");
user.setAge(33);
//创建List集合
List<String> arr = new ArrayList<>();
arr.add("张三");
arr.add("李四");
arr.add("王五");
//创建Map集合
Map<String,User> map = new HashMap<>();
map.put("user", user);

//转换
ObjectMapper om = new ObjectMapper();
String userJson = om.writeValueAsString(user);
String arrJson = om.writeValueAsString(arr);
String mapJson = om.writeValueAsString(map);

System.out.println(userJson);
System.out.println(arrJson);
System.out.println(mapJson);

}

}

Last modification:July 29th, 2019 at 06:09 pm