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