15-Javaweb-ajax 和 jquery

oooola

于 2020-07-16 14:18:58 发布

阅读量362

点赞数

分类专栏： java-Web 文章标签： ajax java

本文链接：https://blog.csdn.net/qq_38247809/article/details/107371454

版权

一、案例1-使用原生的ajax判断用户名是否占用(了解)

1-4-4 checkUsername4Ajax

1-4-5 在表单接受响应的数据

二、案例2-使用jquery的ajax判断用户是否被占用

2-1 四种

2-1-1 了解:jquery对象.load(url,params,function(数据){});

2-1-2 ★: $.get(url,params,function(数据){},type)

2-1-3 ★: $.post(url,params,function(数据){},type)

2-1-4 理解:$.ajax([选项])

3-1-3 在文本框输入内容 keyup的时候发送ajax请求将输入值传递到后台

4-1-4 当省份改变的时候,获取省份的信息,发送一个ajax请求，获取市

4-1-5 selectProServlet selectCityServlet

4-2 技术分析

4-2-1 json

4-2-2 json格式

4-2-3 jsonlib工具类,可以使对象转换成json数据

总结

一、案例1-使用原生的ajax判断用户名是否占用(了解)

需求:
当我们在注册页面上输入用户名之后,点击下一个地方,去数据库中查询有无该用户名,最后提示信息
技术分析:
ajax

1-1 ajax

异步JavaScript和XML,
AJAX 是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
传统的网页（不使用 AJAX）如果需要更新内容，必须重载整个网页页面。

同步：

异步：

1-2 ajax入门程序

步骤:
1.创建一个核心对象 XMLHttpRequest
2.编写一个回调函数（响应回来时调用）
3.编写请求方式和请求的路径(open打开操作)
4.发送请求(send操作)

<body>
	<input type="button" value="点我" onclick="btnClick()">
</body>
<script type="text/javascript">
	function btnClick(){
		//1.创建核心对象
		xmlhttp=null;
		if (window.XMLHttpRequest)
		  {// code for Firefox, Opera, IE7, etc.
		  	xmlhttp=new XMLHttpRequest();
		  }
		else if (window.ActiveXObject)
		  {// code for IE6, IE5
		 	 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
		  }

		//2.编写回调函数
		xmlhttp.onreadystatechange=function(){
			//alert(xmlhttp.readyState);
			if(xmlhttp.readyState==4 && xmlhttp.status==200){
				//alert('ok');
				//接受服务器回送过来的数据
				alert(xmlhttp.responseText);
			}
		}
		
		//3.open 设置请求的方式和请求路径——servlet
		xmlhttp.open("get","${pageContext.request.contextPath}/ajax1");
		
		//4.send 发送请求
		xmlhttp.send();
	}
</script>

/**
 * 入门
 */
public class Ajax1Servlet extends HttpServlet {
	private static final long serialVersionUID = 1L;

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		System.out.println("请求来了~~");
		response.getWriter().print("success~~");
	}

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

1-3 ajax-api详解
1-3-1 常用属性

onreadystatechange:检测readyState状态改变的时候
readyState:ajax核心对象的状态
0:核心对象创建
1:调用了open方法
2:调用了send方法
3:部分响应已经生成(没有意思)
4:响应已经完成(使用的是这个状态)
status:状态码
if(xmlhttp.readyState==4 && xmlhttp.status==200){
}
responseText:响应回来的文本

1-3-2 常用方法

open("请求方式","请求路径"[,"是否异步"]):设置请求的方式和请求的路径
send(["参数"]):发送请求参数是请求方式为post的时候的参数
setRequestHeader("content-type","form表单enctype属性"):设置post请求的参数的类型必须放在send方法之前.

"application/x-www-form-urlencoded"

get.jsp

<body>
	<input type="button" value="点我" onclick="btnClick()">
