亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

搜索
博主信息
博文 145
粉絲 7
評(píng)論 7
訪問(wèn)量 198843
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板
JS關(guān)鍵知識(shí)點(diǎn)：JSON和Ajax
李東亞1??3????12?
原創(chuàng)
1205人瀏覽過(guò)

隨堂知識(shí)總結(jié)：

一、JSON相關(guān)知識(shí)：

1、json是借用了JS對(duì)象字面量法來(lái)表示數(shù)據(jù)，是一種輕量級(jí)，用于數(shù)據(jù)交換與存儲(chǔ)的格式化的字符串（本質(zhì)上仍是一個(gè)字符串）；
2、json數(shù)據(jù)類型：

  • 簡(jiǎn)單值：100，”hello”,true,null,沒(méi)有undefined
  • 對(duì)象：{……}
  • 數(shù)組：[……]
  • 簡(jiǎn)單值字符串：必須且只能用雙引號(hào)作為定界符；

3、JS中有關(guān)json的兩個(gè)方法：

  • 序列化：JS對(duì)象序列化為JSON格式的字符串JSON.stringify(JS_obj,array|fucntion(key,value){……},'字符縮進(jìn)數(shù)和字符');當(dāng)?shù)诙€(gè)參數(shù)為數(shù)組時(shí)：限制序列化成員（序列化白名單）;反之為回調(diào)函數(shù)對(duì)JS對(duì)象中的元素進(jìn)一步處理返回JSON中（必須有return value；否則為空，如果不需要某值返回undefined）;第三個(gè)參數(shù)為JSON縮進(jìn)字符；
    注意：JS對(duì)象序列化之后，會(huì)將以下三種成員刪除：
    （1）方法（函數(shù)）
    （2）值為undefined的屬性
    （3）繼承的原型對(duì)象成員

  • 解析：將JSON格式的字符串解析/還原為JS對(duì)象JSON.parse(json,function(key,value){……;return value;});當(dāng)只有一個(gè)參數(shù)時(shí)：直接解析JSON對(duì)象返回JS對(duì)象；當(dāng)為兩個(gè)參數(shù)時(shí)：第二個(gè)參數(shù)為回調(diào)函數(shù)，把JSON對(duì)象中的值處理后在返回；

4、JSON與JS對(duì)象的區(qū)別：

  • (1)沒(méi)有變量聲明：JSON中沒(méi)有變量的概念
  • (2)沒(méi)有分號(hào)：JSON不是語(yǔ)句；
  • (3)JSON屬性名必須加上雙引號(hào)：任何時(shí)候任何地方都必須加雙引號(hào)，且必須加雙引號(hào)

tips:為了規(guī)范/自定義序列化的返回結(jié)果，允許在JS對(duì)象中創(chuàng)建一個(gè)方法：toJSON;toJSON在調(diào)用JSON.stringify()時(shí)自動(dòng)調(diào)用，像魔術(shù)方法一樣；

二、AJax相關(guān)知識(shí):

1、同步和異步的概念：
同步：發(fā)出請(qǐng)求得到響應(yīng)放回?cái)?shù)據(jù)，才可以發(fā)送另一個(gè)
異步：發(fā)出請(qǐng)求，不需要得到響應(yīng)回復(fù)就可以發(fā)出另一個(gè)請(qǐng)求，（回調(diào)函數(shù)）;
2、XMLHttpRequest基本流程（兩種形式GET和POST）：
（1）、請(qǐng)求的進(jìn)本流程（GET）

  1. 創(chuàng)建請(qǐng)求對(duì)象：xhr=new XMLHttpRequest();
  2. 監(jiān)聽(tīng)請(qǐng)求回調(diào)：xhr.onreadystatechange=function(){};
  3. 設(shè)置請(qǐng)求參數(shù)：xhr.open(請(qǐng)求類型，請(qǐng)求url,是否異步)（默認(rèn)true,異步）
  4. 發(fā)送請(qǐng)求：xhr.send(null)

(2)、請(qǐng)求的基本流程（POST）

  1. 創(chuàng)建請(qǐng)求對(duì)象：xhr=new XMLHttpRequest();
  2. 監(jiān)聽(tīng)請(qǐng)求回調(diào)：xhr.onreadystatechange=function(){};
  3. 設(shè)置請(qǐng)求頭：xhr.open(請(qǐng)求類型，請(qǐng)求url,是否異步)：默認(rèn)true,異步
  4. 設(shè)置請(qǐng)求頭：xhr.setRequestHeader()
  5. 準(zhǔn)備請(qǐng)求的數(shù)據(jù)：var data={……}
  6. 發(fā)送請(qǐng)求：xhr.send(data);可以添加鍵值對(duì)形式返回:send(‘user=’+data);

3、監(jiān)聽(tīng)事件：onreadystatechange(在xhr監(jiān)聽(tīng)對(duì)象中,xhr可以用this代替)

  1. reponseText:返回ajax請(qǐng)求文本
  2. reponseXML：返回的html/xml;
  3. readyState===4:標(biāo)識(shí)Ajax請(qǐng)求狀態(tài)（4代表成功）
  4. status:返回?cái)?shù)據(jù)（200代表OK）

