ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

Ajax---狂神说

2020-10-27 02:31:50  阅读:314  来源: 互联网

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


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<User> ajax2(){
   List<User> list =new ArrayList<>();
   User user1 =new User("豪",1,"男");
   User user2=new User("豪",1,"男");
   list.add(user1);
   list.add(user2);
   return list; //由于加了@ResponseBody注解,他会返回一个字符串
}

ajax 写法

Copy<script type="text/javascript">
   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<script>
   $(function(){
  $("#btn").click(function(){
           $.post("${pageContest.request.contextPath}/ajax/a2",function(data){
               console.log(data);
               var html="";
               for(var i=0;i<data.length;i++){
                   html+="<tr>"+
                       "<td>"+data[i].name+"</td>"+
                       "<td>"+data[i].age+"</td>"+
                       "<td>"+data[i].sex+"</td>"+
                       "</tr>"
              }
               $("#content").html(html);
          })
      })
})
</script>    

第三种#

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<html>
   <head>
       <title>Title</title>
       <script>
           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);
              })
          }
       </script>
   </head>
   <body>
       <p>
           用户名:
           <input type="text" id="name" onblur="a1()"/>
           <span id="userInfo"></span>
       </p>
       <p>
          密码:
      <input type="text" id="pwd" onblur="a2()"/>
      <span id="pwdInfo"></span>
           
       </p>  
       
   </body>
</html>

Ajax 总结:

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

三步曲:

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

2.编写ajax请求

1.url: Controller 请求

2.data: 键值对

3 . SUCCESS: 回调函数

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

狂神说Java【SMBMS】——SMBMS超市订单管理系统(五) ——使用Ajax优化密码修改功能

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

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

1.什么是Ajax

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

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

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

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

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

  4. 传统的网页(不使用 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);
    }
  });

img

    //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<String,String> resultMap = new HashMap<String, String>();

       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.测试

img img img img

标签:function,oldpassword,else,---,密码,Ajax,狂神,data
来源: https://www.cnblogs.com/999520hzy/p/13882365.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有