JSON 和HTTP&AJAX前后臺互動案例圖解-有解無憂

案例在文章最后

JSON

1. JSON 簡述

JSON是一種輕量級的資料交換格式，采用完全獨立于編程語言的文本格式來存盤和表示資料，

2. JSON 語法規則

JSON 是一個序列化的物件或陣列，屬性名（key）用雙引號包裹，值可以是物件、陣列、數字、字串或者三個字面值(false、null、true)中的一個，值中的字面值中的英文必須使用小寫，

（1）物件結構

{

"key1": "value1",

"key2": "value2"

}

（2）陣列結構

[{

"key1": "value1",

"key2": "value2"

{

"key3": "value3",

"key4": "value4"

}]

3. JSON和JS物件的關系

JSON是 JS的一種簡單資料格式，JSON是JavaScript原生格式，它是一種嚴格的JS物件的格式，JSON的屬性名必須有雙引號，如果值是字串，也必須是雙引號，

其中，eval()函式是自行引數內，字串的js代碼，如:eval("2+2")

4. JSON字串和JSON物件的區別

JSON字串：指的是符合JSON格式要求的JS字串，

需要注意的是，服務器的回傳資料，以及前臺向后臺的傳輸資料都可能是JSON字串，而不是JSON物件，

var jsonStr = "{id:'001',name:'tom',age:18}";

JSON物件：指符合JSON格式要求的JS物件，

var jsonObj = { id: '001', name: 'tom', age: 18 };

5. 轉換方式

為什么要使用JSON的轉化，因為前后臺資料的傳輸均為JSON字串格式，如不通過決議和轉化將無法使用，

`JSON.stringify()`用于將一個值轉為字串，該字串應該符合JSON格式，并且可以被`JSON.parse`方法還原，

var json = JSON.stringify({ a: 'Hello', b: 'World' });

//結果是 '{"a": "Hello", "b": "World"}'

`JSON.parse()` 用于將JSON字串轉化成物件，

var obj = JSON.parse('{"a": "Hello", "b": "World"}');

//結果是 {a: 'Hello', b: 'World'}

前后端互動案例：

準備：1.新版谷歌瀏覽器，新版vscode

2.下載安裝新版本 vscode 并安裝相關插件，點擊左側擴展直接搜索下載

3.創建專案目錄exercise

4.安裝npm install express,右擊目錄exercise選擇在集成終端中打開，在終端輸入npm install express回車，

安裝npm install express時專案目錄會創建node_modules目錄，

data.j代碼：圖片要換成自己電腦上圖片的路徑

var data = [
{"name":"妙蛙種子","id":"001","url":"http://media.52poke.com/wiki/thumb/2/21/001Bulbasaur.png/300px-001Bulbasaur.png","attr":[12,4],"capture":5.9},
{"name":"妙蛙草","id":"002","url":"http://media.52poke.com/wiki/thumb/7/73/002Ivysaur.png/300px-002Ivysaur.png","attr":[12,4],"capture":5.9},
{"name":"妙蛙花","id":"003","url":"http://media.52poke.com/wiki/thumb/a/ae/003Venusaur.png/300px-003Venusaur.png","attr":[12,4],"capture":5.9},
{"name":"小火龍","id":"004","url":"http://media.52poke.com/wiki/thumb/7/73/004Charmander.png/300px-004Charmander.png","attr":[10],"capture":5.9}
]
module.exports=data;

app.js代碼：

//1.引入express
var express = require('express');
//引入data.js
var poke=require('./data.js');
//2.創建web服務器，實體化
var app = express();
//3.設定埠
app.listen(8080);
/* 4.靜態資源托管express.static()將靜態資源的
目錄放入到引數中，不是必須只有這一個檔案目錄可以托管,
也不是只有這一個檔案目錄可以 */
app.use(express.static('./public'));

//01_show.html介面，回傳一個小精靈資料
app.get('/pokeshow',(req,res)=>{
    //Number()將前臺傳來的id轉為數字型別
    var id=Number(req.query.id);
    //將轉好數字的id放在poke陣列中當索引使用但要-1
    //此時的datajson是一組小精靈的資料，物件形式的
    var datajson=poke[id-1];
    //找好的資料傳回前臺
    res.send(datajson);
})

//02_list.html介面，
//所有小精靈給到前臺
app.get('/pokelist',(req,res)=>{
    res.send(poke);
})

01_show.html代碼：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style></style>
</head>
<body>
  <!-- 輸入框，輸入小精靈的id編號，通過點擊搜索，查找到小精靈的資料 -->
  <input type="text" placeholder="小精靈的id編號" id="pokeid">
  <button id="btn">搜索</button>
  <div id="show"></div>
  <script>
    //1.獲取所有元素
    var pokeid = document.getElementById('pokeid');
    var btn = document.getElementById('btn');
    var show = document.getElementById('show');
    //2.事件觸發
    btn.onclick = function () {
      //（1）獲取用戶輸入的數字
      var idval = pokeid.value.trim();
      //（2）呼叫ajax函式并把數字傳入到ajax中
      ajax(idval);
    }
    function ajax(i) {
      //創建xhr物件
      var xhr = new XMLHttpRequest();
      //監聽并回傳值
      xhr.onreadystatechange = function () {
        //判斷readyState是4的時候才可以拿到后臺的資料
        if (xhr.readyState == 4) {
          //判斷回傳內容成功，再接收資料
          if (xhr.status >= 200 && xhr.status < 300) {
            // 使用JSON.parse將字串格式的物件，轉換成真的物件
            var result = JSON.parse(xhr.responseText);
            console.log(result)
            //展示這個方法，放在外面，在里面呼叫
            showlist(result)
          }
        }
      }
      //設定請求資訊
      xhr.open('GET', `/pokeshow?id=${i}`, true);
      //發送請求
      xhr.send();
    }
    //顯示的函式show，需要接受后臺的資料
    function showlist(r) {
      show.innerHTML = `<h2>${r.id}</h2>
      <h3>${r.name}</h3>
      <img src="./poke/${r.id}.png" width="100">`;
    }
  </script>
</body>
</html>

02_list.html代碼：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        li{
           float: left;
           margin-left: 10px;
           padding:0 40px;
           border:1px solid paleturquoise;
        }
    </style>
</head>
<body>
    <ul id="show"></ul>
    <script>
        //1.獲取元素
        var show=document.getElementById('show');
        //2.呼叫ajax
        ajax();
        //ajsx函式 介面地址
        function ajax(){
            var xhr=new XMLHttpRequest();
            xhr.onreadystatechange=function(){
                if(xhr.readyState==4){
                    if(xhr.status>=200 && xhr.status<300){
                        var result=JSON.parse(xhr.responseText);
                        console.log(result)
                        //專門展示的函式（套路）
                        showlist(result);
                    }
                }
            }
            xhr.open('GET','/pokelist',true);
            xhr.send();
        }
        function showlist(data){
            /*套路1:為了保證for回圈里的新增資料是累加的，
            因此在for回圈外線創建一個空的塑料袋準備裝打包后的所有內容 */
            var str='';
            //套路2:使用for回圈遍歷引數資料，主要是引數的長度
            for(var i=0;i<data.length;i++){
                /*套路3:在for回圈內，把每一個標簽或者嵌套標簽都用模
                板字串抱起來，并在其中填入引數的動態資料，最后集體
                交給(+=)空字串進行累加收集 */
                str+=`<li>
                    <h2>${data[i].id}</h2>
                    <h3>${data[i].name}</h3>
                    <img src="./poke/${data[i].id}.png" width="50">
                    </li>`;
            }
            console.log(str)
            /* 套路4:最后把打包好的空字串，給頁面上的一個元素插入進
            去使用元素的innerHTML */
            show.innerHTML=str;
        }
    </script>
</body>
</html>

右擊專案exercise打開終端輸入node app.js回車，

打開谷歌瀏覽器，地址欄輸入127.0.0.1:8080/01_show.html 回車輸入1點擊搜索，

輸入127.0.0.1:8080/02_list.html 回車，

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/297591.html

標籤：其他

上一篇：移動端 uni-app 滑動事件精確判斷手指滑動方向

下一篇：React 核心概念（3）