4、發(fā)送數(shù)據(jù)的兩種格式在請(qǐng)求頭中設(shè)置:

  1. xhr.setRequestHeader('content-type','applicaton/x-www-form-urlencoded')表單數(shù)據(jù)形式
  2. xhr.setRequestHeader('content-type','applicaton/json;charset=utf-8')json數(shù)據(jù)形式

在Ajax中POST形式中還有一種默認(rèn)表單數(shù)據(jù)發(fā)送形式(不需要設(shè)置請(qǐng)求頭):FormData();

  1. var data=new FormData();
  2. data.append(key,value);
  3. xhr.send(data);

5、附加知識(shí)點(diǎn):
setTimeout(函數(shù)、time) 方法用于在指定的毫秒數(shù)后調(diào)用函數(shù)或計(jì)算表達(dá)式。
onsubmit="return false"禁用表單提交事件；
6、獲取Ajax發(fā)送的數(shù)據(jù):以GET形式發(fā)送的數(shù)據(jù):$_GET
以POST形式發(fā)送的數(shù):$_POST
數(shù)據(jù)格式如果是JSON格式,則以file_get_contents(‘php://input’)獲取,其他都已$_POST獲取;
Ajax請(qǐng)求返回的響應(yīng)一般是responseText文本格式,所以服務(wù)端接受Ajax默認(rèn)返回?cái)?shù)據(jù)轉(zhuǎn)化成JSON格式返回;

代碼練習(xí)

1.Ajax請(qǐng)求GET形式

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>Document</title>
  7.   </head>
  8.   <body>
  9.     <span>服務(wù)器成功調(diào)用</span>
  10.   </body>
  11.   <script>
  12.     // 創(chuàng)建請(qǐng)求對(duì)象
  13.     var xhr = new XMLHttpRequest();
  14.     //創(chuàng)建回調(diào)監(jiān)聽(tīng)
  15.     xhr.onreadystatechange = function () {
  16.       if (xhr.readyState === 4 && xhr.status === 200) {
  17.         console.log(xhr.responseText);
  18.         var h2 = document.createElement("h2");
  19.         h2.innerHTML = xhr.responseText;
  20.         document.body.appendChild(h2);
  21.       }
  22.     };
  23.     xhr.open("GET", "test.php", true);
  25.     xhr.send(null);
  26.   </script>
  27. </html>

運(yùn)行結(jié)果

2.Ajax請(qǐng)求POST形式(json格式):

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>Ajax,演練POST</title>
  7.   </head>
  8.   <body>
  9.     <script>
  10.       // new一個(gè)XMLHttpRequest對(duì)象
  11.       var xhr = new XMLHttpRequest();
  12.       //監(jiān)聽(tīng)事件操作
  13.       xhr.onreadystatechange = function () {
  14.         if (xhr.readyState === 4 && xhr.status === 200) {
  15.           var data = JSON.parse(xhr.responseText);
  16.           // console.log(data);
  17.           var name = document.createElement("span");
  18.           name.innerText = "用戶名：" + data.username;
  19.           document.body.append(name);
  20.           var pass = document.createElement("span");
  21.           pass.innerText = "密 碼：" + data.password;
  22.           document.body.append(pass);
  23.         }
  24.       };
  25.       //初始化請(qǐng)求參數(shù)
  26.       xhr.open("POST", "test3.php", true);
  27.       //設(shè)置請(qǐng)求頭
  28.       xhr.setRequestHeader("content-type", "application/json;charset=utf-8");
  29.       //準(zhǔn)備請(qǐng)求數(shù)據(jù)
  30.       var user = {
  31.         username: "ldy",
  32.         password: "123456",
  33.       };
  34.       //發(fā)送數(shù)據(jù)
  35.       xhr.send(JSON.stringify(user));
  36.     </script>
  37.   </body>
  38. </html>

代碼演示結(jié)果:

3.Ajax請(qǐng)求POST形式(FormData對(duì)象):

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>Ajax,演練POST</title>
  7.     <style></style>
  8.   </head>
  9.   <body>
  10.     <h1>用戶信息</h1>
  11.     <table aglin="center" cellpadding="3" cellspacing="0" border="2" }>
  12.       <tr>
  13.         <th>賬戶</th>
  14.         <th>密碼</th>
  15.       </tr>
  16.     </table>
  17.     <script>
  18.       // new一個(gè)XMLHttpRequest對(duì)象
  19.       var xhr = new XMLHttpRequest();
  20.       //監(jiān)聽(tīng)事件操作
  21.       xhr.onreadystatechange = function () {
  22.         if (xhr.readyState === 4 && xhr.status === 200) {
  23.           var user = xhr.responseText;
  24.           var userdata = JSON.parse(user);
  25.           console.log(userdata.name);
  26.           var name = document.createElement("tr");
  27.           name.innerHTML =
  28.             "<td>" + userdata.name + "</td><td>" + userdata.ps + "</td>";
  30.           document.body.getElementsByTagName("table").item(0).append(name);
  31.         }
  32.       };
  33.       //初始化請(qǐng)求參數(shù)
  34.       xhr.open("POST", "test2.php", true);
  35.       //省略設(shè)置請(qǐng)求頭
  36.       // xhr.setRequestHeader("content-type", "application/json;charset=utf-8");
  37.       //準(zhǔn)備請(qǐng)求數(shù)據(jù)
  39.       var data = new FormData();
  40.       data.append("name", "ldy@qq.com");
  41.       data.append("ps", "123456");
  42.       //發(fā)送數(shù)據(jù)
  43.       xhr.send(data);
  44.     </script>
  45.   </body>
  46. </html>

