码迷,mamicode.com
首页 > Web开发 > 详细

AJAX异步校验

时间:2019-11-26 13:23:59      阅读:71      评论:0      收藏:0      [点我收藏+]

标签:user   write   als   use   设置   red   text   url   ring   

JQeury实现方式
  1. $.ajax()
    * 语法:$.ajax({键值对});
      //使用$.ajax()发送异步请求
      $.ajax({
      url:"ajaxServlet1111" , // 请求路径
      type:"POST" , //请求方式
      //data: "username=jack&age=23",//请求参数
      data:{"username":"jack","age":23},  //j建议这种
      success:function (data) {
      alert(JSON.stringify( data ));

      },//响应成功后的回调函数
      error:function () {
      alert("出错啦...")
      },//表示如果请求响应出现错误,会执行的回调函数
      dataType:"text"//设置接受到的响应数据的格式
      });
  2. $.get():发送get请求
    * 语法:$.get(url, [data], [callback], [type])
    * 参数:
      * url:请求路径
      * data:请求参数
      * callback:回调函数
      * type:响应结果的类型

  3. $.post():发送post请求
    * 语法:$.post(url, [data], [callback], [type])
    * 参数:
      * url:请求路径
      * data:请求参数
      * callback:回调函数
      * type:响应结果的类型

jsp;

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>注册页面</title>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script>

        //在页面加载完成后
        $(function () {
            //给username绑定blur事件
            $("#username").blur(function () {
                //获取username文本输入框的值
                var username = $(this).val();
                //发送ajax请求
                //期望服务器响应回的数据格式:{"userExsit":true,"msg":"此用户名太受欢迎,请更换一个"}
                //                         {"userExsit":false,"msg":"用户名可用"}
                $.post("findUserServlet",{username:username},function (data) {
                    //判断userExsit键的值是否是true

                    alert(JSON.stringify( data ));

                    var span = $("#s_username");
                    if(data.userExsit){
                        //用户名存在
                        span.css("color","red");
                        span.html("asd");
                    }else{
                        //用户名不存在
                        span.css("color","green");
                        span.html(data.msg);
                    }
                },"json");

            });
        });
    </script>
</head>
<body>
    <form>
        <input type="text" id="username" name="username" placeholder="请输入用户名">
        <span id="s_username"></span>
        <br>
        <input type="password" name="password" placeholder="请输入密码"><br>
        <input type="submit" value="注册"><br>
    </form>
</body>
</html>

servlet;

@WebServlet("/findUserServlet")
public class FindUserServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.setCharacterEncoding("utf-8");
        //1.获取用户名
        String username = request.getParameter("username");

        System.out.println(username);

        response.setContentType("application/json;charset=utf-8");
        HashMap<String, Object> map = new HashMap<>();
        //调用service层判断用户名是否存在
        if ("tom".equals(username)){
            //存在
            map.put("userExist",true);
            map.put("msg","名字已存在");
        }else{
            //不存在
            map.put("userExist",false);
            map.put("msg","用户名可以用");
        }
        //将map转换成json,并且传递给客户端
        ObjectMapper mapper = new ObjectMapper();
        System.out.println(mapper.writeValueAsString(map));
        mapper.writeValue(response.getWriter(),map);
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doPost(request, response);
    }
}

 

AJAX异步校验

标签:user   write   als   use   设置   red   text   url   ring   

原文地址:https://www.cnblogs.com/naigai/p/11934729.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!