Ajax与json

最新推荐文章于 2023-07-17 15:01:55 发布
最新推荐文章于 2023-07-17 15:01:55 发布
阅读量1.7k 收藏 11
点赞数 5
分类专栏： java 前端 Ajax 文章标签： ajax json javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_66939060/article/details/124487519
版权
java 同时被 3 个专栏收录
26 篇文章 0 订阅
订阅专栏
前端
25 篇文章 0 订阅
订阅专栏
Ajax
1 篇文章 0 订阅
订阅专栏

目录

1.Ajax 

2.json

3.Ajax+json

一、神奇的Ajax

1.要用Ajax先来了解为什么使用Ajax?

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

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

2.那Ajax是什么？

Ajax:一种只刷新局部页面的技术

 Ajax中有几个方法：今天我们最要就说两个：1.$.ajax()  2.$.post()

$.ajax():通过HTTP请求加载远程数据

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

 二、json

json的话由于有很多种，今天我们就说一种（fastjson）

使用这个架包非常简单只需一下步骤：

1.导入jar包

2.使用以下方法：

                        String str=JSON.toJSONString(ls); //ls为集合 

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

使用之后即可成为标准的json格式

下面我们将分别用几个案例将上面说的演示给大家看：

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

案例2：利用ajax+json实现【自动补全】功能

案例3:无刷新实现分页

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

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() {
		//给文本框添加失焦事件 
		$("#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>

IndexServlet页面

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

即可实现即时判断：默认已存在admin用户


 

 

 2：利用ajax+json实现【自动补全】功能

servlet

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:yellow;cursor:pointer;}
	.yy{}
</style>
<!-- 引入jQuery的类库 -->
<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("autoFill.do",{sname:name},functiondata){
				//吧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+="</ul>";
					//给div赋值
					$("#aa").html(sb);*/
				})
				
			})
			
		})
	})
	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>

效果图：

 3:无刷新实现分页

主页面：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">
<script src="bootstrap-3.3.7-dist/js/jquery-3.5.1.js"></script>
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>
<meta name="viewport" content="width=device-width,initial-scale=1">
<style>
body {
	padding: 20px 40px;
}
</style>
<script type="text/javascript">
$(function(){
	myf(1);
})
var pageIndex;
var max;
var name;
function myf(type){
	name=$("#bb").val();
	if(type==1){
		pageIndex=1;
	}else if(type==2){
		//上一页
		if(pageIndex>1){
			pageIndex--;
		}else{
			alert("前面没有了哦");
		}
	}else if(type==3){
		//下一页
		if(pageIndex<max){
			pageIndex++;
		}else{
			alert("已经是最后一页");
		}
	}else{
		//末页
		pageIndex=max;
	}
	$.post("index.do",{pid:pageIndex,pname:name},function(data){
		var x=data.split("*");//分割
		var ss=$.parseJSON(x[0]);//商品信息
		max=parseInt(x[1]);//最大页数
		var sb="<table class='table table-bordered table-striped'><tr><th>商品编号</th><th>商品名称</th><th>商品描述</th><th>商品价格</th><th>商品操作</th></th>";
		$.each(ss,function(i,g){
			sb+="<tr>";
			sb+="<td>"+g.id+"</td>";
			sb+="<td>"+g.name+"</td>";
			sb+="<td>"+g.describe+"</td>";
			sb+="<td>"+g.price+"</td>";
			sb+="<td><a href='addCar.do?id="+g.id+"' class='btn btn-default'>加入🚗</a></td>";
			sb+="</tr>";
		})
		sb+="</table>";
		$("#aa").html(sb);
		$("#xx").html(pageIndex);
		$("#yy").html(max);
	})
}
function mys(type){
	$("#bb").val("");
	myf(type);
}
</script>
</head>
<body>
	<h1>
		您好${user.username }, <small>这是首页</small>
	</h1>
	<h1>
		<a href="car.jsp" class="btn btn-primary">点我去购物车🛒</a>
	</h1>
	<div>
	商品名称:<input type="text" id="bb">
	<button onclick="myf('1')">查询</button>
	<button onclick="mys('1')">查询全部</button>
	</div>
	<div id="aa"></div>	
	当前【<span id="xx"></span>/<span id="yy"></span>】
	<a href="javascript:myf(1)">首页</a>
	<a href="javascript:myf(2)">上一页</a>
	<a href="javascript:myf(3)">下一页</a>
	<a href="javascript:myf(4)">末页</a>
