javaweb(ajax+json实现自动补全&&ajax实现分页)

最新推荐文章于 2022-08-21 16:41:54 发布

习惯过了头121

最新推荐文章于 2022-08-21 16:41:54 发布

阅读量1.6k

点赞数

分类专栏： JAVA 文章标签： ajax json jquery

本文链接：https://blog.csdn.net/m0_68332494/article/details/124492679

版权

JAVA 专栏收录该内容

17 篇文章 1 订阅

订阅专栏

1使用jQuery的ajax判断用户名是否存在（$.ajax/$.post）

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

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

$.ajax()常用参数与说明

一、$.ajax()

url:请求地址
data:请求参数 "name="+sname+"&pwd="+spwd {name:sname,pwd:spwd}
type:post/get 请求方式
dataType:预计服务器可能返回的数据类型 text/json
success:成功的回调函数
error:失败的回调函数

二、$.post/get()

$.post(url,data,function(){});

对象：

{
键:值,
键:值

"uname":"大炮1",
"uage":18
}

字符串数组：["aa","bb","cc"]

对象数组：[{},{},{}]

工具：集合--->json格式的String

fastjson

JSON.toJSONString();

json格式的字符串解析成一个对象/对象数组
1.js的方式 eval()
2.jQuery的方式 $.parseJSON()

ajax+json实现自动补全以及分页代码例子：

index.jsp界面

<%@ 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>Insert title here</title>
<!-- 引入jQuery的类库 -->
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<!-- 另起一个script块 -->
<script type="text/javascript">
   $(function(){
	   //默认显示第一页
	   myf('a');
   })
  //专门控制分页
  var pageIndex;
   var max;
  function myf(type){
	  //拿到文本框的值
	  var gname=$("#gname").val();
	   if(type=='a'){
		   //首页
		   pageIndex=1;
	   }else if(type=='b'){
		   //上一页
		   if(pageIndex>1){
			   pageIndex--;
		   }
		   else{
			   alert("已经是第一页了");
		   }
	   }
	   else if(type=='c'){
		   //下一页
		   if(pageIndex<max){
			   pageIndex++;
		   }
		   else{
			   alert("已经是末页了");
		   }
		  
	   }
	   else{
		   //末页
		   pageIndex=max;
	   }
	   
	   $.post("page.do",{pid:pageIndex,gname:gname},function(data){
		 //根据属性拿到属性值  根据键拿到值
		   // alert($.type(data.pageMax));max  //数据类型 string
		 // alert(data.goodsList); 集合
		   //将json格式的字符串解析成js的对象/对象数组
		  // var ss=$.parseJSON(data);
		   //alert($.type(ss));//array
		   //alert($.type(data));
		   max=data.pageMax;
		   var sb=" <table border=\"1px\" width=\"50%\">";
		   sb+="<tr align=\"center\">";
		   sb+="<td>商品序号</td>";
		   sb+="<td>商品名称</td>";
		   sb+="<td>商品图片</td>";
		   sb+="</tr>";
		   $.each(data.goodsList,function(i,g){//下标，元素
			   sb+="<tr>";
			   sb+="<td>"+g.gid+"</td>";
			   sb+="<td>"+g.gname+"</td>";
			   sb+="<td><img src='"+g.gpath+"'/></td>";
			   sb+="</tr>";
			   
		   })
		   sb+="</table>";
		   //给div赋值
		   $("#aa").html(sb); 
		   //赋值当前页码&最大页码
		   $("#xx").html(pageIndex);
		   $("#yy").html(max);
	   },"json");
   }
   
</script>
</head>
<body>
    <center>
     <img src="images/1.jpg"/>
        <div>
          商品名:<input type="text" id="gname"/>
         <input type="button" value="查询" onclick="myf('a')">  
        </div>
        <div id="aa"></div>
        <div>
          <a href="javascript:myf('a')">首页</a>
          <a href="javascript:myf('b')">上一页</a>
          <a href="javascript:myf('c')">下一页</a>
          <a href="javascript:myf('d')">末页</a>
                   【<span id="xx"></span>/<span id="yy"></span>】
        </div>
       
    </center>
</body>
</html>

package com.zking.servlet;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

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.biz.GoodsBiz;
import com.zking.biz.IGoodsBiz;
import com.zking.entity.goods;

@WebServlet("/page.do")
public class PageServlet extends HttpServlet{

	private List<goods> ls;
	
	@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();
		
		int pageIndex=1;
		int pageSize=5;
		//servlet调用biz层
		IGoodsBiz igb=new GoodsBiz();
		//接收模糊查询关键字
		String gname=req.getParameter("gname");
		if(gname==null) {
			gname="";//相当于查询所有
		}
		//获取最大页码
	int max=igb.getMax("goods where gname like '%"+gname+"%'", pageSize);
	
		//接收pid
		String pid=req.getParameter("pid");
		if(pid!=null) {
			pageIndex=Integer.parseInt(pid);//改变页码
		}
	List<goods> ls=igb.getAllByPage(pageIndex, pageSize,gname);
		
	//定义一个map集合
	Map<String, Object> mym=new HashMap<String,Object>();
	//存元素
	mym.put("goodsList", ls);
	mym.put("pageMax", max);
	
	//利用工具将map集合--》json格式的对象字符串
		String str=JSON.toJSONString(mym);
		
	
	//把响应输送到客户端=页面
	out.write(str+"*"+max);
	out.flush();
	out.close();	
	}
	
	
	
	
	
	
	
	
	
	
}