javaweb——jQuery方式实现Ajax_webplus.doajax-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_39909290/article/details/104202507

本文介绍了一种前端注册时手机号验证的方法，利用jQuery的AJAX进行前后端交互，servlet接收并处理请求，反馈验证结果。文章详细展示了前端HTML输入框与按钮设置，以及两种jQuery AJAX调用方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前端代码

	phoneNumber:<input type="text" id="num" />
	<input type="button" value="submit" onclick="register()" />

servlet代码

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		request.setCharacterEncoding("utf-8");
		response.setCharacterEncoding("utf-8");
		response.setContentType("text/html; charset=UTF-8");
		
		// 通过name=data中的name获取对应的data
		String phoneNum = request.getParameter("phoneNum");
		PrintWriter write = response.getWriter();
		if("110".equals(phoneNum)) {
			write.write("true");
		}else {
			write.write("false");
		}
	}


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

1、jQuery第一种方式

<script type="text/javascript" src="./script/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
	function register(){
		var $mobile = $("#num").val();
		$.ajax({
			url:"AjaxTextServlet",					// 请求的链接
			type:"post",							// 请求方式（字符串格式，共有两个值：get和post）
			data:"phoneNum="+$mobile,
			success:function(result, testStatus){	//请求成功回调函数（两个参数：服务器响应返回的结果，响应结果状态码）
				if(result == "true"){
					alert("此号码已存在");
				}else{
					alert("注册成功");
				}
			},
			error:function(xhr, errorMessage, e){	// 请求失败回调函数（三个参数：XMLHttpRequest对象、错误信息、（可选）捕获的异常对象）
				alert(errorMessage);				// 如果发生了错误，错误信息（第二个参数）除了得到 null 之外，
			}										// 还可能是 "timeout", "error", "notmodified" 和 "parsererror"。
		});
	}
</script>

2、jQuery第二种方式

直接使用get（）或post（）方法

post和get方法格式一样，使用时将方法名互换即可

	$.get(
		"AjaxTextServlet",					// 请求的链接
		"phoneNum="+$mobile,				// 发送到服务端的数据
		function(result, testStatus){		// success，请求成功的回调函数
			if(result == "true"){
				alert("此号码已存在");
			}else{
				alert("注册成功");
			}
		},
		"text"								// 预计的服务器响应的数据类型，默认地，jQuery 将智能判断。
											// "xml" "html" "text" "script" "json" "jsonp"
	);