原生js 实现Ajax 异步处理实列

最新推荐文章于 2023-07-16 12:13:17 发布

原创最新推荐文章于 2023-07-16 12:13:17 发布 · 324 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#JavaWeb

JavaWeb 专栏收录该内容

42 篇文章

订阅专栏

本文通过实例演示了如何在JavaWeb环境中利用原生JavaScript实现Ajax异步处理。详细介绍了在Eclipse中创建动态网页，包括dologinServlet.java的后端处理、login.js中的Ajax调用以及dologin.jsp的前端交互逻辑。

打开 eclipse 创建如下动态网页如下图所示：

dologinServlet.java 代码如下：

package servlet;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
@WebServlet("/login")
public class dologinServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		response.setContentType("text/html; charset=UTF-8");
		PrintWriter out = response.getWriter();
		//获取url请求中对应的username
		String username=request.getParameter("username");
		String opr=request.getParameter("opr");
		if(opr.equals("checkUsername")) {
			//模拟调用三层,验证用户名是否存在
			if(username.equals("admin")) {//存在
				out.print("exist");
			}else {//不存在
				out.print("noexist");
			}
		}
		//关闭资源
		out.flush();
		out.close();
	}
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		request.setCharacterEncoding("UTF-8");
		doGet(request, response);
	}
}

$(function(){
	//发送ajax请求
	$("#username").blur(function(){
		//获取用户名
		var username=$(this).val();
		console.log(username);
		//参数较多的情况,可以简化data的拼接
		var params=new Object();//创建js对象
		params.username=username;
		params.opr="checkUsername";
		$.ajax({
			"url":ctx+"/login",
			"type":"POST",
			"data":params,
			"dataType":"text",
			"success":function(result){
				if(result=="exist"){//存在
					$("#spanInof").html("用户名已被使用，我滴个神");
				}else{//不存在
					$("#spanInof").html("用户名可以使用");
				}
			},
			"error":function(){
				console.log("发生错误");
			}
		});
		
		
	});
	
	
	
})

dologin.jsp 代码如下：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ajax验证用户名是否可用</title>
<script>
	var ctx="${pageContext.request.contextPath}";
</script>
</head>
<body>
<form action="#" method="post">
    <table>
        <tr>
            <td>用户名：</td>
            <td>
                <input type="text"name="username" id="username" />
                <span id="spanInof"></span>
                &nbsp;
                <font color="#coofff">*</font>
            </td>
        </tr>
    </table>
</form>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.12.4.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/login.js"></script>
</body>
</html>