-
Ajax 在网页开发中必不可少,经常遇到,这里我写一下开发过程中比较常用的技术。
-
开发重点注意:
-
1、用户体验
-
2、程序性能、安全、可维护性、等等
// 提交数据到后台处理
$.ajax({
url: "login", //(默认为当前页地址)发送请求的地址
async:true, //(默认设置为true、异步请求),异步请求(true)或者同步请求(false)
type:"POST", //(默认为get)请求方式post或get、注意:其他http请求方法,例如update和delete也可以使用,但仅部分浏览器支持。
data:{id:id}, //发送到服务器的数据(这里只演示一个id、一般根据自己表单需求随便加)
beforeSend:function (){ //Ajax在发送请求前、提供了一个对象函数,若返回return false;可以取消本次请求
showModal(); //可以什么都不写 一般的表单提交这个请求前的函数我们可以直接不要,比如:执行一个自定义函数
$("#submit").attr({ disabled: "disabled" }); //常用的就是 :比如:禁用按钮防止重复提交
},
success: function(result){ //成功后调用的回调函数 这里只放了一个参数
console.log("结果"+result); //重点来了,当我们后台返回字符串是json格式的时候 如果你直接result.msg=="sucess" 是取不到json值的
var res = $.parseJSON(result); //用jQuery处理传过来的json值
console.log("处理结果"+res);
//console.log("处理结果"+res.userName); //取出单个值
if(res.msg == "success"){ //再用 res.msg=="sucess" 就可以取到json值了
alert("操作成功");
}
else{
alert("操作失败");
}
},
error: function (result) { //请求失败时被调用的函数 一般我很少用,根据需求 不是必须的
console.info("error: " + result);
}
});
@ResponseBody
@RequestMapping(value="findByIdUserName")
public String findByIdUserName(HttpServletRequest request,HttpServletResponse response,HttpSession session){
//map就是一个容器,主要调用put()这里用于存我们的返回值 用于前台提示
Map<String, Object> result = new HashMap<>();
int id = Integer.parseInt(request.getParameter("id"));
User user = new User();
//调用service层接口方法,根据需求写自己的接口 与数据库打交道 接口的代码就不贴了 懂得人都知道
user= userService.getUserNameById(id);
//String userName = user.getUsername(); //可得到单个参数值
if( null ! = user){
result.put("msg","success"); //函数执行完了之后,将返回结果存入map容器 将其带入前台ajax进行接收
//result.put("userName ", userName ); 存入单个值
result.put("user", user); //对于数据库操作后得到的单个参数值或者对象拿到后存入map容器 将其带入前台也可以ajax进行接收
//session.setAttribute("user", user); //这里也可以把这个这个单个参数值或者对象值存入session 然后在页面直接取到:${user}
}else{
result.put("msg","error");
}
return JSON.toJSONString(result); //对象转化为json字符串
}