第二章：Ajax

最新推荐文章于 2021-12-02 10:07:32 发布

浊酒南街

最新推荐文章于 2021-12-02 10:07:32 发布

阅读量143

点赞数 1

分类专栏： # JavaEE详解-全程实战案例

本文链接：https://blog.csdn.net/weixin_43597208/article/details/107429223

版权

JavaEE详解-全程实战案例专栏收录该内容

24 篇文章 0 订阅

订阅专栏

1、Ajax：异步请求,也就是在不刷新页面的情况向服务器发送请求;客户端与服务端交互数据,需要发送请求(http);
2、ajax一般运用在注册或则登录的时候进行信息提示;也就是在网页不重新加载的情况进行了一次客户端与服务端的数据交互;一般情况服务端(servlet)返回的是一个json类型的数据;
3、示例代码如下：
AjaxServlet类：

package com.jh.ajax;

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("/AjaxServlet")
public class AjaxServlet extends HttpServlet {
	
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		req.setCharacterEncoding("utf-8");
		resp.setContentType("text/html;charset=utf-8");

		String username = req.getParameter("username");
		System.out.println("Ajax++++++++"+username);
		//服务器向浏览器响应一个json串，code值只是一个标示，1代表验证成功，0代表不成功；
		String rel = "{\"code\":\"1\"}";
		PrintWriter w = resp.getWriter();
		if(username.matches("^[A-Za-z]+$")&&username.length()>3) {
			w.write(rel);
		}else {
			rel = "{\"code\":\"0\"}";
			w.write(rel);	
		}
		w.flush();
		w.close();
		
		
	}
}

ajax.jsp

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Insert title here</title>
<script src="js/jquery-3.5.1.min.js"></script>
<script type="text/javascript">
$(function(){
	//失去焦点事件
	$("#user").blur(function(){
		/**
		 jquery ajax：$.get(url, [data], [callback], [type])
		 参数:
			 第一个参数url：代表收件人,异步发送请求的路径
			 第二个参数data:发送请求的数据,信的内容
			 第三个参数:回调函数,响应的内容
			 第四个参数type:默认的是text字符串  xml html json
		 */
		
	      $.get(
				 "${pageContext.request.contextPath }/AjaxServlet",
				 {"username":$("#user").val()},
		 		 //响应的函数(内容)
		 		 function(data){
					 var code=data.code;
					 if(code == 0){
						 $("#text").html("此用户名不合法,请更换一个.");
						 console.log("此用户名不合法,请更换一个.");
					 }else{
						 $("#text").html("用户名可以使用.");
						 console.log("用户名可以使用.");
					 }
				 },
				 //type:默认是字符串
				 "json"
		 );

});	
})		
 
</script>
</head>
<body>
<form action="registServlet" method="get">
<table class="tab">
	<tr>
		<td><lable for="username">用户名</lable></td>
		<td><input type="text" id="user"name="username"><span id="text" style="color:red"></span></td>	
	</tr>
	<tr>
		<td><lable for="password">密码</lable></td>
		<td><input type="password" id="password"></td>
		<td id="tips2"></td>
	</tr>
	<tr>
		<td colspan="2"><input type="submit" value="注册"></td>
	</tr>
</table>
</form>
</body>
</html>

浊酒南街

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
第二章：Ajax

1、Ajax：异步请求,也就是在不刷新页面的情况向服务器发送请求;客户端与服务端交互数据,需要发送请求(http);2、ajax一般运用在注册或则登录的时候进行信息提示;也就是在网页不重新加载的情况进行了一次客户端与服务端的数据交互;一般情况服务端(servlet)返回的是一个json类型的数据;3、示例代码如下：AjaxServlet类：package com.jh.ajax;import java.io.IOException;import java.io.PrintWriter;im
复制链接

扫一扫

专栏目录