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