web专题 JSON +AJAX介绍及使用 +ajax序列化 + 写法案例

最新推荐文章于 2024-08-30 12:59:36 发布

极光雨雨

最新推荐文章于 2024-08-30 12:59:36 发布

阅读量209

点赞数

分类专栏： # Web基础入门文章标签： ajax json

本文链接：https://blog.csdn.net/weixin_44131922/article/details/108303579

版权

Web基础入门专栏收录该内容

17 篇文章 0 订阅

订阅专栏

JSON

定义：(javascript object notation ) 翻译为JS对象简谱。
js的一个对象表示方式
在这里插入图片描述
JSON并不是一种技术，是一种数据格式

格式
{“name”:”value”,”name2”:”value2”}
（注意此处标点符号全为英文格式）

要求：
属性名必须加双引号，属性值如果是字符串也必须加双引号，数字和boolean可以不加

{} 用大括号代表对象，用中括号 [] 表示数组

案例

<script>
		//js中对象表示1
		var  p1=new Object();
		p1.name="admin";
		p1.age=23;
		p1.sex="男";
//		alert(p1.age+p1.name);
		//alert(p1["name"]);
		//js对象2
		
		//、json要求属性名必须加双引号
		var p3="{\"name\":\"张三\",\"age\":23,\"sex\":\"女\"}"
		
		//alert(p3)
	</script>

转换

var p3="{\"name\":\"张三\",\"age\":23,\"sex\":\"女\"}";
			//将字符串转为js对象
			var obj=JSON.parse(p3);
			
			//alert(obj.name+"=="+obj["name"])
			
			var  obj2={name:"张三",age:39,score:[20,33,45,50,90]};
			//js对象转为字符串
			//alert(JSON.stringify(obj2));

遍历

var  p2={name:"李四",age:28,sex:"女"};
		//alert(p2["name"]+p2["age"])
		//alert(p2.name)
		
		for(var key  in p2){
			alert(key+"==="+p2[key]);
		}

JSON案例，省市级联

省:<select id="pro"></select>
		市:<select id="citySelect"></select>
		<script>
			var data={"河南":["郑州","新乡","驻马店"],"山东":["济南","泰山","青岛"],"安徽":["合肥","巢湖","马鞍山"]};
			var  option="";
			for(var  key  in data){
				option+="<option value='"+key+"'>"+key+"</option>";
			}
			pro.innerHTML=option;
			
			pro.onchange=function(){
				var city=data[this.value];
//				alert(city)
				var o="";
	  			for(var i=0;i<city.length;i++){
	  				o+="<option value='"+city[i]+"'>"+city[i]+"</option>";
	  			}
  				citySelect.innerHTML=o;
			}
		</script>

Java中处理JSON

三个jar包导入项目工程

Fastjson.jar
Gson.jar
Jackson.jar

三个都可以解析JSON

个人实践证明：jackson最稳定，最方便，所以我在spring里面依赖jackson

Java对象转为json字符串

	@Test	
public void test1() throws JsonProcessingException {
	UserInfo u=new UserInfo("张三","123456");
	System.out.println(u);
	ObjectMapper  om=new ObjectMapper();
	//将java对象转为json格式的字符串
	String str = om.writeValueAsString(u);
	System.out.println(str);
	
	List<UserInfo> list=new ArrayList<UserInfo>();
	list.add(new UserInfo("admin1", "1231"));
	list.add(new UserInfo("admin2", "1232"));
	list.add(new UserInfo("admin3", "1233"));
	list.add(new UserInfo("admin4", "1234"));
	//将java集合对象转为json格式的字符串
	String s2=om.writeValueAsString(list);
	System.out.println(s2);
}

将字符串转为对象

@Test
	public void test2() throws JsonParseException, JsonMappingException, IOException {
		
		String  s1="{\"name\":\"张三\",\"psw\":\"123456\"}";
		String s2="[{\"name\":\"admin1\",\"psw\":\"1231\"},{\"name\":\"admin2\",\"psw\":\"1232\"},{\"name\":\"admin3\",\"psw\":\"1233\"},{\"name\":\"admin4\",\"psw\":\"1234\"}]";
		
		ObjectMapper om=new ObjectMapper();
		//將json格式的字符串转为对象
		UserInfo u = om.readValue(s1, UserInfo.class);
		System.out.println(u.getName()+"="+u.getPsw());
		//将json格式的字符串转为java集合
		List<UserInfo> list=om.readValue(s2, new TypeReference<List<UserInfo>>() {});
		for(UserInfo user:list) {
			System.out.println(user.getName()+"=="+user.getPsw());
		}
	}

