狂神ajax,Ajax 学习笔记 by狂神说

Ajax

AjAX=Asynchronous javaScript and XML(异步的javaScript和XML)。

Ajax不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的Web应用程序的技术

C/S

增加B/S的体验性

B/S：未来的主流，并且会爆发式的持续增长；

H5+网页+客户端+手机端

使用JQuery需要先导入jQuery的js文件；

@Controller

@RequestMapping("/ajax")

public class AjaxController{

//第一种方式，服务器要返回一个字符串，直接使用response

@RequestMapping("/a1")

public void ajax(String name,HttpServletResponse response){

if("admin".equals(name)){

response.getWriter().print("true");

}else{

response.getWriter().print("false");

}

}

}

@RequestMapping("/a2")

@ResponseBody

public List ajax2(){

List list =new ArrayList<>();

User user1 =new User("豪",1,"男");

User user2=new User("豪",1,"男");

list.add(user1);

list.add(user2);

return list; //由于加了@ResponseBody注解，他会返回一个字符串

}

ajax 写法

function a1() {

//所有参数：

//url:待载入页面的URL地址，Json

//data:待发送Key/value参数

//success:载入成功时回调函数

//data：封装了服务器返回的数据

//status：状态

$.ajax({

url:"${pageContext.request.contextPath}/ajax/a1",

data:{"name":$("txtName").val()},

success:function (data,status) {

console.log(data)

console.log(status)

}

});

//将文本输入的值，

$("txtName").val();

// //发送给服务器，

// //接受服务器返回的数据

}

$(function(){

$("#btn").click(function(){

$.post("${pageContest.request.contextPath}/ajax/a2",function(data){

console.log(data);

var html="";

for(var i=0;i

html+="

"+

"

"+data[i].name+""+

"

"+data[i].age+""+

"

"+data[i].sex+""+

"

"

}

$("#content").html(html);

})

})

})

第三种

@RequestMapping("/a3")

@ResponseBody

public String ajax3(String name,String pwd){

String msg="";

if(name!=null){

if("admin".equals(name)){

msg="ok";

}else{

msg="用户名有误"；

}

}

if(pwd != null){

if("123456".equals(pwd)){

msg="ok";

}else{

msg="密码输入有误";

}

}

return msg;

}

Title

function a1(){

$.post({

url:"${pageContext.request.contextPath}/ajax/a3",

data:{"name":$("#name").val()},

success:function(data){

if(data.toString()=='ok'){

//信息核对成功

$('#userInfo').css("color","green");

}else{

$("#userInfo").css("color","red");

}

$("#userInfo").html(data);

}

})

}

function a2(){

$.post("${pageContext.request.contextPath}/ajax/a3",{"pwd":$("pwd").val()},function(data){

if(data.toString()='ok'){//信息核对成功

$('#pwdInfo').css("color","green");

}else{

$('#pwdInfo').css("color","red");

}

$("#pwdInfo").html(data);

})

}

用户名：

密码：

Ajax 总结：

使用jQuery需要导入JQuery，使用Vue就导入Vue，两个都用，自己原生态实现

三步曲：

1.编写对应处理的Controller,返回消息或者字符串汇总json格式的数据

2.编写ajax请求

​1.url: Controller 请求

​2.data： 键值对

​3 . SUCCESS: 回调函数

3.给Ajax绑定事件，点击click，失去焦点onblur,键盘弹起keyup

来源：https://www.cnblogs.com/small-hao/p/13190663.html