javascript
学习笔记（九）——JSON 和 AJAX
文章目錄
- 一、JSON
- 1.1、JSON 是什么？
- 1.2、JSON 字符串轉(zhuǎn) JS 對(duì)象
- 1.3、JS 對(duì)象轉(zhuǎn) JSON 字符串
- 二、前后端交互
- 三、AJAX
- 3.1、什么是 AJAX ？
- 3.2、AJAX 使用
一、JSON
1.1、JSON 是什么？
JSON(JavaScript Object Notation): 就是一個(gè)特殊格式的字符串， 這個(gè)字符串可以被任意的語(yǔ)言所識(shí)別，而且可以轉(zhuǎn)換為任意語(yǔ)言中的對(duì)象。主要用于數(shù)據(jù)的交互。
JSON 值可以是：
注意：
① 字符串嵌套：單引號(hào)套雙引號(hào)，雙引號(hào)套單引號(hào)
② json和js對(duì)象的格式一樣，只不過(guò)json字符串中屬性名必須要加雙引號(hào)，其它和js語(yǔ)法一致，如：
1.2、JSON 字符串轉(zhuǎn) JS 對(duì)象
JSON 函數(shù) parse() 可用于將 JSON 字符串轉(zhuǎn)換為 JavaScript 對(duì)象。
示例：
var obj1 = '[{"name":"小明"},{"name":"小習(xí)"}]'; var js = JSON.parse(obj1); console.log(typeof js); console.log(js[1].name); console.log(js[0].name);結(jié)果：
object 小習(xí) 小明1.3、JS 對(duì)象轉(zhuǎn) JSON 字符串
JSON 函數(shù) stringify() 可用于將 JS 對(duì)象轉(zhuǎn)換為 JSON 字符串。
示例：
var obj1 = [{name:"小明"},{name:"小習(xí)"}];//這里屬性名name可加雙引號(hào)也可以不加 var js = JSON.stringify(obj1); console.log(typeof js); console.log(js); //注意這里轉(zhuǎn)為JSON字符串后，屬性名自動(dòng)加了雙引號(hào)結(jié)果：
string [{"name":"小明"},{"name":"小習(xí)"}]二、前后端交互
示例：
python代碼：
html代碼：
(注意這里代碼我就寫重要的部分) <body><form action="/" method="post">請(qǐng)?jiān)谳斎肟騼?nèi)分別輸入數(shù)據(jù)：<input type="text" name="numone">+<input type="text" name="numtwo">=<input type="submit" id="btn" value="提交"></form> </body>訪問(wèn)步驟:
注意：
使用表單的方式提交，如果需要更新內(nèi)容，必需重載整個(gè)網(wǎng)頁(yè)面。
三、AJAX
異步：調(diào)用不會(huì)立即得到結(jié)果，而是在調(diào)用方給出結(jié)果之前，先做其他的某些事情。
同步：調(diào)用某一個(gè)東西，調(diào)用方必須要等到結(jié)果之后才會(huì)繼續(xù)往下執(zhí)行。
3.1、什么是 AJAX ？
AJAX 全稱 Ansync JavaScript and XML，是一門異步的加載技術(shù)，局部刷新。
AJAX = 異步 JavaScript 和 XML。
AJAX 是一種用于創(chuàng)建快速動(dòng)態(tài)網(wǎng)頁(yè)的技術(shù)。
通過(guò)在后臺(tái)與服務(wù)器進(jìn)行少量數(shù)據(jù)交換，AJAX 可以使網(wǎng)頁(yè)實(shí)現(xiàn)異步更新。這意味著可以在不重新加載整個(gè)網(wǎng)頁(yè)的情況下，對(duì)網(wǎng)頁(yè)的某部分進(jìn)行更新。
傳統(tǒng)的網(wǎng)頁(yè)（不使用 AJAX）如果需要更新內(nèi)容，必需重載整個(gè)網(wǎng)頁(yè)面。
3.2、AJAX 使用
Ajax的使用分為原生和jq兩種，需要掌握的jq的，原生了解就行。
書寫格式：
$.ajax({//數(shù)據(jù)提交格式 post 或 get"type":"post",//后臺(tái) url 前端程序訪問(wèn)的路徑"url":"/", //傳出的數(shù)據(jù) name:自己去的名字"data":{"name1":數(shù)據(jù)1,"name2":數(shù)據(jù)1···},//服務(wù)器成功返回?cái)?shù)據(jù)data"success":function(data){·····} });示例(post方式提交)：
（咳咳，求兩數(shù)之和，其實(shí)要寫的話挺簡(jiǎn)單，這里就當(dāng)是用來(lái)做前后端交互的簡(jiǎn)單示例）
python代碼：
html代碼：
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>示例</title><style>input{width: 50px;}</style></head><body>計(jì)算兩數(shù)之和：<br><input type="text">+<input type="text">=<input type="text"><button id="btn">計(jì)算</button><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script><script>var inp = $("input");$("#btn").click(function () {var data1 = inp.eq(0).val();var data2 = inp.eq(1).val();//傳遞值$.ajax({//數(shù)據(jù)提交格式 post 和 get"type":"post",//后臺(tái) url 這里注意和服務(wù)端一致"url":"/",//傳出的數(shù)據(jù)"data":{"data1":data1,"data2":data2},"success":function(data){inp.eq(2).val(data.sum)}});});</script></body> </html>結(jié)果：
示例(get方式提交)：
python代碼：
html代碼：
(相比post提交，這里只要修改一點(diǎn)代碼，我就不全寫了) $.ajax({//數(shù)據(jù)提交格式 post 和 get"type":"get",//后臺(tái) url 這里注意和服務(wù)端一致"url":"/r",//傳出的數(shù)據(jù)"data":{"data1":data1,"data2":data2},"success":function(data){inp.eq(2).val(data.sum)} });(這里結(jié)果我就不演示了，結(jié)果和用post方式提交一樣)
注意：正常來(lái)講我們還是用 post 提交方式好，因?yàn)間et方式會(huì)在地址欄顯示請(qǐng)求信息，但是地址欄能容納的信息有限，約為4-5kb，若請(qǐng)求數(shù)據(jù)過(guò)大則容易出錯(cuò)，而post不會(huì)。故使用post方式可以保證信息的安全。
《新程序員》：云原生和全面數(shù)字化實(shí)踐50位技術(shù)專家共同創(chuàng)作，文字、視頻、音頻交互閱讀總結(jié)
以上是生活随笔為你收集整理的学习笔记（九）——JSON 和 AJAX的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 学习笔记（八）——jQuery（二）
- 下一篇： 拓展小知识（一）——使用 CSS 和 J