javaWeb_16(Ajax+json实现自动补齐)

最新推荐文章于 2024-09-15 19:46:31 发布

怣795

最新推荐文章于 2024-09-15 19:46:31 发布

阅读量1.3k

点赞数

文章标签： java

本文链接：https://blog.csdn.net/qq_65716482/article/details/124459915

版权

一、为什么使用Ajax

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

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

二、什么是Ajax?

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

1、JavaScript：更新局部的网页

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

3、XMLHttpRequest对象：发送请求到服务器并获得返回结果

4、CSS：美化页面样式异步：发送请求后不等返回结果，由回调函数处理结果

jQuery.ajax(url,[settings])

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

一、$.ajax() ：

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

jQuery.post(url, [data], [callback], [type])

1、通过远程 HTTP POST 请求载入信息。

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

一、$.post()

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

关于json:

1.将集合变成字符串
String str=JSON.toJSONString(ls); //ls为集合

2.将字符串变成集合
--使用js的eval()方法
--使用jQuery的$.parseJSON()

代码如下：

Servlet包:

package com.zking.servlet;

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("/vname.do")
public class VNameServlet 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();
		//接收客户端传递过来的参数
		String name = req.getParameter("sname");
		//调用biz层判断name是否存在
		//select * from 用户名 where uname=? 建议返回boolean
		//假设法： 假设数据表中存在admin这个用户了
	    String str="该用户名可用";//可用
		if("admin".equals(name)) {
			str="该用户名已存在";//已存在
		}
		//由于需要局部刷新 不可用转发 重定向 location.href
		//把响应输送到客户端
		out.write(str);//写
		out.flush();//刷新
		out.close();//关闭
		
	}
	
	
}

package com.zking.servlet;

import java.io.IOException;
import java.io.PrintWriter;
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.alibaba.fastjson.JSON;
import com.zking.dao.UserDao;
import com.zking.entity.User;

@WebServlet("/autoFill.do")
public class AutoFillServlet 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();
		//接收客户端传递过来的参数
		String name = req.getParameter("sname");
		
		//调用biz层的模糊查询的方法
		//错误示范 模拟数据
		UserDao ud=new UserDao();
		List<User> ls=ud.getAll(name);
		//怎么把集合-->json字符串
		/**
		 * 模拟json格式:边遍历边拼接
		 * 表示对象：{"uname":"哈哈0","usex":"男","uage":19}
		 * 表示数据：[]
		 * 表示对象数据：[{"uname":"哈哈0","usex":"男","uage":19},{"uname":"哈哈1","usex":"男","uage":20}]
		 * 
		 */
		
		/*StringBuffer sb=new StringBuffer();
		sb.append("[");
		for (User u : ls) {
			sb.append("{");
			sb.append("\"uname\":\""+u.getUname()+"\",");
			sb.append("\"usex\":\""+u.getUsex()+"\",");
			sb.append("\"uage\":"+u.getUage());
			sb.append("},");
		}
		sb.append("]");*/
		
		//将集合解析成字符串
		String str = JSON.toJSONString(ls);
		
		//由于需要局部刷新 不可用转发 重定向 location.href
		//把响应输送到客户端
		out.write(str);//写
		out.flush();//刷新
		out.close();//关闭
		
	}
	
	
}

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>
<style type="text/css">
   #sname{width:400px;}
   li{list-style: none;}
   #aa{border: solid 1px gray; width: 406px;}
   .xx{background-color: red; cursor: pointer;}
   .yy{}
</style>
<!-- 引入jQuery的类库 -->
<script type="text/javascript" src="js/jquery-3.3.1.js" ></script>
<!-- 另起一个script  -->
<script type="text/javascript">
      //页面的载入函数
      $(function() {
    	//让div隐藏
    	  $("#aa").hide();
    	//给文本框添加键盘事件
    	$("#sname").keyup(function() {
    		//让div显示
    		$("#aa").show();
			//获取文本框的值
			var name=$("#sname").val();
			//二、$.post() / $.get()  url,data,success,[dataType]
			$.post("autoFill.do",{sname:name},function(data){
				//把json格式的对象数组字符串-->js的对象数组
				//var ss= eval(data);//js
				var ss= $.parseJSON(data);//jQuery
				if(ss.length==0){
					$("#aa").html("无记录");
					return;
				}
				var sb="<ul>";
				//循环遍历
				$.each(ss,function(i,u){//下标，元素
					sb+="<li onclick=\"myf('"+u.uname+"')\" onmouseout=\"this.className='yy'\" onmouseover=\"this.className='xx'\">"+u.uname+"</li>";
				})
				sb+="</ul>";
				//给div赋值
				$("#aa").html(sb);
			})
		});
	})
      
      function myf(name){
    	  //给文本框赋值
    	  $("#sname").val(name);
    	  //让div隐藏
    	  $("#aa").hide();
      }
</script>
</head>
<body>
     <h2>使用jQuery的ajax+json实现搜索自动提示功能</h2>
        <input type="text" id="sname" />
        <div id="aa"></div>
</body>
</html>

<%@ 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>
<!-- 引入jQuery的类库 -->
<script type="text/javascript" src="js/jquery-3.3.1.js" ></script>
<!-- 另起一个script  -->
<script type="text/javascript">
      //页面的载入函数
      $(function() {
    	//给文本框添加失焦事件
    	$("#sname").blur(function() {
			//获取文本框的值
			var name=$("#sname").val();
		   /*//一、$.ajax()
			$.ajax({
				url:"vname.do",//请求地址(servlet)
				data:{sname:name}, //"sname="+name+"&spwd="+pwd //请求参数
				type:"post",//请求方式
				dataType:"text",//预期服务器可能返回的数据类型
				success:function(data){//成功的回调函数
					//alert(data);//data是服务器返回的响应
					$("#aa").html(data);//给span赋值 innerHTML
					
				},
				error:function(){//失败的回调函数
					alert("有误");
				}
			}); */
			//二、$.post() / $.get()  url,data,success,[dataType]
			$.post("vname.do",{sname:name},function(data){
				$("#aa").html(data);//给span赋值 innerHTML
			})
		});
    	  
	})
</script>
</head>
<body>
     <h2>使用jQuery的ajax即时判断用户名是否可用</h2>
     <form >
        <input type="text" id="sname" /><span style="color: red" id="aa"></span>
     </form>
     <hr>
     <input>
</body>
</html>