演示結(jié)果

4.案例代碼：

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>用戶注冊(cè)</title>
  8.     <style>
  9.     * {
  10.         margin: 0;
  11.         padding: 0;
  12.     }
  14.     h2 {
  15.         /* display: block; */
  16.         width: 350px;
  17.         margin: 0 auto;
  18.         text-align: center;
  19.         padding-top: 10px;
  20.         box-sizing: border-box;
  22.     }
  25.     form {
  26.         margin: 10px auto;
  27.         width: 350px;
  28.         height: 250px;
  29.         background-color: #5384e8;
  30.         display: flex;
  31.         flex-flow: column nowrap;
  32.         justify-content: space-evenly;
  33.         align-content: center;
  34.         align-items: center;
  35.         font-size: 1.2rem;
  37.     }
  39.     form:hover {
  40.         box-shadow: 0 0 5px #626262;
  41.     }
  43.     form>.button {
  44.         width: 280px;
  45.         display: flex;
  46.         justify-content: space-evenly;
  47.     }
  49.     form>.button>input {
  50.         width: 100px;
  51.         height: 30px;
  52.         background-color: #00bb00;
  53.         border: none;
  54.         border-radius: 15px;
  55.     }
  57.     form>.button>input:hover {
  58.         background-color: red;
  59.         color: white;
  60.     }
  62.     a {
  63.         color: white;
  64.         text-decoration: none;
  65.     }
  66.     </style>
  67. </head>
  69. <body>
  70.     <h2>用戶注冊(cè)</h2>
  71.     <form method="POST" onsubmit="return false">
  73.         <div class='account'>
  74.             <label for="username">賬戶：</label>
  75.             <input type="email" required name="username" id="username" placeholder="example@163.com">
  76.         </div>
  77.         <div class='pwd'>
  78.             <label for="p2">密碼：</label>
  79.             <input type="password" required name="p2" id="p2" placeholder="不少于六位">
  80.         </div>
  82.         <div class="button">
  83.             <input type="submit" value="登陸">
  84.             <input type="reset" value="重置">
  86.         </div>
  87.         <div>
  88.             <a href="regist.php">沒(méi)有賬號(hào),點(diǎn)擊此處注冊(cè)!</a>
  89.         </div>
  90.     </form>
  91. </body>
  92. <script>
  93. var form = document.querySelector('form');
  94. var btn = document.querySelector('.button>:first-child');
  95. btn.onclick = function() {
  96.     var xhr = new XMLHttpRequest();
  98.     xhr.onreadystatechange = function() {
  99.         if (xhr.readyState === 4 && xhr.status === 200) {
  100.             var res;
  101.             res = JSON.parse(xhr.responseText);
  102.             var span = document.createElement('span');
  103.             span.innerText = res.messages;
  105.             form.append(span);
  106.         }
  107.     }
  109.     xhr.open("POST", "log.php", true);
  111.     var user = new FormData(form);
  112.     xhr.send(user);
  113. }
  114. </script>
  116. </html>

運(yùn)行結(jié)果圖：

批改老師：天蓬老師天蓬老師

批改狀態(tài)：合格

老師批語(yǔ)：js是比較有意思的, 不要著急
本博文版權(quán)歸博主所有，轉(zhuǎn)載請(qǐng)注明地址！如有侵權(quán)、違法，請(qǐng)聯(lián)系admin@php.cn舉報(bào)處理！
全部評(píng)論 文明上網(wǎng)理性發(fā)言，請(qǐng)遵守新聞評(píng)論服務(wù)協(xié)議
0條評(píng)論
關(guān)于我們 免責(zé)申明 意見(jiàn)反饋 講師合作 廣告合作 最新更新
php中文網(wǎng)：公益在線php培訓(xùn)，幫助PHP學(xué)習(xí)者快速成長(zhǎng)！
關(guān)注服務(wù)號(hào) 技術(shù)交流群
PHP中文網(wǎng)訂閱號(hào)
每天精選資源文章推送
PHP中文網(wǎng)APP
隨時(shí)隨地碎片化學(xué)習(xí)
PHP中文網(wǎng)抖音號(hào)
發(fā)現(xiàn)有趣的

Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號(hào)

    • 登錄PHP中文網(wǎng)，和優(yōu)秀的人一起學(xué)習(xí)！
    全站2000+教程免費(fèi)學(xué)