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