</body>
<script type="text/javascript">
	function btnClick(){
		//核心对象
		xmlhttp=null;
		if (window.XMLHttpRequest)
		  {// code for IE7, Firefox, Opera, etc.
		  xmlhttp=new XMLHttpRequest();
		  }
		else if (window.ActiveXObject)
		  {// code for IE6, IE5
		  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
		  }

		//编写回调函数
		xmlhttp.onreadystatechange=function(){
			if(xmlhttp.readyState==4 && xmlhttp.status==200){
				alert(xmlhttp.responseText);
			}
		}
		
		//open
		xmlhttp.open("get","/day15/ajax2?username=张三");
		
		//send
		xmlhttp.send();
	}
</script>

post.jsp

<body>
	<input type="button" value="点我" onclick="btnClick()">
</body>
<script type="text/javascript">
	function btnClick(){
		//核心对象
		xmlhttp=null;
		if (window.XMLHttpRequest)
		  {// code for IE7, Firefox, Opera, etc.
		  xmlhttp=new XMLHttpRequest();
		  }
		else if (window.ActiveXObject)
		  {// code for IE6, IE5
		  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
		  }

		//编写回调函数
		xmlhttp.onreadystatechange=function(){
			if(xmlhttp.readyState==4 && xmlhttp.status==200){
				alert(xmlhttp.responseText);
			}
		}
		
		//open
		xmlhttp.open("post","/day15/ajax2");
		
		//设置请求头
		xmlhttp.setRequestHeader("content-type", "application/x-www-form-urlencoded");
		
		//send
		xmlhttp.send("username=张三");
	}
</script>

servlet

/**
 * get请求
 */
public class Ajax2Servlet extends HttpServlet {
	private static final long serialVersionUID = 1L;

	protected void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		// 接受参数
		String username = request.getParameter("username");
		username = new String(username.getBytes("iso8859-1"), "utf-8");
		System.out.println(username);

		// 响应数据
		response.setContentType("text/html;charset=utf-8");
		response.getWriter().println("姓名:" + username);
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse
	 *      response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		System.out.println(request.getMethod());
		request.setCharacterEncoding("utf-8");

		// 接受参数
		String username = request.getParameter("username");
		System.out.println(username);

		// 响应数据
		response.setContentType("text/html;charset=utf-8");
		response.getWriter().println("post姓名:" + username);
	}
}

1-4 步骤分析
1-4-1 数据库和表

CREATE TABLE `user` (
`id` INT(11) NOT NULL AUTO_INCREMENT,
`username` VARCHAR(20) DEFAULT NULL,
`password` VARCHAR(20) DEFAULT NULL,
`email` VARCHAR(20) DEFAULT NULL,
`name` VARCHAR(20) DEFAULT NULL,
`sex` VARCHAR(10) DEFAULT NULL,
`birthday` DATE DEFAULT NULL,
`hobby` VARCHAR(50) DEFAULT NULL,
PRIMARY KEY (`id`)
) ENGINE=INNODB AUTO_INCREMENT=6 DEFAULT CHARSET=utf8;
INSERT INTO `user`(`id`,`username`,`password`,`email`,`name`,`sex`,`birthday`,`hobby`) VALUES (1,'bbb','123','123@163.com','张三','男','1992-01-02','篮球, 足球, 排球'),(2,'ccc','123','ccc@itcast.cn','李四','女','1992-03-20','排球, 乒乓球'),(3,'aaa','123','aaa@itcast.cn','王守义','男','1990-08-11','足球, 排球'),(5,'tom','123','haha@qq.com','提莫','男',NULL,'篮球');

1-4-2 新建项目

导入 jar包工具类配置文件

最低0.47元/天解锁文章

oooola

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
15-Javaweb-ajax 和 jquery

目录一、案例1-使用原生的ajax判断用户名是否占用(了解)1-1 ajax1-2 ajax入门程序1-3 ajax-api详解1-3-1 常用属性1-3-2 常用方法1-4 步骤分析1-4-1 数据库和表1-4-2 新建项目1-4-3 新建一个注册页面表单在用户名文本框上输入用户名失去焦点1-4-4 checkUsername4Ajax1-4-5 在表单接受响应的数据二、案例2-使用jquery的ajax判断用户是否被占用2-1 四种2-1
复制链接

扫一扫