javascript
5月16 JSON的一些知识点及AJAX的应用
什么是JSON?
JSON（JavaScript Object Notation）是一種輕量級(jí)的數(shù)據(jù)交換語言，以文字為基礎(chǔ)，（文本數(shù)據(jù)交換格式）。JSON簡單說就是javascript中的對(duì)象和數(shù)組，所以這兩種結(jié)構(gòu)就是對(duì)象和數(shù)組兩種結(jié)構(gòu)，通過這兩種結(jié)構(gòu)可以表示各種復(fù)雜的結(jié)構(gòu)，其可以將JavaScript 對(duì)象中表示的一組數(shù)據(jù)轉(zhuǎn)換為字符串，然后就可以在函數(shù)之間輕松地傳遞這個(gè)字符串，JSON采用完全獨(dú)立于程序語言的文本格式，但是也使用了類C語言的習(xí)慣（包括C、C++、C#、Java、JavaScript、Perl、Python等）。這些特性使JSON成為理想的數(shù)據(jù)交換語言。
?JSON 使用 JavaScript 語法來描述數(shù)據(jù)對(duì)象，但是 JSON 仍然獨(dú)立于語言和平臺(tái)。JSON 解析器和 JSON 庫支持許多不同的編程語言。
對(duì)象：對(duì)象在js中表示為“{}”擴(kuò)起來的內(nèi)容，數(shù)據(jù)結(jié)構(gòu)為 {key：value,key：value,...}的鍵值對(duì)的結(jié)構(gòu)，在面向?qū)ο蟮恼Z言中，key為對(duì)象的屬性，value為對(duì)應(yīng)的屬性值，所以很容易理解，取值方法為 對(duì)象.key 獲取屬性值，這個(gè)屬性值的類型可以是 數(shù)字、字符串、數(shù)組、對(duì)象幾種，還可以包含另一個(gè)json。
<script type="text/javascript"> $(document).ready(function(e) {var a = {coode:"p001",name:"張三",age:30,json:{aa:"aa",bb:"bb"},shuzu:new Array(1,2,3,4)};alert(a.shuzu);alert(a.json.aa); });
AJAX的一些用法及例子
概念：
AJAX = Asynchronous JavaScript and XML（異步的 JavaScript 和 XML）。
AJAX 不是新的編程語言，而是一種使用現(xiàn)有標(biāo)準(zhǔn)的新方法。
AJAX 是與服務(wù)器交換數(shù)據(jù)并更新部分網(wǎng)頁的藝術(shù)，在不重新加載整個(gè)頁面的情況下。
注意事項(xiàng)：
調(diào)用AJAX使用json數(shù)據(jù)，里面包含url：處理頁面，data：傳遞數(shù)據(jù)，提交方式：一般選用post，回調(diào)函數(shù)：ajax調(diào)用成功之后返回執(zhí)行該方法，ajax的返回?cái)?shù)據(jù)類型有TEXT,JSON,XML，現(xiàn)在的例題是關(guān)于TEXT的。
顯示頁面
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>登錄用戶名</title> <script src="../jquery-1.11.2.min.js"> </script> </head><body> <div><input type="text" id="uid" /><span id="xinxi"></span></div></body> <script type="text/javascript"> $(document).ready(function(e) {$("#uid").blur(function(){//失去焦點(diǎn)觸發(fā)//把文本的值取出來var uid = $(this).val();//調(diào)用ajax 里面使用json數(shù)據(jù)$.ajax({url:"ChuLi1.php",//處理頁面data:{u:uid},//傳遞的數(shù)據(jù)，json數(shù)據(jù)type:"POST",//提交方式dataType:"TEXT",//返回?cái)?shù)據(jù)類型//返回?cái)?shù)據(jù)類型有：TEXT,JSON,XMLsuccess: function(data){//回調(diào)函數(shù) AJAX調(diào)用成功之后返回執(zhí)行該方法 if(data=="OK"){var str = "該品種還不存在";$("#xinxi").html(str);//相當(dāng)于把他寫進(jìn)span標(biāo)簽中}else{var str = "<span style='color:red'>該品種已經(jīng)存在!</span>"; $("#xinxi").html(str);}}})})});</script> </html>處理頁面，DBDA.class.php依然和之前的一樣
<?php //接收傳過來的參數(shù) $uid = $_POST["u"]; //查數(shù)據(jù)庫 include("../test0506/DBDA.class.php"); $db = new DBDA();$sql = "select count(*) from fruit where Name = '{$uid}'";$attr = $db->Query($sql);if($attr[0][0]==1)//等于1表示存在 {echo "NO"; } else {echo "OK"; }
仿照登錄界面寫的水果名及其代號(hào)名稱的驗(yàn)證
?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>登錄</title> <script src="../jquery-1.11.2.min.js"> </script> </head><body> <h1>驗(yàn)收</h1> <div>水果品種：<input type="text" id="tex" /></div><br /><div>代號(hào) ：<input type="text" id="psw" /></div><br /> <div><input type="button" id="btn" value="登錄" /></div><div id="test" style="width:100px; height:100px; background-color:#F30"></div></body> </html> <script type="text/javascript"> $(document).ready(function(e) {$("#btn").click(function(){var tex = $("#tex").val();var psw = $("#psw").val();$.ajax({url:"ChuLi2.php",data:{t:tex,p:psw},type:"POST",dataType:"TEXT",success: function(data){if(data=="OK"){window.location = "test1.php"; }else{alert("輸入有誤"); }}});}) });</script>處理頁面：ChuLi2.php
<?php$text = $_POST["t"]; $psw = $_POST["p"];include("../test0506/DBDA.class.php"); $db = new DBDA();$sql = "select count(*) from fruit where Name='{$text}' and Ids='{$psw}'";$attr = $db->Query($sql);if($attr[0][0]==1)//查到數(shù)據(jù) {echo "OK"; } else {echo "NO"; }
ajax的另一個(gè)數(shù)據(jù)：async默認(rèn)是異步的，里面有兩個(gè)參數(shù)false，true。async:false//同步，async:true//異步
? 在ajax中同步和異步的概念：AJAX：同步：AJAX必須處理完才能繼續(xù)向下執(zhí)行。異步：AJAX在處理數(shù)據(jù)的同時(shí)代碼繼續(xù)往下執(zhí)行
? 數(shù)據(jù)傳輸：同步：傳輸必須等到接收方接收到，才能傳下一個(gè)。異步：傳輸不用等到對(duì)方接收就可以繼續(xù)傳遞。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>同步異步練習(xí)</title> <script src="../jquery-1.11.2.min.js"> </script> </head><body> <div id="test" style="width:100px; height:100px; background:#F00"></div> </body> </html> <script type="text/javascript"> $(document).ready(function(e) {//AJAX默認(rèn)是異步$("#test").click(function(){$("#test").html("");//點(diǎn)擊之前清除$.ajax({async:false,//變?yōu)橥紸JAXurl:"ChuLi3.php",dataType:"TEXT",success: function(data){$("#test").html(data)//給test加div}});alert($("#shuju").html());})});</script>處理頁面：ChuLi3.php
<?phpecho "<div id='shuju'>hello world</div>";?
另外連接數(shù)據(jù)庫時(shí)會(huì)出現(xiàn)的一些錯(cuò)誤：例如fetch_all()或是fetch_assoc()等出現(xiàn)都是SQL語句出現(xiàn)問題，方法就是去輸出SQL語句找錯(cuò)誤
如果是在AJAX調(diào)用時(shí)出現(xiàn)錯(cuò)誤會(huì)把所有的代碼都輸出那時(shí)候就得去里面提前錯(cuò)誤
?
?
?
?
轉(zhuǎn)載于:https://www.cnblogs.com/Duriyya/p/5497608.html
總結(jié)
以上是生活随笔為你收集整理的5月16 JSON的一些知识点及AJAX的应用的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Linux 系统检测工具
- 下一篇： [Effective JavaScrip