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