ajax学习
搭建环境
编写pojo层
package com.tx.pojo;
import java.io.Serializable;
public class User implements Serializable{
private String name;
private String age;
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getAge() {
return age;
}
public void setAge(String age) {
this.age = age;
}
public User() {
}
public User(String name,String age) {
this.age=age;
this.name=name;
}
}
编写Controller层
package com.tx.controller;
import java.util.ArrayList;
import java.util.List;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.bind.annotation.RestController;
import com.tx.pojo.User;
@RequestMapping("/h")//代表上级地址
@Controller//代表这个类会被Spring接管
//被这个注解的类,中所有的方法,如果返回值是String,并且有具体页面可以跳转,那么就会被视图解析器解析
public class HelloController {
@RequestMapping("/a1")
public List<User> ajax1(@RequestParam("name")String name){
User u=new User("薛之傲","18");
User u2=new User("戴稳弱","19");
List<User> ulist=new ArrayList<User>();
ulist.add(u);
ulist.add(u2);
System.out.println(name);//将前端传来的数据打印
return ulist;
}
}
下载jquery脚本https://jquery.com/download/
编写jsp代码
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<Meta charset="UTF-8">
<title>Insert title here</title>
<script src="js/jquery-3.6.0.js"></script>//导入jquery包
</head>
<body>
<input type="button" id="btn" value="查看数据">
<table>
<tr><td>姓名</td><td>年龄</td></tr>
<tbody id="user"></tbody>
</table>
</body>
</html>
编写axaj方法实现前后端数据交互
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<Meta charset="UTF-8">
<title>Insert title here</title>
<script src="js/jquery-3.6.0.js"></script>
<script>
$(function(){
$("#btn").click(function(){
$.ajax({
url:'${pageContext.request.contextpath}/h/a1',//跳转后台的地址
method:'post',//请求方式
data:{name:"tx"},//传递数据到后台
success:function(res){//回调函数
console.log(res);//将后台传递的数据打印在控制台
var html="";
for(var i=0;i<res.length;i++){
html=html+"<tr>"+"<td>"+res[i].name+"</td>"+
"<td>"+res[i].age+"</td>"+"</tr>";
}
$("#user").html(html);
}
})
});
});
</script>
</head>
<body>
<input type="button" id="btn" value="查看数据">
<table>
<tr><td>姓名</td><td>年龄</td></tr>
<tbody id="user"></tbody>
</table>
</body>
</html>
开始运行!
jQuery.ajax(…)方法参数
jQuery.ajax(...)
部分参数:
url:请求地址
type:请求方式,GET、POST(1.9.0之后用method)
headers:请求头
data:要发送的数据
contentType:即将发送信息至服务器的内容编码类型(默认: "application/x-www-form-urlencoded; charset=UTF-8")
async:是否异步
timeout:设置请求超时时间(毫秒)
beforeSend:发送请求前执行的函数(全局)
complete:完成之后执行的回调函数(全局)
success:成功之后执行的回调函数(全局)
error:失败之后执行的回调函数(全局)
accepts:通过请求头发送给服务器,告诉服务器当前客户端可接受的数据类型
dataType:将服务器端返回的数据转换成指定类型
"xml": 将服务器端返回的内容转换成xml格式
"text": 将服务器端返回的内容转换成普通文本格式
"html": 将服务器端返回的内容转换成普通文本格式,在插入DOM中时,如果包含JavaScript标签,则会尝试去执行。
"script": 尝试将返回值当作JavaScript去执行,然后再将服务器端返回的内容转换成普通文本格式
"json": 将服务器端返回的内容转换成相应的JavaScript对象
"jsonp": JSONP 格式使用 JSONP 形式调用函数时,如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名,以执行回调函数
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。