第一步:引入jQuery
下载地址:https://www.jb51.net/zt/jquerydown.htm
<script src="${pageContext.request.contextPath}/static/js/jquery-3.5.1.js"></script>
第二步:编写js
<head>
<title>Title</title>
<script src="${pageContext.request.contextPath}/static/js/jquery-3.5.1.js"></script>
</head>
<body>
启动1
<input type="button" id="btn" value="jsonAndAjax"><br>
<table align="center" width="800px">
<td>
<tr>id</tr>
<tr>name</tr>
<tr>password</tr>
</td>
<tbody id="content">
</tbody>
</table>
<script>
alert("2");
$(function (){
$("#btn").click(function (){
$.post("${pageContext.request.contextPath}/ajax/a2",function (data){
console.log(data);
let html="";
for (let i = 0; i <data.length ; i++) {
html+="<tr>"+
"<td>"+data[i].id+ "<td>"+
"<td>"+data[i].name+ "<td>"+
"<td>"+data[i].password+ "<td>"+
"<tr>";
}
$("#content").html(html);
})
})
})
</script>
</body>
第三步:编写后端
@RequestMapping(value = "a2",produces = "application/json;charset=utf-8")
//使用json需要的注解
@ResponseBody
public String testAjax2() throws JsonProcessingException {
System.out.println("a2");
//创建一个jackson的对象映射器,用来解析数据
ObjectMapper mapper = new ObjectMapper();
List<User> list=new ArrayList<>();
for (int i = 0; i < 10; i++) {
User user=new User(i,"x1"+i,"1"+i);
list.add(user);
}
//将我们的对象解析成为json格式
String string=mapper.writeValueAsString(list);
System.out.println(list);
return string;
}
请求方式
post
第一种写法
$.post({
//请求的url
url:"${pageContext.request.contextPath}/ajax/a3",
//'userName':$("#name").val() 获取id="name"节点的值,并且把值给username,附加到url后面,发送到后台
data: {'userName':$("#name").val(),'password':$("#password").val(),},
//接受后台的返回值
/**
* data:如果返回值只有一个,就是data
* 如果返回值是map集合,那就data.key
* 如果是list集合,data[i].key
*
* 关于data,我尝试过把它转化为对象,但是失败了。我觉的对象更好用
*status:状态值,如404,200等
*如果你想在标签内部添加文本或其他标签 $("#p1").html(data.string2); 可以很好的支持。功能和 innerHTML类似。
* $("#p1").css("color","red"); 前面一个参数表示属性,后面一个参数表示值
*
*/
success:function (data,status){
$("#p1").html(data.string2);
$("#p1").css("color","red");
}
});
第二种写法
都写在一起,不写前面的名称
$.post("${pageContext.request.contextPath}/ajax/a3",
{'userName':$("#name").val(),'password':$("#password").val(),},
function(data){
$("#p0").html(data.string1);
$("#p0").css("color","red");
}
);