黄色电影一区二区,韩国少妇自慰A片免费看,精品人妻少妇一级毛片免费蜜桃AV按摩师 ,超碰 香蕉

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

1、js中如何創(chuàng)建和訪問(wèn)json對(duì)象

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

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

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

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>title</title>
</head>
<body>
    <script type="text/javascript">
        // 先創(chuàng)建一個(gè)json對(duì)象
        var address = {
            "city" :"安徽",
            "street" : "城關(guān)鎮(zhèn)",
            "zipcode" : "123"
        }
        // 另一個(gè)json對(duì)象
        var user = {
            "usercode" : 111,
            "username" : "zhangsan",
            "sex" : true,
            "age" : 20,
            "aihao" : ["抽煙","喝酒","燙頭"],
            "addr" : address
        }
        // 上面就等價(jià)于
        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）如何去訪問(wèn)json對(duì)象？主要有兩種方式：

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

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

   // 第一種方式
   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對(duì)象

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

json格式的字符串

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

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

window.eval("var jsonobj1 = " + fromjavaserverjsonstr);
// 進(jìn)行訪問(wèn)
alert(jsonobj1.usercode); // 111

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

var jsonobj2 = json.parse(fromjavaserverjsonstr);
alert(jsonobj2.age); // 20

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

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

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

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

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

后端得到靜態(tài)的數(shù)據(jù)，不在拼接html程序（寫(xiě)前端代碼），只負(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);

前端不在直接拿后端拼好的字符串格式，而是拿到j(luò)son格式的字符串進(jìn)行處理，在前端進(jìn)行拼串

document.getelementbyid("stutbody").innerhtml = this.responsetext
// -----------------------------------修改為
// 將json格式的字符串轉(zhuǎn)換成json對(duì)象
var stulist = json.parse(this.responsetext);
// 是一個(gè)數(shù)組，并且數(shù)組中有多個(gè)學(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ù)庫(kù)動(dòng)態(tài)拼接json字符串

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

②后端連接數(shù)據(jù)庫(kù)，拼接成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ù)庫(kù)
        connection conn = null;
        preparedstatement ps = null;
        resultset rs = null;
        try {
            // 注冊(cè)驅(qū)動(dòng)
            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ù)庫(kù)操作對(duì)象
            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格式的字符串對(duì)象，每次循環(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("\"},");
            }
            // 上面這樣拼接，最后一個(gè)json格式的對(duì)象會(huì)多一個(gè)逗號(hào)，所以進(jìn)行截串
            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);
    }
}

③前端對(duì)json格式的字符串進(jìn)行處理，然后拼串

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>發(fā)送ajax請(qǐng)求，顯示學(xué)生列表</title>
</head>
<body>
<script type="text/javascript">
    window.onload = function () {
            document.getelementbyid("btn").onclick = function () {
                // 1.創(chuàng)建核心對(duì)象
                var xhr = new xmlhttprequest();
                // 2.注冊(cè)回調(diào)函數(shù)
                xhr.onreadystatechange = function () {
                    if (this.readystate == 4) {
                        if (this.status == 200) {
                            //document.getelementbyid("mybody").innerhtml = this.responsetext
                            // 將json格式的字符串轉(zhuǎn)換成json對(duì)象
                            var stulist = json.parse(this.responsetext)
                            // 是一個(gè)數(shù)組，并且數(shù)組中有多個(gè)學(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.開(kāi)啟通道
                xhr.open("get", "/ajax/ajaxrequest5", true)
                // 4.發(fā)送請(qǐng)求
                xhr.send()
            }
        }
</script>
    <input type="button" value="顯示學(xué)員列表" id="btn">
    <table border="1px" width="50%">
        <tr>
            <th>序號(hào)</th>
            <th>姓名</th>
            <th>年齡</th>
            <th>住址</th>
        </tr>
        <!--具體的內(nèi)容需要連接數(shù)據(jù)庫(kù)動(dòng)態(tài)獲取，為了便于操作，寫(xiě)一個(gè)tbody-->
        <tbody id="mybody">
            <!--具體內(nèi)容響應(yīng)在這里-->
        </tbody>
    </table>
</body>
</html>

④效果展示，點(diǎn)擊按鈕

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

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

相關(guān)文章