神奇的ajax

最新推荐文章于 2024-08-03 23:12:36 发布

m0_67294268

最新推荐文章于 2024-08-03 23:12:36 发布

阅读量74

点赞数

文章标签： ajax json javascript

本文链接：https://blog.csdn.net/m0_67294268/article/details/124499235

版权

一、神奇的ajax

1、为什么使用ajax

2、什么是ajax

3、 $.ajax()

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

案列：使用jQuery的ajax即时判断用户名是否可用

<%@ 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>
<script type="text/javascript"src="js/jquery-3.3.1.js"></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("有误");
				}
			}); 
			
	 })
</script>
</head>
<body>
		<h2>使用jQuery的ajax即时判断用户名是否可用</h2>
		<form >
		<input type="text" id="sname"><span style="color:red"; id="aa"></span>
		<hr>
		<input>
		</form>
</body>
</html>

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();//关闭
	}
}

4、$.post()

案列:使用jQuery的ajax+json实现搜索自动提升功能

<%@ 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;}
       	.xx{background: yellow; cursor: pointer;}
       	.yy{}
        #aa{border: solid 1px gray;width: 406px;}
</style>
<script type="text/javascript"src="js/jquery-3.3.1.js"></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){
				alert($.type(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); */
			},"json") 
			
		});
	 })
	 
	   function myf(name){
		 //给文本框赋值
		 $("#sname").val(name);
		 //让div隐藏
		 $("#aa").slideUp(500);
	 }
	 
</script>
</head>
<body>
		<h2>使用jQuery的ajax+json实现搜索自动提升功能</h2>
		
		<input type="text" id="sname">
		<div id="aa"></div>
		
</body>
</html>

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();//关闭
	}
}

案列:ajax实现分页

<%@ 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 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(data.pageMax);//数据类型  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="">
		<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{

	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		// TODO Auto-generated method stub
			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=1;
		
		//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.getAllPage(pageIndex, pageSize, gname);
		
		
		//定义一个map集合
		Map<String, Object> mym=new HashMap<String, Object>();
		//存元素
		mym.put("pageMax", max);
		mym.put("goodsList", ls);
		
		//利用工具将集合转为json格式的对象数组字符串
		String str=JSON.toJSONString(mym);
		
		//把响应输送到客户端=页面
		out.write(str);
		out.flush();
		out.close();
		
	}
	
}

m0_67294268

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
神奇的ajax

一、神奇的ajax1、为什么使用ajax2、什么是ajax3、 $.ajax()url:请求地址data:请求参数 "name="+sname+"&pwd="+spwd {name:sname,pwd:spwd}type:post/get 请求方式dataType:预计服务器可能返回的数据类型 text/jsonsuccess:成功的回调函数error:失败的回调函数案列：使用jQuery的ajax即时判断用户名是否可用<%@ pag..
复制链接

扫一扫