1. Json 引入
基于JS 的一种轻量级的数据交换格式!“key”:“value”的书写格式
JavaScript 对象表示法(JavaScript Object Notation)。
JSON 是存储和交换文本信息的语法。类似 XML。
JSON 比 XML 更小、更快,更易解析。
2. Json 格式语法
//JSON 对象
{ "name":"张三" , "age":22}
//JSON 数组
{
"student": [
{ "name":"张三" , "age":22 },
{ "name":"李四" , "age":23 },
{ "name":"王五" , "age":24 }
]
}
//JSON 嵌套
{
"student": [
{ "name":"张三" , "age":22 ,"score":{"chinese":90,"math":100,"english":80} },
{ "name":"李四" , "age":23 ,"score":{"chinese":70,"math":90, "english":90} },
{ "name":"王五" , "age":24 ,"score":{"chinese":80,"math":60, "english":90} }
]
}
//把 Json 串换成 Json 对象
var dataObj=eval("("+data+")");//转换为 json 对象
3. Ajax&Json 交互简单实例
获取Json 对象:Json 第三方 jar 包引入: Json-lib
private void getJsonObject(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
PrintWriter out=response.getWriter();
// String resultJson="{\"name\":\"张三\",\"age\":22}"; //引入jar包前
JSONObject resultJson=new JSONObject();
//引入jar包后
resultJson.put("name", "张三");
resultJson.put("age", 22);
out.println(resultJson);
out.flush();
out.close();
}
<script type="text/javascript">
function loadInfo(){
var xmlHttp;
if(window.XMLHttpRequest){
xmlHttp=new XMLHttpRequest();
}else{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlHttp.onreadystatechange=function(){
if(xmlHttp.readyState==4 && xmlHttp.status==200){
alert(xmlHttp.responseText);
var dataObj=eval("("+xmlHttp.responseText+")"); //将Json串转换为Json对象
document.getElementById("name").value=dataObj.name;
document.getElementById("age").value=dataObj.age;
}
};
xmlHttp.open("get", "getAjaxInfo?action=jsonObject", true);
xmlHttp.send();
}
</script>
获取Json 数组
private void getJsonArray(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
PrintWriter out=response.getWriter();
JSONObject resultJson=new JSONObject();
JSONArray jsonArray=new JSONArray();
JSONObject jsonObject1=new JSONObject();
jsonObject1.put("name", "张三");
jsonObject1.put("age", 22);
JSONObject jsonObject2=new JSONObject();
jsonObject2.put("name", "李四");
jsonObject2.put("age", 23);
JSONObject jsonObject3=new JSONObject();
jsonObject3.put("name", "王五");
jsonObject3.put("age", 24);
jsonArray.add(jsonObject1);
jsonArray.add(jsonObject2);
jsonArray.add(jsonObject3);
resultJson.put("students", jsonArray);
out.println(resultJson);
out.flush();
out.close();
}
获取Json 嵌套:无限嵌套
private void getJsonNested(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
PrintWriter out=response.getWriter();
JSONObject resultJson=new JSONObject();
JSONArray jsonArray=new JSONArray();
JSONObject jsonObject1=new JSONObject();
jsonObject1.put("name", "张三");
jsonObject1.put("age", 22);
JSONObject scoreObject1=new JSONObject();
scoreObject1.put("chinese", 90);
scoreObject1.put("math", 100);
scoreObject1.put("english", 80);
jsonObject1.put("score", scoreObject1);
JSONObject jsonObject2=new JSONObject();
jsonObject2.put("name", "李四");
jsonObject2.put("age", 23);
JSONObject scoreObject2=new JSONObject();
scoreObject2.put("chinese", 70);
scoreObject2.put("math", 90);
scoreObject2.put("english", 90);
jsonObject2.put("score", scoreObject2);
JSONObject jsonObject3=new JSONObject();
jsonObject3.put("name", "王五");
jsonObject3.put("age", 24);
JSONObject scoreObject3=new JSONObject();
scoreObject3.put("chinese", 80);
scoreObject3.put("math", 60);
scoreObject3.put("english", 90);
jsonObject3.put("score", scoreObject3);
jsonArray.add(jsonObject1);
jsonArray.add(jsonObject2);
jsonArray.add(jsonObject3);
resultJson.put("students", jsonArray);
out.println(resultJson);
out.flush();
out.close();
}
function loadInfo2(){
var xmlHttp;
if(window.XMLHttpRequest){
xmlHttp=new XMLHttpRequest();
}else{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlHttp.onreadystatechange=function(){
if(xmlHttp.readyState==4 && xmlHttp.status==200){
alert(xmlHttp.responseText);
var dataObj=eval("("+xmlHttp.responseText+")");
var st=document.getElementById("studentTable");
alert(dataObj.students.length);
var newTr; // 行
var newTd0; // 第一列
var newTd1; // 第二列
var newTd2; // 第三列
for(var i=0;i<dataObj.students.length;i++){
var student=dataObj.students[i]; //获取每个对象
newTr=st.insertRow(); // 插入一行,返回行对象
newTd0=newTr.insertCell(); // 插入一列,返回列对象
newTd1=newTr.insertCell();
newTd2=newTr.insertCell();
newTd0.innerHTML=student.name; // 赋值
newTd1.innerHTML=student.age;
newTd2.innerHTML="语文:"+student.score.chinese+",数学:"+student.score.math+",英语:"+student.score.english;
}
}
};
// xmlHttp.open("get", "getAjaxInfo?action=jsonArray", true); //获取Json 数组
xmlHttp.open("get", "getAjaxInfo?action=jsonNested", true); //获取Json 嵌套
xmlHttp.send();
}