jQuery ajax(自动补全)

zt--

已于 2022-04-04 15:51:10 修改

阅读量985

点赞数 2

文章标签： jquery ajax

于 2022-04-04 15:33:33 首次发布

本文链接：https://blog.csdn.net/m0_67514201/article/details/123953053

版权

1.什么是AJAX？

Ajax：只刷新局部页面的技术

JavaScript ：更新局部的网页

XML ：一般用于请求数据和响应数据的封装

XMLHttpRequest对象：发送请求到服务器并获得返回结果, Ajax 技术的核心

CSS ：美化页面样式

异步 ：发送请求后 不等 返回结果，由回调函数处理结果

2,,为什么使用Ajax

无刷新：不刷新整个页面，只刷新局部

无刷新的好处：只更新部分页面，有效利用带宽，提高用户体验

3,方法

通过 HTTP 请求加载远程数据。

一、 $.ajax()

常用参数	说明
url	一个用来包含发送请求的URL字符串(请求地址)
type	请求方式 (“POST” 或 “GET“[默认])
data	发送到服务器的数据(参数)
dataType	预期服务器返回的数据类型(xml、json、text)
success(data)	请求成功的回调函数
error	请求失败的回调函数

通过远程 HTTP POST 请求载入信息。这是一个简单的 POST 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数，请使用 $.ajax。

一、$.post()

常用参数	说明
url	一个用来包含发送请求的URL字符串(请求地址)
data	发送到服务器的数据(参数) key/value
success(data)	请求成功的回调函数
type	返回内容格式(xml、json、text等

4,代码演示

导入jar包和js库

Servlet层编写

@SuppressWarnings("all")
@WebServlet("/userServlet")
public class UserServlet extends HttpServlet{
	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		doPost(req, resp);
	}
	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		//设置编码
		req.setCharacterEncoding("utf-8");
		resp.setContentType("text/html;charset=utf-8");
		
		//获取out对象
		PrintWriter out = resp.getWriter();

//方法一：
		
//		//获取前端提交的参数name
//		String name = req.getParameter("name");
//		
//		//默认返回给前端的提示语句
//		String str = "该账号可以注册!!!";
//		
//		//除了admin其他的都可以注册
//		if(null !=name && !"".equals(name)) {
//			if("admin".equals(name)) {
//				str="该账号已经存在，请更换";
//			}
//		}
//		
//		//将响应新消息输出/响应到前端
//		out.write(str);
//		out.flush();
//		out.close();

//方法二；
		
		//获取模糊查询的关键字
		String  name = req.getParameter("ta");
		//调用模糊查询方法
		UserDao ud = new UserDao();
		List<User> listUser = ud.query(name);
		
		//后台能不能把集合listUser返回给前端
		//把集合listUser转换成前台和后台都识别的数据格式，JSON（键值对形式存储数据）
		String data = JSON.toJSONString(listUser);
		//把json字符串data返回给前端
		out.write(data);
		out.flush();
		out.close();
		
	}
}

ajax实现无刷新验证(注册时账号是否存在)

<!-- 引入jquery库 -->
<script type="text/javascript" src="${pageContext.request.contextPath }/static/js/jquery-3.3.1.js"></script>
<script type="text/javascript">
	/*验证用户名是否已经存在  */
	$(function(){
		
		//给账号文本框添加失去焦点事件
		$("#name").blur(function(){
			//1,获取用户名
			var name = $("#name").val();
			//2,想后台起ajax请求
			//方法一
			$.post('${pageContext.request.contextPath}/userServlet',{
				name:name
			},function(str){
				 $("#sname").text(str);
			
			},'text');/*后台返回到前端的数据是text格式  */ 
			
			
            //方法二

            $.post('${pageContext.request.contextPath}/userServlet',{
				name:name
			},function(str){
				 $("#sname").text(str);
			
			});/*后台返回到前端的数据是text格式  */
			
			//指明了提交方法是get方式，而且前端期望获取的数据类型是json
			$.post('${pageContext.request.contextPath}/userServlet',{
				name:name
			},function(str){
				 $("#sname").text(str);
			
			});/*后台返回到前端的数据是text格式  */
			
             //方法三
			$.ajax({
				url:'请求路径',
				date:'请求参数',
				dataType:'json',//后台返回给前端的数据格式，html/text/json
				async:true,//请求是否异步（默认异步）
				success:function(str){//请求成功
					alert('查询成功')
				},error:function(str){//请求失败
					alert('查询失败')
				}
			})
			
		})
		
	})
</script>
</head>
<body>
	<div>
		账号：<input type ="text" name="name" id="name">
		<span id="sname"></span>
	</div>
	<div>
		密码：<input type="password" name="pwd" id="pwd">
	</div>
	<button>注册</button>
</body>
</html>

用ajax实现搜索自动补全

<!-- 引入jquery库 -->
<script type="text/javascript" src="${pageContext.request.contextPath }/static/js/jquery-3.3.1.js"></script>
<script type="text/javascript">
	$(function(){
		//给文本框添加键盘事件
		$("#ta").keyup(function(){
			//获取文本框的内容
			let ta =$("#ta").val();
			//发ajax请求
			$.post('${pageContext.request.contextPath}/userServlet',{ta:ta},function(date){
				//将后台响应的数据转换成js对象集合
				let us = $.parseJSON(date);
				if(data.length==0){//后台没有查询出数据
					$("#da").hide();//没有数据则隐藏div
					
				}else{
					//否则有数据就显示div
					$("#da").show();
					var sb ="<ul>"
					//遍历集合us
					$.each(us,function(i,u){
						sb +="<li>名字："+u.name+".性别："+u.sex+".年龄"+u.age+"</li>"
					})
					sb+="</ul>";
					//组后把sb赐给div
					$("#da").html(sb); 
				
				}
			});
		})
	})
</script>
</head>
<body>
	<input type="text" id="ta" />
	<button>百度一下</button>
	<hr/>
	<div id="da"></div>
</body>
</html>

zt--

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery ajax(自动补全)

目录1.什么是AJAX？2,,为什么使用Ajax3,方法以及代码演示1.什么是AJAX？ Ajax：只刷新局部页面的技术JavaScript：更新局部的网页XML：一般用于请求数据和响应数据的封装XMLHttpRequest对象：发送请求到服务器并获得返回结果,Ajax技术的核心CSS：美化页面样式异步：发送请求后不等返回结果，由回调函数处理结果2,,为什么使用Ajax无刷新：不刷新整个页面，只刷新局部无刷新的好处：只更...
复制链接

扫一扫