Ajax---狂神说

Ajax

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

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

C/S

增加B/S的体验性

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

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

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

Copy@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 写法

Copy

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();

// //发送给服务器，

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

}

Copy

$(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);

})

})

})

第三种#

Copy@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;

}

Copy

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

在前面的密码修改中，我们避开使用了前端素材中验证旧密码的Ajax功能，是因为要把Ajax单独拿出来讲

前面实现的密码修改功能是直接输入两遍新密码进行的修改，这显然是不安全的，所以我们应该在修改密码的时候加入验证旧密码的操作，而这个操作根据前端素材就需要使用到Ajax了

1.什么是Ajax

AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)

AJAX 不是新的编程语言，而是一种使用现有标准的新方法

AJAX 是在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的艺术

通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新

这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新

传统的网页(不使用 AJAX)如果需要更新内容，必需重载整个网页面

2.怎么实现旧密码验证？

直接的做法就是去数据库中查找，但是这样的画我们又要写一条线：Dao开始-->service-->servlet-->JSP

我们可以采取一种很简单的方式进行：在用户登陆的时候我们将整个用户对象都存储到session中了，所以我们可以利用Ajax的异步请求+session中的user对象实现旧密码的验证

做法就是在后端复用的servlet中再定义一个方法，这个方法专门负责对比Ajax传递给后端的旧密码是否和session中User对象的密码一致，并通过对比的情况和结果来返回JSON数据给前端

3.编写servlet

oldpassword.on("blur",function(){

$.ajax({

type:"GET",

url:path+"/jsp/user.do",//Ajax提交的URL，可见和我们修改密码的JSP页面的表单提交的URL一样，所以我们应该复用servlet

data:{method:"pwdmodify",oldpassword:oldpassword.val()},//提交的参数

//上面两句话等价于 = path+/jsp/user.do ? method=pwdmodify & oldpassword=oldpassword.val()

​

dataType:"json",

success:function(data){

if(data.result == "true"){//旧密码正确

validateTip(oldpassword.next(),{"color":"green"},imgYes,true);

}else if(data.result == "false"){//旧密码输入不正确

validateTip(oldpassword.next(),{"color":"red"},imgNo + " 原密码输入不正确",false);

}else if(data.result == "sessionerror"){//当前用户session过期，请重新登录

validateTip(oldpassword.next(),{"color":"red"},imgNo + " 当前用户session过期，请重新登录",false);

}else if(data.result == "error"){//旧密码输入为空

validateTip(oldpassword.next(),{"color":"red"},imgNo + " 请输入旧密码",false);

}

},

error:function(data){

//请求出错

validateTip(oldpassword.next(),{"color":"red"},imgNo + " 请求错误",false);

}

});

//2.验证旧密码

//直接与session中的user对象的密码进行对比即可，不用再去查数据库

public void pwdModify(HttpServletRequest req, HttpServletResponse resp){

Object user = req.getSession().getAttribute(Constants.USER_SESSION);

String oldpassword = req.getParameter("oldpassword");

​

//使用Map集合存储返回给前端的数据

Map resultMap = new HashMap();

​

if (user==null){//session中的user对象失效了

resultMap.put("result","sessionerror");

}else if (StringUtils.isNullOrEmpty(oldpassword)){//输入的密码为空

resultMap.put("result","error");

}else {

String userPassword = ((User)user).getUserPassword();

if (userPassword.equals(oldpassword)){//输入的密码匹配

resultMap.put("result","true");

}else {//输入的密码不匹配

resultMap.put("result","false");

}

}

​

//将Map集合中的数据转为JSON格式传输给前端

try {

resp.setContentType("application/JSON");//设置返回数据是一个JSON，这样浏览器拿到这个数据之后就会按照JSON的数据格式来解析它

PrintWriter writer = resp.getWriter();//获取输出流

writer.write(JSONArray.toJSONString(resultMap));//使用阿里巴巴提供的一个JSON工具类，直接将其他数据格式的数据转为JSON数据格式，然后直接将其写出去

writer.flush();//刷新缓冲区

writer.close();//关闭资源

} catch (IOException e) {

e.printStackTrace();

}

​

}

4.测试

标签：function,oldpassword,else,---,密码,Ajax,狂神,data

来源： https://www.cnblogs.com/999520hzy/p/13882365.html