使用jquery中封装的$.Ajax()进行异步通信
程序员文章站
2022-07-12 19:18:55
...
客户端代码
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
</head>
<body>
<form action="#" method="post">
用户名: <input type="text" name="username" id="username" onblur="onChang()">
<span id="spanUser"></span>
</form>
</body>
<script type="text/javascript" src="${pageContext.request.contextPath}/ajax/jquery/jquery-1.12.4.js"></script>
<%--<script src="jquery\jquery-1.12.4.js"></script>--%>
<script>
var xml=null;
function onChang() {
var username=$("#username").val();
if (username=="") {
$("#spanUser").html("<font color='red'>用户名不可以为空</font>")
}
else {
$.ajax(
{
//服务器路径
url:"/java92web/checkServlet",
//提交方式
type:"post",
//参数
data:"name="+username,
//结果返回的形式
dataType:"text",
//成功后返回的结果
success:function (result1) {
if (result1=="ok") {
$("#spanUser").html("<font color='red'>用户名已占用</font>")
}else
{
$("#spanUser").html("<font color='green'>√</font>")
}
},
//失败的情况
error:function () {
alert("请联系管理员");
}
}
)
}
}
</script>
</html>
服务器
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
@WebServlet("/checkServlet")
public class checkServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
response.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=utf-8");
PrintWriter out = response.getWriter();
String name=request.getParameter("name");
if (name.equals("admin")) {
out.print("ok");
}
else {
out.print("filed");
}
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doPost(request, response);
}
}
推荐阅读
-
小程序开发中如何使用async-await并封装公共异步请求的方法
-
详解JavaScript原生封装ajax请求和Jquery中的ajax请求
-
浅析jquery ajax异步调用方法中不能给全局变量赋值的原因及解决方法
-
jquery中的ajax异步上传
-
jquery中的ajax同步和异步详解
-
在jquery中的ajax方法怎样通过JSONP进行远程调用
-
对Jquery中的ajax再封装,简化操作示例
-
C#使用Protocol Buffer(ProtoBuf)进行Unity中的Socket通信
-
jquery中AJAX请求 $.post方法的使用
-
jquery中ajax使用error调试错误的方法教程