一、什么是Ajax?
Ajax 即“ A synchronous J avascript A nd X ML”(异步 JavaScript 和 XML),是指一种创建交互式网页应用的网页开发技术。
Ajax = 异步 JavaScript 和 XML(标准通用标记语言的子集)。
Ajax 是一种用于创建快速 动态 网页的技术。
Ajax 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。
通过在后台与服务器进行少量数据交换,Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
传统的网页(不使用 Ajax)如果需要更新内容,必须重载整个网页页面。
以上来自百度百科!
二、Ajax传递数据至controller
1、传递单个参数
代码如下:
<script type="text/javascript">
$(function(){
$("#userIdcard").blur(function() {
var userIdcard = $("#userIdcard").val();
$.ajax({
url:"../userController/checkUser",
type:"post",
data:{userId:userIdcard},
success:function (data) {
//接收单个参数和前端交互
//这里做一些你想做的。
//data(success中的data)就是后台响应传递来的数据,具体请看接收参数模块
if(data){
$("#UserError").text("乘车人已存在");
}
},
error:function () {
alert("错误!")
}
})
});
});
</script>
<input type="text" name="userIdcard" id="userIdcard"><label id="UserError"></label>
//单个参数
@RequestMapping("/checkUser")
@ResponseBody
public boolean checkUser(String userId){
boolean flag = userService.checkUser(userId);
return flag;
}
说明:
1、使用前,必须确保jQuery引入成功,
2、传递的参数就是data(Ajax中的属性data)传递的,
3、对于data:{userId:userIdcard}
,其中userId,是后台controller接收的参数名称,userIdcard是你要传递的参数。
4、url中的userController是类中的@RequestMapping,controller的@ResponseBody,是controller传递数据到前台的关键,方法checkUser的参数名称和第三点提到的内容一致。
5、我这里给前台的反应是传递flag(布尔类型),success中的data来接收
2、传递多个参数
多个简单参数
$("#button").click(function(){ var name=$("#userName").val(); var age = $("#userAge").val(); var args={userName:name,userAge:age} $.ajax({ url:"<%=basePath%>loginController/register", cache:false, data:args, type:"post", success:function(result){ alert(result.name); } }); });
@RequestMapping("/register") @ResponseBody public User register(String userName,String userAge){ System.out.println(userName+":"+userAge); return null; }
说明:
1、对于var args={userName:name,userAge:age}
,其中,userName是实体类对应的字段名(key),name(value)是上面定义的name本身是通过id获取表达的值)。
2、cache:false是说把Ajax的缓存关掉
3、后台接收,直接使用参数名接收即可(key)多个对象
$("#button").click(function(){ var args=[]; var name=$("#userName").val(); var age = $("#userAge").val(); var arg={userName:name,userAge:age} //为了方便这里放两个相同的 args.push(arg); args.push(arg); $.ajax({ url:"<%=basePath%>loginController/register", cache:false, contentType : 'application/json; charset=utf-8', data:JSON.stringify(args), type:"post", success:function(result){ alert(result.name); } }); });
@RequestMapping("/register") @ResponseBody public User register(@ResponseBody List<User> list){ System.out.println(list); return list.get[0];//返回第一条记录 }
说明:
1、将数据打包存放到args数组中传递到controller
2、contentType,JSON.stringify(args),参数前的@ResquestBody,这仨都是必须的
3、传递表单的数据
表单以字符串形式传入controller
<% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <script type="text/javascript"> $(function () { $("#btn").click(function () { $.ajax({ url:"<%=basePath%>loginController/register", data:$("#register").serialize(), type:"post", success:function (res) { alert("恭喜你<"+res.userName+">注册成功!); }, error:function () { alert("注册失败!"); } }) }) }); </script>
@RequestMapping("/register") @ResponseBody public User register(User user){ userService.insertUser(user); return user; }
说明:
1、“btn”是表单提交按钮的id,register是表单form的id
2、res是响应后台的数据,具体请看接收数据的内容
3、controller传给前台的是user对象。对象转成 json 传入
$("#btn").click(function(){ var name=$("#userName").val(); var age = $("#userAge").val(); var args={userName:name,userAge:age} $.ajax({ url:"<%=basePath%>loginController/register", cache:false, contentType : 'application/json; charset=utf-8', data:JSON.stringify(args), type:"post", success:function(res){ alert(res.userName); } }); });
@RequestMapping("/register") @ResponseBody public User register(@RequestBody User user){ userService.insertUser(user); return user; }
说明:
1、使用这种方式,要求ajax提交时加入contentType : ‘application/json; charset=utf-8’
2、要求将字符串转成json格式,JSON.stringify(args),传给data,通过data传入controller
3、对于var args={userName:name,userAge:age}
,其中,userName是实体类对应的字段名,name是上面定义的(name本身是通过id获取表达的值)。
4、要求conteroller层接收参数前加入@ResquestBody
5、接收用的是res,其实是data,具体请看接收参数模块
三、Ajax从controller接收数据
- 原始接收数据
- 通过response获取,即
response.getWriter.println("单个数据")
这种适合接收单个数据(String,boolean,int),方法返回值为void。
- 通过response获取,即
Ajax接收数据
通过springMVC提供的@ResponseBody
- 1、接收单个数据
- 单个参数,接收,success中的data封装的就是那个“单个数据”,直接可以做处理
2、接收类对象
//单个对象 @RequestMapping("/checkUser") @ResponseBody public User checkUser(String userId){ User user = userService.selectUserByIdcard(userId); return user; }
<script type="text/javascript"> $(function(){ $("#userIdcard").blur(function() { var userIdcard = $("#userIdcard").val(); $.ajax({ url:"../userController/checkUser", type:"post", data:{userId:userIdcard}, success:function (data) { //接收对象和前端交互 $("#UserError").text(data.userName); }, error:function () { alert("错误!") } }) }); }); </script>
说明:
1、使用前,必须确保jQuery引入成功,
2、传递userId,这个属性是为了检查用户的合法性
3、返回user,user是实体类,其中封装了userName等字段,具体代码不再粘贴
4、前端直接data.字段名就可获取user中封装的数据3、接收list<类>
//list @RequestMapping("/checkUser") @ResponseBody public List<User> checkUser(String userId){ User user = userService.selectUserByIdcard(userId); List<User> list = new ArrayList<>(); list.add(user); list.add(user); return list; }
success:function (data) { //接收list $.each(data,function (index,res) { alert(index+":"+res.userName+":"+res.userAge); }) },
说明:
1、这一块省略了数据传入的代码
2、传递的是单个参数userId
3、返回list,里面是user,user是实体类
4、前端通过循环,获取list中的数据,$.each(data,function (index,res)
其中data就是接收的list,function中的index是索引(0,1….),res其实是data,为了区别,命名为res,这样就可以res.字段名来获取数据。
- 1、接收单个数据