文章詳情頁

AJAX實現(xiàn)JSON與XML數(shù)據(jù)交換方法詳解

瀏覽：210日期：2022-06-12 08:01:23

1、JS中如何創(chuàng)建和訪問JSON對象

（1）在javascript語言中怎么創(chuàng)建一個json對象，語法是什么？

"屬性名" : 屬性值,"屬性名" : 屬性值.........的格式！

注意：屬性值的數(shù)據(jù)類型隨意；可能是數(shù)字，可能是布爾類型，可能是字符串，可能是數(shù)組，也可能是一個json對象.....

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title></head><body>    <script type="text/javascript">// 先創(chuàng)建一個JSON對象var address = {    "city" :"安徽",    "street" : "城關(guān)鎮(zhèn)",    "zipcode" : "123"}// 另一個JSON對象var user = {    "usercode" : 111,    "username" : "zhangsan",    "sex" : true,    "age" : 20,    "aihao" : ["抽煙","喝酒","燙頭"],    "addr" : address}// 上面就等價于var user = {    "usercode" : 111,    "username" : "zhangsan",    "sex" : true,    "age" : 20,    "aihao" : ["抽煙","喝酒","燙頭"],    "addr" :{"usercode" : 111,"username" : "zhangsan","sex" : true,"age" : 20,"aihao" : ["抽煙","喝酒","燙頭"],"addr" : address}}    </script></body></html>

（2）如何去訪問json對象？主要有兩種方式：

第一種方式：使用 .屬性名的方式

第二種方式：使用 ["屬性名"] 的方式

   // 第一種方式   console.log(address.city);   console.log(user.addr.street);   for (var i = 0;i<user.aihao.length;i++){console.log(user.aihao[i]);   }   // 第二種方式   console.log(address["city"]);   console.log(user["sex"]?"男":"女");

2、基于JSON的數(shù)據(jù)交換

（1）將JSON格式字符串轉(zhuǎn)換為JSON對象

我們知道從后端java程序中響應(yīng)回來的是字符串（json格式的字符串），那么你怎么把json格式的字符串轉(zhuǎn)換成json對象呢？主要有兩種方式：

JSON格式的字符串

var fromJavaServerJsonStr = "{"usercode" : 111, "age" : 20}";// \是轉(zhuǎn)義字符的作用，防止與外面的雙引號沖突var fromJavaServerJsonStr = "{\"usercode\" : 111, \"age\" : 20}";

第一種方式：使用eval函數(shù)

window.eval("var jsonobj1 = " + fromJavaServerJsonStr);// 進行訪問alert(jsonobj1.usercode); // 111

第二種方式：調(diào)用javascript語言中的內(nèi)置對象JSON的一個方法parse。

var jsonobj2 = JSON.parse(fromJavaServerJsonStr);alert(jsonobj2.age); // 20

（2）基于JSON的數(shù)據(jù)交換

①對于后端，不在寫html的代碼，只負(fù)責(zé)把數(shù)據(jù)以JSON格式的字符串返回；后端變輕松了。

②對于前端，負(fù)責(zé)把接收到的JSON格式的字符串轉(zhuǎn)換成JSON對象，并完成拼串的操作；前端變復(fù)雜了。

③整體上，后端只會出現(xiàn)后端的代碼，前端只會出現(xiàn)前端的代碼，便于維護！

第一種方式：對于靜態(tài)的字符串

后端得到靜態(tài)的數(shù)據(jù)，不在拼接HTML程序（寫前端代碼），只負(fù)責(zé)把數(shù)據(jù)響應(yīng)回去，拼接成JSON格式的字符串

StringBuilder html = new StringBuilder();html.append("<tr>");html.append("<td>1</td>");html.append("<td>王五</td>");html.append("<td>20</td>");html.append("<td>北京大興區(qū)</td>");html.append("</tr>");html.append("<tr>");html.append("<td>2</td>");html.append("<td>李四</td>");html.append("<td>22</td>");html.append("<td>北京海淀區(qū)</td>");html.append("</tr>");// --------------------------------------------修改為// 將以上程序拼接HTML，換成拼接JSON格式的字符串。String jsonStr = "[{\"name\":\"王五\",\"age\":20,\"addr\":\"北京大興區(qū)\"}, {\"name\":\"李四\",\"age\":22,\"addr\":\"北京海淀區(qū)\"}]";// 響應(yīng)JSON格式的字符串給前端。out.print(jsonStr);

前端不在直接拿后端拼好的字符串格式，而是拿到JSON格式的字符串進行處理，在前端進行拼串

document.getElementById("stutbody").innerHTML = this.responseText// -----------------------------------修改為// 將json格式的字符串轉(zhuǎn)換成json對象var stuList = JSON.parse(this.responseText);// 是一個數(shù)組，并且數(shù)組中有多個學(xué)生數(shù)據(jù)var html = ""for (var i = 0; i < stuList.length; i++) { var stu = stuList[i] html += "<tr>" html += "<td>"+(i+1)+"</td>" html += "<td>"+stu.name+"</td>" html += "<td>"+stu.age+"</td>" html += "<td>"+stu.addr+"</td>" html += "</tr>"     }document.getElementById("stutbody").innerHTML = html

第二種方式：連接數(shù)據(jù)庫動態(tài)拼接JSON字符串

①創(chuàng)建數(shù)據(jù)庫表

②后端連接數(shù)據(jù)庫，拼接成JSON格式的字符串