ajax

Asynchronous Javascript And XML
异步 JavaScript 和 XML

Ajax：
实现不刷新整个网页，来异步刷新局部页面的一个技术

JS原生ajax

1.创建xmlHttpRequest对象，核心
2.open打开请求
3.Send 发送请求
4.通过核心对象接收返回数据
在这里插入图片描述

jQuery-ajax 写法

$.ajax({
				type:"get",  
				url:"test",
				async:true,//是否异步
				dataType:"",
                data:{},
				success:function(data){//请求成功的回调函数
					
				},
				error:function(){//服务器内部出错
					
				}
			});

顺序没有要求
type: 请求方式
url: 请求路径
async: 是否异步请求

dataType: 返回数据的格式
– text: 文本
– json: 返回的是json格式数据
– xml:返回xml格式
– Html：
– Jsonp: 跨域请求返回json

data: 请求数据
Success:请求成功的回调函数
Error：服务器出错的回调函数

一个不太规范的案例
前端JSP里面

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
	String path=request.getContextPath();
    String basePath=request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>    
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-3.3.1.min.js" ></script>
<script>
	$(function(){
		$("#btn").click(function(){
			$.ajax({
				type:"get",  
				url:"test",//请求路径
				async:true,//是否异步
				dataType:"json",//后台返回的数据格式
				data:{name:"chicken","psw":"123456"},//请求数据
				success:function(dd){//请求成功的回调函数
					//var obj=JSON.parse(dd);  type为text时，返回的是文本
					alert(dd.name+"--"+dd.psw)
				},
				error:function(){//服务器内部出错
					alert("服务器内部出错");
				}
			});
			
		})
	})
</script>
</head>
<body>
<div id="con"></div>
<div>
	<button id="btn">显示</button>
</div>
</body>
</html>

后台很基础的接收数据方法，实际书写时，只参考处理数据的代码，其他写法可以忽略

@WebServlet("/test")
public class TestServlet extends HttpServlet{
@Override
protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
	// TODO Auto-generated method stub
	String n=req.getParameter("name");
	String p=req.getParameter("psw");
	System.out.println("name==="+n+"psw==="+p);
	//System.out.println(1/0);
	resp.setContentType("text/html;charset=utf-8");
//	resp.getWriter().print("鸡，你太美");
	UserInfo u=new UserInfo("chicken", "你太美");
	ObjectMapper om=new ObjectMapper();
	String str=om.writeValueAsString(u);
	resp.getWriter().print(str);
}
}

jQuery-ajax - 简易写法

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

$(function(){
		$("#btn").click(function(){
			$.post("test",{name:"鸡"},function(d){
				alert(d.name+"--"+d.psw);
			},"json");
		});
	});

ajax同步异步默认为true，如果想设ajax的同步异步

------------------顺序发送请求

	<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
	$(function(){
		$("#btn").click(function(){
			$.ajax({
				url:"test",
				dataType:"json",
				type:"post",
				async:false,//同步
				success:function(d){
					alert(d.name+"--"+d.psw+"1");
				}
			});
			$.ajax({
				url:"test",
				dataType:"json",
				type:"post",
				async:false,
				success:function(d){
					alert(d.name+"--"+d.psw+"2");
				}
			});
			$.ajax({
				url:"test",
				dataType:"json",
				type:"post",
				async:false,
				success:function(d){
					alert(d.name+"--"+d.psw+"3");
				}
			});
			$.ajax({
				url:"test",
				dataType:"json",
				type:"post",
				async:false,
				success:function(d){
					alert(d.name+"--"+d.psw+"4");
				}
			});
			
		});
	})
</script>

Ajax 序列化表单

//使用   .serialize()方法

//让表单提交
			$("#btn").click(function(){
				//alert($("#fim").serialize());
				$.ajax({
					url:"regist",
					type:"get",
				    data:$("#fim").serialize(),
				    success:function(data){
				    	alert(data);
				    }
				});
				
			});

极光雨雨

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
web专题 JSON +AJAX介绍及使用 +ajax序列化 + 写法案例

JSON定义：(javascript object notation ) 翻译为JS对象简谱。js的一个对象表示方式JSON并不是一种技术，是一种数据格式格式{“name”:”value”,”name2”:”value2”}（注意此处标点符号全为英文格式）要求：属性名必须加双引号，属性值如果是字符串也必须加双引号，数字和boolean可以不加{} 用大括号代表对象，用中括号 [] 表示数组案例<script> //js中对象表示1 var p1=n
复制链接

扫一扫

专栏目录