目录
ajax:
1、ajax的使用
$.ajax({
async: true,
type: "POST",
dataType: "json",
data: "name=" + "hello",
url: "/helloServlet"
success:function(data){
$(selector).css()..
}
error:function(data){
$()...
}
});
在后端: 使用Servlet接收ajax请求,并且将数据封装成json格式回传给前台页面
JSON:
- 1. json是js默认的数据格式,js中直接提供了解析json数据的相关函数
- 2、数据格式小(相对XML而言),可以节省网络资源
{
"array1": [
{ "name":"菜鸟教程" , "url":"www.runoob.com" },
{ "name":"google" , "url":"www.google.com" },
{ "name":"微博" , "url":"www.weibo.com" }
]
}
依赖包:
- JSON-lib-2.4.jar
在java程序中可以直接将Java的集合对象通过简单的编程转换为JSON格式的字符串
List<Map> List<User>
Map
Array
- ezmorph-1.0.6
- commons-logging-1.2
- commons-lang-2.6
- commons-collections-3.2.1
- commons-beanututils-1.9.3
Maven依赖库:https://mvnrepository.com/
- 1. pom.xml
- 2. 下载
XML:数据格式严谨,安全性高,传输效率慢
<tag>
<sub1 name = "xxx">
<sub2 name = "x1">data1</sub2>
<sub3 name = "x2">data2</sub3>
<sub4 name = "x3">data3</sub4>
</sub1>
<sub5>
<sub2>data4</sub2>
<sub3>data5</sub3>
<sub4>data6</sub4>
</sub5>
</tag>
在前端: 将json格式的数据进行拆解,对页面进行重构(页面样式、页面数据)
2、ajax的属性
- async:布尔值,表示请求是否异步处理,默认是true 页面刷新代表同步,不刷新代表异步
- context
- data
- dataType: Json、xml
- type:规定请求的类型 get or post
- url:规定发送请求的URL,默认当前页面
- xhr:xml对象
3、ajax实例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ajax测试</title>
</head>
<body>
<!--
业务需求:
1. 在页面输入一段文本 10
2. 通过jquery ajax 将 输入文本传入后台Servlet
3. Servlet对前台数据进行接收并处理(10+5)
4. 将处理结果异步刷新至p标签
-->
输入<input id = "ipt1">
<p id = "p01">默认数据...</p>
<button id = "btn01">ajax测试</button>
<script type = "text/javascript" src = "js/jquery-3.4.1.js"></script>
<script>
$("#btn01").click(function(){
var data01 = $("#ipt1").val();
// ajax请求
$.ajax({
type: "post",
async: true,
dataType: "json",
data: "d01=" + data01,
url: "jsonTest",
success: function(data){
$("#p01").empty();
$("#p01").html(data);
}
});
});
</script>
</body>
</html>
package com.sk;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import net.sf.json.JSONObject;
public class JSONTestServlet extends HttpServlet {
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//1. 获取前台数据
String param = request.getParameter("d01");
int p = 0;
if(param != null){
p = Integer.parseInt(param);
}
System.out.println(p);
//2. 处理数据: p += 5
p += 5;
//3. 数据回传
JSONObject jObject = new JSONObject();
/*
* JSONObject 可以完成的功能
* 1. XML -> JSON
* 2. JSON -> XML
* 3. String -> JSON
* 4. JSON -> String
*/
PrintWriter out = response.getWriter();
jObject.put("k01", p);
// User user = new User();
// jObject.fromObject(user); // javaBean -> Json
// out.write(jObject.toString());
System.out.println(jObject.getString("k01"));
out.write(jObject.getString("k01"));
out.flush();
}
}
实例效果图:
4、补充资料
集合类输出格式
以下罗列各种常用的集合类,利用System.out.println()打印后的格式显示,以便在组装数据时方便脚本输入测试。
数组类型
String[] s = new String[5];
s[0] = "1";
s[1] = "2";
s[2] = "3";
s[3] = "4";
System.out.println(Arrays.toString(s));
输出结果:[1, 2, 3, 4, null]
List类型
List<String> list = new ArrayList<>();
list.add("John");
list.add("Mike");
list.add("Lisa");
System.out.println(list);
输出结果:[John, Mike, Lisa]
Set类型
Set<String> set = new HashSet<>();
set.add("John");
set.add("Mike");
set.add("Lisa");
System.out.println(set);
输出结果:[Mike, John, Lisa]
Map类型
Map<String, String> map = new HashMap<>();
map.put("name1", "John");
map.put("name2", "Mike");
map.put("name3", "Lisa");
System.out.println(map);
输出结果:{name3=Lisa, name2=Mike, name1=John}
JSONObject类型
JSONObject jObject = new JSONObject();
jObject.put("name1", "John");
jObject.put("name2", "Mike");
jObject.put("name3", "Lisa");
System.out.println(jObject);
输出结果:{“name3”:”Lisa”,”name2”:”Mike”,”name1”:”John”}
JSONArray类型
JSONArray jArray = new JSONArray();
jArray.put("John");
jArray.put("Mike");
jArray.put("Lisa");
System.out.println(jArray);
输出结果:[“John”,”Mike”,”Lisa”]