Ajax中的json实现及使用jQuery实现Ajax

目录

一、Json简介

 二、Json语法介绍

三、Json深入 

1.将普通字符串变成js

 2.快速的将javabean转换为了为json数据

 四、jQuery实现Ajax

 1.JQuery 对 Ajax 操作进行了封装, 在 jQuery 中最底层的方法时 $.ajax(), 第二层是 load(), $.get() 和 $.post(), 第三层是 $.getScript() 和 $.getJSON()。

 2.load方法：（传递方式: load() 方法的传递参数根据参数 data 来自动自定. 如果没有参数传递, 采用 GET 方式传递, 否则采用 POST 方式）

 3.实例

4.Ajax提交表单数据

---

一、Json简介

JSON(JavaScript Object Notation, JS 对象标记) 是一种轻量级的数据交换格式。

JSON 指的是 JavaScript 对象表示法（JavaScript Object Notation）

JSON 是存储和交换文本信息的语法。类似 XML。

JSON 比 XML 更小、更快，更易解析。

JSON 是轻量级的文本数据交换格式

JSON 独立于语言 *

JSON 具有自我描述性，更易理解

 二、Json语法介绍

JSON 语法是 JavaScript 对象表示法的子集：

• 数据在键/值对中，键/值对可以嵌套

• 数据由逗号分隔

• 花括号保存对象，对象可以包含多个键/值对

• 方括号保存数组，数组可以包含多个对象

JSON不是JavaScript语句，对象的末尾没有分号，对象和数组的最后一个成员后面，也不能加逗号。

window.onload = function(){
	   	var json1 = {name:"haoren",password:123};
	   	var jsonArr = [{name:"huairen",age:12+23},{name:"zhangsan",age:23},{name:"lishi",age:13}]
	   	alert(json1.name);
	   	alert(json1.password);
	   	for(i=0;i

三、Json深入 

1.将普通字符串变成js

        Servlet

String data = "{name:'haoren',password:'123'}";
response.getWriter().print(data);
User user = new User("huairen","1212",45);
String data = "{name:'"+user.getName()+"',password:'"+user.getPassword()+"',age:'"+user.getAge()+"'}";
response.getWriter().print(data);

        jsp

function showInfo(){
			//alert(xmlHttp.readyState);
			if(xmlHttp.readyState == 4){
				if(xmlHttp.status == 200 || xmlHttp.status == 304){

					var jdata1 = xmlHttp.responseText;
					alert(jdata1);
alert(jdata1.name+":"+jdata1.password+":"+jdata1.age);//这里会出问题，因为后台返回给我们的是普通字符串而不是js，所以无法点运算，应该做如下处理。

//eval函数可以将普通字符串变成js
var jdata = eval("("+xmlHttp.responseText+")");
					alert(jdata);
					alert(jdata.name+":"+jdata.password+":"+jdata.age);
					
				}
				
			}
			
		}

 2.快速的将javabean转换为了为json数据

        Servlet 

//利用json-lib快速的将javabean转换为了为json数据
		List list = new ArrayList();
		list.add(new User("user1","2323",42));
		list.add(new User("user2","2324",46));
		list.add(new User("user3","2325",47));
		JSONArray ja = JSONArray.fromObject(list);
		//过滤掉一些字段
		//JsonConfig jc = new JsonConfig();
		//jc.setExcludes(new String[]{"password"});
		//JSONArray ja = JSONArray.fromObject(list,jc);
		
		response.getWriter().print(ja.toString());

        jsp 

function showInfo(){
			//alert(xmlHttp.readyState);
			if(xmlHttp.readyState == 4){
				if(xmlHttp.status == 200 || xmlHttp.status == 304){
					var jdata = eval("("+xmlHttp.responseText+")");
					//alert(jdata.name+":"+jdata.password+":"+jdata.age);
					alert(jdata[0].name+","+jdata[1].name+","+jdata[2].name+","+jdata[0].password);
				}
				
			}
			
		}

 四、jQuery实现Ajax

 1.JQuery 对 Ajax 操作进行了封装, 在 jQuery 中最底层的方法时 $.ajax(), 第二层是 load(), $.get() 和 $.post(), 第三层是 $.getScript() 和 $.getJSON()。

 2.load方法：（传递方式: load() 方法的传递参数根据参数 data 来自动自定. 如果没有参数传递, 采用 GET 方式传递, 否则采用 POST 方式）

        load(url,[data],[callback]);

 * url:请求的服务器的资源地址

* data:向服务器端发送数据，JSON串格式.如果有此参数，就以POST方式提交数据，没有就是get方式提交数据

 *  callback:function(data,textStatus,xhr){}

data:服务器端返回的数据

textStatus:状态。succuss, error, notmodify, timeout

xhr：XmlHttpRequest对象本身

 3.实例

$("#div1").load("servlet/AjaxDemo1",{name:"huairen",password:"123456"},function(data,textStatus,xhr){
				alert(data);
				alert(textStatus);
				alert(xhr);
			});
		}
    
    

4.Ajax提交表单数据

$("#form1").serialize()提取表单数据

 function fun1() {
			
			$.get("servlet/AjaxDemo3",$("#form1").serialize());
		}