JSON和AJAX学习笔记

最新推荐文章于 2023-04-14 11:47:32 发布

小屁孩不努力

最新推荐文章于 2023-04-14 11:47:32 发布

阅读量160

点赞数

文章标签： json ajax 学习

本文链接：https://blog.csdn.net/weixin_46427348/article/details/124624200

版权

什么是JSON

JSON 指的是 JavaScript 对象表示法（JavaScript Object Notation）
JSON 是轻量级的文本数据交换格式
JSON 独立于语言：JSON 使用 Javascript语法来描述数据对象，但是 JSON 仍然独立于语言和平台。JSON 解析器和 JSON 库支持许多不同的编程语言。目前非常多的动态（PHP，JSP，.NET）编程语言都支持JSON。
JSON 具有自我描述性，更易理解

轻量级指的是根xml作比较
数据交换指的是客户端和服务器哦之间业务数据的传递格式

JSON在JavaScript中的使用

jso是由键值对组成，并且由花括号（大括号)包围。每个键由引号引起来，键和值之间使用冒号进行分割，多组键值对之间进行逗号进行分割。

实例

<script type="text/javascript">
     var jsonbj={
       "key":12,
       "key2":"abc",
       "key3":true,
       "key4":[11,"arr",false],
       "key5":{
    	   "key5_1":551,
    	   "key5_2":"value"
       },
      "key6":[{
    	 "key6_11":6611,
    	 "key6_12":"key612value"
      },{
    	  
    	 "key6_21":6621,
     	 "key6_22":"key622value"
      
      }]
     };
  alert(typeof(jsonbj));
  </script>

输出json的类型
可以看到是个对象类型
在这里插入图片描述

json的访问

json本身是一个对象。json中的key我们可以理解为是对象中的一个属性

json中的key访问就跟访问对象的属性值一样： json对象.key

alert(jsonbj.key);

在这里插入图片描述
遍历数组

对象的值

json的两个常用方法

json的存在有两种形式。
一种是，对象掉形式存在，我们叫它json对象
一种是，字符串的形式存在，我们叫它json字符串
这两个可以互相转化
一般我们要操作json中数据的时候,需要json对象的格式。
一般我们要在客户端和服务器之间进行数据交换的时候使用json
JSON.stringify() 把json 对象转换成json字符串
在这里插入图片描述

JSON.parse（）把json字符串转换成为json对象

JSON在java中的使用

1.导入jar包
在这里插入图片描述
1）javaBean和json的互转
toJson（object）方法可以把java对象转换成json字符串
fromJson（str,type.class）

	Person person =new Person(1,"祥哥好帅");
	//创建gson实例
	  Gson gson =new Gson();
	  String json = gson.toJson(person);
	  Person fromJson = gson.fromJson(json, Person.class);
	  System.out.println(json);
	  System.out.println(fromJson);

在这里插入图片描述

2）List和json的互转
若想把json再转回List 则需要新建一个类继承于TypeToken<> 泛型为你要转换成的那个集合

在这里插入图片描述

public static void main(String[] args) {
	

	 List<Person> list  =new ArrayList<>();
	 
	 
	Person person =new Person(1,"祥哥好帅");
	Person person1 =new Person(2,"祥哥好帅啊啊");  
 	 list.add(person);
 	 list.add(person1);
//	 **2）List和json的互转**
	Gson  gson =new Gson();
	 String json = gson.toJson(list);
	List<Person> fromJson = gson.fromJson(json, new PersonListTyoe().getType());
	
	
	 System.out.println(json);
	 System.out.println(fromJson);
	 System.out.println(fromJson.get(0));
//	 **3）map和json的互转**

	
}

3）map和json的互转

在这里插入图片描述

        HashMap<Integer, Person> hashMap = new HashMap<>();
              hashMap.put(1, new Person(1,"我真帅"));
              hashMap.put(2, new Person(2,"我真帅 啊"));
              Gson gson = new Gson();
              String json = gson.toJson(hashMap);
              HashMap<Integer, Person> fromJson = gson.fromJson(json, new PersonListTyoe().getType());
              Person person = fromJson.get(1);
              
             System.out.println(json);
             System.out.println(person);

在这里插入图片描述

可以写成匿名内部类

在这里插入图片描述

AJAX请求

什么是AJAX请求

AJAX即异步JavaScript 和xml，是一种创建交互式网页应用的网页开发奇数。
ajax 是一种浏览器通过js异步发起请求，局部更新页面的技术。

使用Ajax 发起请求主要分为一下四个步骤
1）, 首先要创建XMLHttpRequest

2）.调用open方法设置请求参数（规定请求的类型，URL，以及是否异步处理请求）
open(method,url,async) method :请求的类型 GET或POST url ：文件在服务器上的位置 async:true(异步) 或 false (同步)

3）.调用send方法发送请求（将请求发送到服务器）

4.）在send方法前绑定onreadystatechange事件，处理请求完成后的操作

当请求被发送到服务器时，我们需要执行一些基于相应的任务。
每当readyState改变时，就会触发onreadystatechange事件

readyState属性存有XMLHttpRequest的状态信息。下面是XMLHttpRequest 对象的三个重要属性

