《JavaWeb视频教程》（p47）

最新推荐文章于 2023-05-21 15:27:53 发布

garrulousabyss

最新推荐文章于 2023-05-21 15:27:53 发布

阅读量159

点赞数

CC 4.0 BY-SA版权

分类专栏： Java学习笔记

本文链接：https://blog.youkuaiyun.com/garrulousabyss/article/details/99702922

Java学习笔记专栏收录该内容

94 篇文章

订阅专栏

本文介绍了一种使用JQuery的Ajax方法load和getJSON进行服务器数据请求的方式。通过两个示例页面，演示了如何检查手机号码是否已被注册，并以JSON格式接收服务器响应。示例中，MobileServlet作为服务器端处理请求，返回相应的JSON数据。

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

p47 JQuery方式的Ajax-load和getJson

MobileServlet.java

package org.lanqiao.servlet;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * Servlet implementation class MobileServlet
 */
public class MobileServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
       

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		request.setCharacterEncoding("utf-8");
		response.setCharacterEncoding("utf-8");
		response.setContentType("text/html; charset=utf-8");
		
		String mobile = request.getParameter("mobile");
		//假设此时，数据库中只有一个号码：18888888888
		
		PrintWriter out = response.getWriter();
		if("18888888888".equals(mobile)) {
			//return true;
			//out.write("true");
			//out.write("已存在，注册失败！");
			//如果客户端是getJSON()，则需要以json格式返回数据
			out.write("{\"msg\":\"true\"}");
		}else {
			//return false
			//out.write("false");
			//out.write("注册成功");
			//如果客户端是getJSON()，则需要以json格式返回数据
			out.write("{\"msg\":\"false\"}");
		}
		out.close();
	}


	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		doGet(request, response);
	}

}

index4.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.bootcss.com/jquery/1.10.0/jquery.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>

<script type="text/javascript">
	function register()
	{
		var $mobile = $("#mobile").val();
		$("#tip").load(
			"MobileServlet",
			"mobile="+$mobile
			);
	}

</script>

</head>

<body>
	手机：<input id="mobile"/>
	<br/>
	<input type="button" value="注册" onclick="register()"/>
	<span id="tip"></span>
</body>

</html>

index5.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.bootcss.com/jquery/1.10.0/jquery.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>

<script type="text/javascript">
	function register()
	{
		var $mobile = $("#mobile").val();
		$.getJSON(
			"MobileServlet",
			{"mobile":$mobile},
			function(result)
			{
				if(result.msg == "true"){
					alert("已存在，注册失败！");
				}else{
					alert("注册成功");
				}
			}
			
			
		);
	}

</script>

</head>

<body>
	手机：<input id="mobile"/>
	<br/>
	<input type="button" value="注册" onclick="register()"/>
	<span id="tip"></span>
</body>

</html>