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

Ajax高级

时间:2017-10-16 17:58:07      阅读:245      评论:0      收藏:0      [点我收藏+]

标签:col   input   ota   方式   web   dmi   att   http   tps   

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>


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

技术分享
输入的值与判断的值不同:

技术分享

 

 






Ajax高级

标签:col   input   ota   方式   web   dmi   att   http   tps   

原文地址:http://www.cnblogs.com/sujulin/p/7635233.html

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