Ajax高级

servlet层

@javax.servlet.annotation.WebServlet(name = "AjaxServlet",urlPatterns = {"/AjaxServlet"})
public class AjaxServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
         String name=request.getParameter("uname");
         if (name.equals("admin")){
            response.getWriter().write("true");
         }else{
             response.getWriter().write("false");
         }
    }

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


ajax.jsp页面

</head>
<body>
    <form id="form1">
        <input name="uname"/><span id="msg"></span>
        <input name="upwd" value="000000"/>
        <div id="box">

        </div>
    </form>
</body>


Ajax的提交方式：
<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
<script type="text/javascript">
$(function () {
    $("[name=uname]").blur(function () {
    //ajax提交方法的调用
     newAjax();
}); 
/**
 * ajax方法提交方法
 */
function newAjax() {
    $.ajax({
        url:"/AjaxServlet",
        type:"POST",
        data:{"uname":$("[name=uname]").val()},
        async:true,
        success:function (data) {
            $("#msg").html(data);
        }
    });

}
  }
</script>


效果如下：
输入的值与判断的值相同时：


输入的值与判断的值不同：

 

 






posted @ 2017-10-16 16:46  努力奋斗吧  阅读(124)  评论(0)  编辑  收藏  举报