package com.bjpowernode.javaweb.ajax;import javax.servlet.ServletException;import javax.servlet.annotation.WebServlet;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import java.io.IOException;import java.io.PrintWriter;import java.sql.*;/** * @Author：朗朗乾坤 * @Package：com.bjpowernode.javaweb.ajax * @Project：ajax * @name：AjaxRequest5Servlet * @Date：2022/12/6 17:13 */@WebServlet("/ajaxrequest5")public class AjaxRequest5Servlet extends HttpServlet {    @Override    protected void doGet(HttpServletRequest request, HttpServletResponse response)    throws ServletException, IOException {// 響應(yīng)到瀏覽器response.setContentType("text/html;charset=UTF-8");PrintWriter out = response.getWriter();// 用于拼接成JSON的字符串StringBuffer json = new StringBuffer();String jsonobj = "";// 連接數(shù)據(jù)庫Connection conn = null;PreparedStatement ps = null;ResultSet rs = null;try {    // 注冊驅(qū)動    Class.forName("com.mysql.jdbc.Driver");    // 獲取連接    conn = DriverManager.getConnection("jdbc:mysql://localhost:3306/bjpowernode?useUnicode=true&characterEncoding=utf8&serverTimezone=UTC", "root", "123");    // 獲取預(yù)編譯的數(shù)據(jù)庫操作對象    String sql = "select name,age,addr from t_student ";    ps = conn.prepareStatement(sql);    // 執(zhí)行sql    rs = ps.executeQuery();    // 處理查詢結(jié)果集    json.append("[");    while (rs.next()) { // 每循環(huán)一次，就拼接一次String name = rs.getString("name");String age = rs.getString("age");String addr = rs.getString("addr");// 拼成JSON格式的字符串對象，每次循環(huán)拼接的格式如下// {"name":" 王五 ","age": 20 ,"addr":" 北京大興區(qū) "},json.append(" {\"name\":\"");json.append(name);json.append("\",\"age\":");json.append(age);json.append(",\"addr\":\"");json.append(addr);json.append("\"},");    }    // 上面這樣拼接，最后一個JSON格式的對象會多一個逗號，所以進行截串    jsonobj = json.substring(0,json.length()-1) + "]";} catch (ClassNotFoundException e) {    e.printStackTrace();} catch (SQLException e) {    e.printStackTrace();} finally {    // 釋放資源    if (rs != null) {try {    rs.close();} catch (SQLException e) {    e.printStackTrace();}    }    if (ps != null) {try {    ps.close();} catch (SQLException e) {    e.printStackTrace();}    }    if (conn != null) {try {    conn.close();} catch (SQLException e) {    e.printStackTrace();}    }}// 響應(yīng)JSON格式的字符串給前端out.print(jsonobj);    }}

③前端對JSON格式的字符串進行處理，然后拼串

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>發(fā)送AJAX請求，顯示學(xué)生列表</title></head><body><script type="text/javascript">    window.onload = function () {    document.getElementById("btn").onclick = function () {// 1.創(chuàng)建核心對象var xhr = new XMLHttpRequest();// 2.注冊回調(diào)函數(shù)xhr.onreadystatechange = function () {    if (this.readyState == 4) {if (this.status == 200) {    //document.getElementById("mybody").innerHTML = this.responseText    // 將json格式的字符串轉(zhuǎn)換成json對象    var stuList = JSON.parse(this.responseText)    // 是一個數(shù)組，并且數(shù)組中有多個學(xué)生數(shù)據(jù)    var html = ""    for (var i = 0; i < stuList.length; i++) {var stu = stuList[i]html += "<tr>"html += "<td>"+(i+1)+"</td>"html += "<td>"+stu.name+"</td>"html += "<td>"+stu.age+"</td>"html += "<td>"+stu.addr+"</td>"html += "</tr>"    }    document.getElementById("mybody").innerHTML = html} else {    alert(this.status)}    }}// 3.開啟通道xhr.open("GET", "/ajax/ajaxrequest5", true)// 4.發(fā)送請求xhr.send()    }}</script>    <input type="button" value="顯示學(xué)員列表" id="btn">    <table border="1px" width="50%"><tr>    <th>序號</th>    <th>姓名</th>    <th>年齡</th>    <th>住址</th></tr><!--具體的內(nèi)容需要連接數(shù)據(jù)庫動態(tài)獲取，為了便于操作，寫一個tbody--><tbody id="mybody">    <!--具體內(nèi)容響應(yīng)在這里--></tbody>    </table></body></html>

④效果展示，點擊按鈕

（3）fastjson組件優(yōu)化代碼

從上面代碼來看，拼接JSON格式的字符串太痛苦，可以使用阿里巴巴的fastjson組件，它可以將java對象轉(zhuǎn)換成json格式的字符串

Ajax

上一條：AJAX亂碼與異步同步以及封裝jQuery庫實現(xiàn)步驟詳解下一條：AJAX的跨域問題解決方案

排行榜

					
					Spring Security中的Servlet過濾器體系代碼分析
Vue全局使用less樣式,組件使用全局樣式文件中定義的變量操作
如何手寫簡易的 Vue Router
SpringBoot整合SpringDataRedis的示例代碼
sessionStorage多Tab標(biāo)簽頁數(shù)據(jù)共享問題分析
Python自動重新加載模塊詳解(autoreload module)
uniapp界面新增水印實現(xiàn)示例詳解
用Java實現(xiàn)斷點續(xù)傳(HTTP)
IDEA 端口占用的解決方法(推薦)
詳解用Python爬蟲獲取百度企業(yè)信用中企業(yè)基本信息
python matplotlib:plt.scatter() 大小和顏色參數(shù)詳解
				