Ajax高级
Posted 努力奋斗吧
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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>
效果如下：
输入的值与判断的值相同时：
输入的值与判断的值不同：
以上是关于Ajax高级的主要内容，如果未能解决你的问题，请参考以下文章
JavaScript-Tool-lhgDialog：动画示例
Vue3官网-高级指南（十七）响应式计算`computed`和侦听`watchEffect`（onTrackonTriggeronInvalidate副作用的刷新时机`watch` pre）(代码片段