JavaWeb之AJAX快速入门

最新推荐文章于 2024-11-16 17:49:09 发布

Gorgeous_Tang

最新推荐文章于 2024-11-16 17:49:09 发布

阅读量1.2k

点赞数 1

文章标签： web eclipse java

本文链接：https://blog.csdn.net/weixin_65479202/article/details/124460527

版权

本文介绍了JavaWeb中AJAX的基础知识，包括JSON的前后端转换、异步与同步的概念，重点讲解了jQuery中AJAX的使用，如ajax()、get()、post()方法，并给出了实际的案例应用，如手机注册验证和搜索自动补全功能。

摘要由CSDN通过智能技术生成

1.JSON使用

对象字符串，满足定义规则的字符串。
1.1 前端JSON格式字符串的转换使用
   JavaScript——JSON.stringify(o);JSON.parse(jsonStr);
   jQuery——$.parseJSON

1.2 后端JSON格式字符串的转换使用
   jackJSON
   fastJSON

2.异步与同步

2.1 同步
一个人同一时间只能做一件事情，只有一件事情做完，才能做另一件事情。
2.2 异步
一个人事情做了一半，转而去做其他事情，当其他事情做完以后，再回过头做之前未完成的事情。

3.jQuery之AJAX使用

原生js写ajax请求（写起来很复杂，而且需要考虑浏览器版本），而jQuery将这些复杂的业务逻辑进行封装处理，使用非常简单。

3.1 概述
   Ajax(Asynchronous JavaScript and XML) 异步JavaScript和XML
   核心：Ajax就是能够做到局部刷新！
3.2 方法
   ** ajax()
   ** get()
   ** post()

3.3 语法
 $.ajax({          
                url:"发送请求（提交或读取数据）的地址", 
                dataType:"预期服务器返回数据的类型",  
                type:"请求方式", 
                async:"true/false",
                data:{发送到/读取后台（服务器）的数据},
                 success:function(data){请求成功时执行},      
                 error:function(){请求失败时执行}
    });


    $.post(url, [data], [callback], [type]);

    $.get(url, [data], [callback], [type]);

4.案例

注意：需要导入架包！！！

4.1 验证手机注册

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>验证手机注册</title>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>

<script type="text/javascript">
	$(function() {

		$("#phone").blur(function() {
			let phone = $(this).val();

			//判断正则判断
			if (!phone) {

				$("#phone_msg").html("手机号不能为空！！！");
				return;
			} else {

				let a = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
				if (!a.test(phone)) {
					$("#phone_msg").html("手机号不符合规则！！！");
					return;
				}

			}

			$.post("doPhone.do", {
				"phone" : phone
			}, function(msg) {
				/* alert(msg) */
				$("#phone_msg").html(msg);
			})
		})

	});
</script>
<style type="text/css">
h1 {
	color: plum
}
</style>
</head>
<body>
	<center>
		<h1>检测手机号码是否注册</h1>
		<hr>
		<input type="text" name="phone" id="phone"> <span
			id="phone_msg"></span>
	</center>
</body>
</html>

package com.zking.ajax.servlet;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.List;

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

public class checkPhoneLoginServlet extends HttpServlet {

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

	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");

		System.out.println("通过jQuery的ajax的方法进行连接。。。");

		List<String> ll = new ArrayList<String>();
		ll.add("13838381111");
		ll.add("13838381112");
		ll.add("13838381113");
		ll.add("13838381114");
		ll.add("13838381115");

		String phone = request.getParameter("phone");

		boolean flag = true;
		for (String string : ll) {
			if (ll.contains(phone)) {
				flag = false;
				break;
			}
		}

		// 定义一个变量保存结果
		String result = "";
		if (flag == true) {
			result = "ok";
		} else {
			result = "此手机号已被注册！！！";
		}

		// 获取out
		PrintWriter out = response.getWriter();
		out.write(result);
		out.flush();
		out.close();

	}

}

4.2 搜索自动补全

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<style type="text/css">
#odiv {
	text-align: center;
	padding-top: 20px;
	cursor: pointer;
}

#name {
	width: 80%;
	height: 35px;
}

#content {
	width: 80%;
	border: 1px solid black;
	margin: 0 auto;
	text-align: left;
	/* 当超出指定高度可以通过overflow控制滚动条 */
	overflow: auto;
	margin: 0 auto;
}
</style>
<script type="text/javascript">
	$(function() {
		$("#content").hide();
		$("#name")
				.keyup(
						function() {
							let name = $(this).val();
							if (!name) {
								$("#content").hide();
							} else {
								$("#content").show();
							}
							$
									.post(
											"autoFull.do",
											{
												"name" : name
											},
											function(msg) {

												/* alert(msg) */
												let list = $.parseJSON(msg);
												console.log(list);
												if (list.length == 0) {
													$("#content").css("height",
															"30px");
													$("#content").html(
															"亲，搜索无记录呢~~~");

													window
															.setTimeout(
																	function() {
																		$(
																				"#content")
																				.hide();
																	}, 2000);
													return;
												}
												if (list.length >= 10) {
													$("#content").css("height",
															"200px");
												}

												let str = "";
												$
														.each(
																list,
																function(index,
																		stu) {
																	/* console.log(index,stu); */
																	/* console.log(stu.username) */
																	str += "<div onclick=\"contentBtn('"
																			+ stu.username
																			+ "');\" onmouseover= \"this.style.background='pink'\" onmouseout=\"this.style.background=''\"  \"cursor: pointer;\">"
																			+ stu.username
																			+ "</div>"
																});
												$("#content").html(str);
											});

						});
	})

	function contentBtn(username) {
		$("#name").val(username);
		$("#content").hide();
	}
</script>
</head>
<body>
	<div id="odiv">
		<input type="text" name="name" id="name">
		<div id="content"></div>

	</div>
</body>
</html>

package com.zking.ajax.servlet;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.List;

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 com.fasterxml.jackson.databind.ObjectMapper;
import com.zking.ajax.json.test.Stu;

public class AutoFullServlet extends HttpServlet {

	public List<Stu> queryStuAll() {

		// 模拟生成数据
		List<Stu> list = new ArrayList<Stu>();

		for (int i = 1; i <= 200; i++) {
			if (i >= 1 && i <= 100) {
				list.add(new Stu(1 + i, "张三" + i, "1122"));
			} else if (i > 100 && i <= 200) {
				list.add(new Stu(1 + i, "李四" + i, "1122"));
			}
		}
		return list;

	}

	// 模拟模糊查询方法
	public List<Stu> queryStuAll(String name) {

		List<Stu> queryStuAll = queryStuAll();

		List<Stu> list = new ArrayList<Stu>();
		for (Stu stu : queryStuAll) {
			if (stu.getUsername().contains(name)) {
				list.add(stu);
			}
		}
		return list;

	}

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

	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");

		System.out.println("通过jQuery的ajax的方法进行连接。。。");

		String name = request.getParameter("name");
		List<Stu> queryStuAll = queryStuAll(name);
		/*
		 * for (Stu stu : queryStuAll) { System.out.println(stu); }
		 */

		PrintWriter out = response.getWriter();
		ObjectMapper mapper = new ObjectMapper();
		String asString = mapper.writeValueAsString(queryStuAll);

		out.write(asString);
		out.flush();
		out.close();

	}

}