</body>
</html>

servlet层

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.Biz.GoodsBiz;
import com.zking.Biz.IGoodsBiz;
import com.zking.entity.Goods;
/**
 * 为首页提供数据
 * @author zjjt
 *
 */
@WebServlet("/index.do")
public class IndexServlet extends HttpServlet{
	private IGoodsBiz goodsBiz=new GoodsBiz();
	@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 {
		String pid=req.getParameter("pid");
		String pname=req.getParameter("pname");
		if(pname==null) {
			pname="";
		}
		int pageIndex=1;
		int PageSize=3;
		PrintWriter out = resp.getWriter();
		if(pid!=null) {
			pageIndex=Integer.parseInt(pid);
		}
		//把变量放到另外一个页面 Session Appliaction request
		List<Goods> ls=goodsBiz.getAll(pageIndex, PageSize,pname);
		String str=JSON.toJSONString(ls);
		int max=goodsBiz.getRows("car_goods where name like '%"+pname+"%'",PageSize);
		out.print(str+"*"+max+"*"+pname);
		out.flush();
		out.close();
		
	}
}

即可实现无刷新分页；

效果图

 

 

 

 好啦，今天的内容就到这里，下期再见！！！

黩817
关注
  • 5
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ajax与json实现级联
04-24
在本主题中，“ajax与json实现城市动态级联”指的是利用AJAX和JSON来创建一个动态的、联动的城市选择菜单，这种功能常见于地址输入或者地理位置相关的应用中。 首先，我们来理解AJAX的工作原理。AJAX通过...
AJAX和JSON详解
write less , do more
05-08 1万+
AJAX和JSON详解
使用Ajax请求Json
tianxingege_的博客
07-12 2266
第一种方法 //创建请求对象 var request = new XMLHttpRequest(); //配置请求参数，请求方式，请求地址 request.open("get", "..js/aap.json", true); //请求处理函数 request.onreadystatechange = function() { if (request.readyState == 4
JSON与Ajax
小yu别错过的博客
09-23 941
JSON(JavaScript Object Notation, JS 对象标记) 是一种轻量级的数据交换格式。它基于 ECMAScript (W3C制定的JS规范)的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。同步和异步是建立在客户端和服务器端相互通信的基础上同步：客户端必须等待服务器端的响应，在等待的期间客户端不能做其它的操作。
AJAX和JSON
weixin_65824274的博客
04-28 1111
AJAX（ASynchronous JavaScript And XML）异步的JavaScript 和 XML；由Jesse James Garrett 在他的文章AJAX：A New Approoch to Web Applications中首次提出。ajax（Web数据交互方式）_百度百科使用XHTML+CSS 来看表示信息。使用 JavaScript 操作 D OM 进行动态显示及交互。使用 XML 和 XSLT 进行数据交互及相关操作。
$.ajax()方法从服务器获取json数据几种方式详解
热门推荐
Sun9528的博客
06-10 7万+
对$.ajax()方法从服务器获取json数据的几种方式进行详解
ajax与json
05-23
**Ajax与JSON的结合** 在Ajax中，JSON是一种常见的数据传输格式。由于其简洁性和易读性，JSON成为Ajax通信中的首选数据格式。当使用Ajax请求数据时，服务器端可以生成JSON格式的响应，然后JavaScript可以轻松地解析...
Ajax与JSON的一些总结
01-31
虽然名字中包含XML，但Ajax通讯与数据格式无关，所以我们的数据格式可以是XML或JSON等格式。XMLHttpRequest对象用于在后台与服务器交换数据，具体作用如下：XMLHttpRequest是一个JavaScript对象，它是由微软设计，...
Ajax与JSON的一些学习总结
10-27
Ajax技术的核心是XMLHttpRequest对象（简称XHR），可以通过使用XHR对象获取到服务器的数据，然后再通过DOM将数据插入到页面...虽然名字中包含XML，但Ajax通讯与数据格式无关，所以我们的数据格式可以是XML或JSON等格式
ajax与json 获取数据并在前台使用简单实例
11-26
用ajax获取后台数据，返回json数据，怎么在前台使用呢？ 后台 if (dataType == "SearchCustomer") { int ID; if (Int32.TryParse(CustomerID, out ID)) { string s = GridComputer.GridCustomer.getCustomer(1...
Ajax和JSON的基本用法
m0_52226803的博客
03-09 677
会将原来的页面销毁掉，重新生成另一张页面，但是在原来的页面中有不需要刷新的页面，我们想要的效果只是小部分区域进行显示刷新出来的内容，这时就要用到Ajax。结果：当send执行没有结束，没有收到响应，不会执行console.log("请求已经发送");解决：中途导入的jar包和依赖没有被out出来，最后允许的目录在Out,如果jar添加了，out没有，那么此时需要手动添加。注意：ajax请求返回的不再与展现相关，而是纯纯的数据，浏览器接受后要考虑如何展示。解决：tomcat选择的时候选错了。
1. AJAX： 2. JSON
羽扬 -- YYDCYY
09-16 317
内容 1. AJAX： 2. JSON AJAX： 1. 概念： ASynchronous JavaScript And XML 异步的JavaScript 和 XML 1. 异步和同步：客户端和服务器端相互通信的基础上 * 客户端必须等待服务器端的响应。在等待的期间客户端不能做其他操作。 * 客户端不需要等待服务器端的响应。在服务器处理请求的过程中，客户端可以进行其他的操作。 ...
AJAX异步请求&JSON数据格式
最新发布
weixin_58545784的博客
07-17 3259
Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。 通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。 传统的网页（不使用 Ajax）如果需要更新内容，必须重载整个网页页面。 JSON是一种轻量级的数据交换格式。 易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效益。
使用 $.ajax 发送json数据示例代码（GET、POST区别）
zcc的博客
04-30 9674
一、GET、POST请求区别： 1、GET请求的数据会附在URL之后（就是把数据放置在HTTP协议头中），以?分割URL和传输数据，参数之间以&相连，如：login.action?name=hyddd&password=idontknow&verify=%E4%BD%A0%E5%A5%BD。如果数据是英文字母/数字，原样发送，如果是空格，转换为+，如果是中文/其他字符，则直接把字符串用BASE64加密，得出如：%E4%BD%A0%E5%A5%BD，其中％XX中的XX为该符号以16进
Ajax和Json
m0_62063669的博客
08-02 932
Asynchronous(异步)JavascriptAndXML简称AJAX，它不是一种新技术，只是老技术[js]采用新用法[引用了XMLHttpRequest对象]。Json语法规则(Json语法是JavaScript对象表示语法的子集) 数据在名称/值对中 数据由逗号分隔 花括号保存对象 方括号保存数组 Json名称/值对 Json数据格式为：名称/值对，"firstName":"John" 相
JSON和AJAX
qq_57533658的博客
03-24 580
json和ajax请求
Ajax请求json
慕北丶
03-30 5895
文章目录将JSON数据显示到页面查询一个雇员信息取得List集合数据异步请求Map集合数据 将JSON数据显示到页面 发送异步请求，取得json数据，服务器端将json数据返回给js的回调函数之后，可以在回调函数中输出，但是最终目的不是仅仅将数据输出，而是要将这些json数据显示到页面，此时就需要借助js对dom的操作功能将数据生成到HTML页面了 查询一个雇员信息 emp.jsp <%@ ...
Ajax与JSON技术详解：XMLHttpRequest对象的使用与跨域
"Ajax与JSON的一些总结" Ajax技术是Web开发中的一个重要组成部分，它允许网页在无需刷新整个页面的情况下与服务器进行交互，提升了用户体验。Ajax的核心是XMLHttpRequest对象，这个JavaScript对象能够在后台与...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值