onreadystatechange 存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
readyState 存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪

status 200: “OK”

（服务器响应）
如需获得来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。

一个ajax 的例子

		<script type="text/javascript">
			function ajaxRequest() {
// 				1、我们首先要创建XMLHttpRequest 
       var  xmlhttprequest =  new XMLHttpRequest();
// 				2、调用open方法设置请求参数
       xmlhttprequest.open("GET","http://localhost:80/JavaProject/ajaxServlet?action=javaScriptAjax",true);
// 				3、调用send方法发送请求
     
            
       xmlhttprequest.onreadystatechange=function(){
    	   if(xmlhttprequest.readyState==4 && xmlhttprequest.status==200)
    		   {
    		 var json=JSON.parse(xmlhttprequest.responseText);
    		   
    		   document.getElementById("div01").innerHTML= "学号:"+json.xuehao
    		   +"姓名"+json.name+"性别"+json.sex;   		   
    		   }   	   
       }
         xmlhttprequest.send(); 
// 				4、在send方法前绑定onreadystatechange事件，处理请求完成后的操作。

			}
		</script>
			<body>	
		<button onclick="ajaxRequest()">ajax request</button>
		<div id="div01">
		</div>
	</body>

public class AjaxServlet extends  BaseServlet{

protected void javaScriptAjax(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {	
	
	 
           User   user =new User("2019","尤呈祥","M","临沂");
           Gson gosn  =new  Gson();
           String Userjson = gosn.toJson(user);
           resp.getWriter().write(Userjson);
           
          
	  	
}
	
}

在这里插入图片描述
Ajax请求的局部更新，浏览器地址栏不会发生变化，局部更新不会舍弃原来的页面内容。

jQuery中的AJAX请求

快速上手的五个方法

$.ajax 方法

url 表示请求地址

type 表示请求的类型GET或POST请求

data 表示发送的数据

success 请求响应，响应回调函数在方法里面必须要有一个参数

dataType 相应的数据类型常用的数据类型有（text（纯文本） xml(表示xml数据) json(表示json对象)）

protected void jQueryAjax(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {	
	
	 System.out.println("jQueryAjax调用了");
    User   user =new User("2019","尤呈祥","M","临沂");
    Gson gosn  =new  Gson();
    String Userjson = gosn.toJson(user);
    resp.getWriter().write(Userjson);
    	
}

	$(function(){
				// ajax请求
				$("#ajaxBtn").click(function(){
					
					$.ajax({
					 url:"http://localhost:80/JavaProject/ajaxServlet",
					 data:"action=jQueryAjax" ,
					 //data:{action："jQueryAjax"}, 也可以
					 type: "GET",
					 success:function(data){
					    var json =  JSON.parse(data);					    					    
						 $("#msg").html("编号"+json.xuehao+"姓名:"+json.name);
						 
						 //转成json
					 } ,
					 dataType: "text"					 						
					});

				});

也可以直接使用json类型
在这里插入图片描述
$.get 方法和 $.post 方法

url 请求的url地址
data 发送的数据
callback 成功时回调函数
type 返回的数据类型

		$("#getBtn").click(function(){

					$.get("http://localhost:80/JavaProject/ajaxServlet","action=jQueryGet",function(data){
						 $("#msg").html("get编号"+data.xuehao+"姓名:"+data.name);
					},"json");
					
				});
				
				// ajax--post请求
				$("#postBtn").click(function(){
					// post请求
					$.get("http://localhost:80/JavaProject/ajaxServlet","action=jQueryPost",function(data){
						 $("#msg").html("post编号"+data.xuehao+"姓名:"+data.name);
					},"json");
					
				});

$.getJSON方法
url 请求的url地址
data 发送给服务器的数据
callback 成功的回调函数

	$("#getJSONBtn").click(function(){
					// 调用
				$.getJSON("http://localhost:80/JavaProject/ajaxServlet","action=jQuerygetJSON",function(data){
					 $("#msg").html("post编号"+data.xuehao+"姓名:"+data.name);
				})
				});

表单序列化 serialize（）

serialize()可以把表单中所有表单项的内容都获取到，并以 name=value & name=value 的形式进行拼接

	$("#submit").click(function(){
					// 调用
					        //得到想要获取的表单
					alert($("#form01").serialize());
				$.getJSON("http://localhost:80/JavaProject/ajaxServlet","action=jQuerygetJSON",function(data){
					 $("#msg").html("post编号"+data.xuehao+"姓名:"+data.name);
				})

				});

在这里插入图片描述

小屁孩不努力

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
JSON和AJAX学习笔记

什么是JSONJSON 指的是 JavaScript 对象表示法（JavaScript Object Notation）JSON 是轻量级的文本数据交换格式JSON 独立于语言：JSON 使用 Javascript语法来描述数据对象，但是 JSON 仍然独立于语言和平台。JSON 解析器和 JSON 库支持许多不同的编程语言。目前非常多的动态（PHP，JSP，.NET）编程语言都支持JSON。JSON 具有自我描述性，更易理解轻量级指的是根xml作比较数据交换指的是客户端和服务器哦之间业务数据
复制链接

扫一扫