Javaweb学习笔记之Ajax

学习资料：

使用异步方式来实现自动刷新与搜索框自动补全；

异步的语法形式：

$.ajax({
    data://参数数量
    datatype：//预计返回参数类型
    url:// 响应地址
    type：//请求方式（post/get）
    回调函数
    success：function（data）{

}//正确的回应
    error：function（data）{

}//错误的回应
})

$.post（url,data,回调函数）

一.使用jquery及时判断用户名是否可用

<h3>使用jquery及时判断用户名是否可用</h3>
<form action=""&gt;
用户名：
	<input type="text" name="uname"  id="sname"/>
	<span id="a" style="color: red"></span>
	
</form>	

1.$.ajax方式： 

$(function(){
	//给文本框添加失焦事件
	/*  $("#sname").blur(function(){
		$.ajax({
			url:'userServlet',//请求地址（servlet）
			type:'post',//请求方式
			data:{
				sname:$("#sname").val()
			},
			dataType:"text",//预期服务器还回数据类型
			success:function(data){//成功的回调函数
				/* alert(data); 
				$("#a").html(data);
			},
			error:function(error){//失败的回调函数
				console.log(error);
			}
		})
	}); */ 
	

2.$.post方式：

$.post("userServlet",{sname:name},function(data){
		$("#a").html(data);//给span赋值  innerhtml（js）
	})

 二.使用jquery ajax+json实现搜索自动提示:

<h3>使用jquery ajax+json实现搜索自动提示</h3>


搜索：	<input type="text" name="uname"  id="sname"/>
		<div id="aa"></div>

<!-- 引入jquery类库 -->
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<style>
#sname{width: 400px;}
li{list-style: none;}
#aa{border:solid 1px gray;width: 406px}
.xx{background:yellow;cursor:pointer;}
.yy{}
</style>
<script type="text/javascript">

$(function(){
	//给文本框添失焦事件
	$("#sname").keyup(function(){
		$("#aa").show();
		//获取文本框的值
		/* var name=$("#sname").val(); */
	
	//二.$.post()/$.get()
	//把json格式的对象字符串--》js的对象数组
		/* var ss=eval(data); js*/
	/* $.post("autoFill.do",{sname:name},function(data){
		
		var ss=$.parseJSON(data);//jquery
		if(ss.length==0){
			$("#aa").html("无记录");
			return;
		}
		var sb="<ul>";
		
		//循环遍历
		$.each(ss,function(i,u){//下标，元素
			sb+="<li oclick="myf('"+u.sname+"')" onmouseout="this.className='yy'" onmouseover="this.className='xx'">"+u.sname+"</li>";
		})
		sb+="</ul>";
		$("#aa").html(sb);
	}) */
	
	});
	
})
function myf(name){
	//给文本框赋值
	$("#sname").val(name);
	//让div隐藏
	$("#aa").hide(1000);
	
}
</script>

三.自动翻页模糊查。。。。（$.post）

商品名：<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>】

<!--引入jquery  -->
<script type="text/javascript" src="js/jquery-3.3.1.js"></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){
	//map特点：根据属性拿到属性值，根据键拿到值
 	//alert($.type(data));//数据类型String
	//把json格式的字符串解析成js对象/对象数组

 	//	var ss=$.parseJSON(data); 
		//alert($.type(ss));//array
		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.goodls,function(i,g){//下标，元素
			 sb+="<tr>"
			sb+="<td>"+g.gid+"</td>";
			sb+="<td>"+g.gname+"</td>";
			sb+="<td><img src='"+g.gpath+"'/></td>";
			sb+="</tr>"; 
			$("#aa").html(sb);
		})
		sb+="</table>";
		$("#xx").html(pageIndex);
		$("#yy").html(max);
	},"json"); 
} 
</script>

servlet包：PageServlet 

@WebServlet("/page.do")
public class PageServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
  
	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		doPost(req, resp);
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		//设置编码方式
		req.setCharacterEncoding("utf-8");
		resp.setContentType("text/html;charset=UTF-8");
		PrintWriter out = resp.getWriter();
		int pageIndex=1;
		int pageSize=5;
		String gname = req.getParameter("gname");
		if(gname==null) {
			gname="";
		}
		//servlet调用biz层
		
		IGoodsBiz igb=new GoodsBiz();
		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 List 定义一个map集合:Map集合：存储数据，通常存储一对
		Map<String, Object> mym=new HashMap<String,Object>();
		mym.put("goodls", ls);
		mym.put("pageMax", max);
		//
		String str = JSON.toJSONString(mym);
	
		
		//把响应	输送到客户端
		out.write(str);
		out.flush();
		out.close();
	}

}

代码007普通

打赏 收藏 海报 链接