當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

5月16 JSON的一些知识点及AJAX的应用

發布時間：2025/3/15 javascript 28 豆豆

生活随笔收集整理的這篇文章主要介紹了 5月16 JSON的一些知识点及AJAX的应用小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

什么是JSON?

JSON（JavaScript Object Notation）是一種輕量級的數據交換語言，以文字為基礎，（文本數據交換格式）。JSON簡單說就是javascript中的對象和數組，所以這兩種結構就是對象和數組兩種結構，通過這兩種結構可以表示各種復雜的結構，其可以將JavaScript 對象中表示的一組數據轉換為字符串，然后就可以在函數之間輕松地傳遞這個字符串，JSON采用完全獨立于程序語言的文本格式，但是也使用了類C語言的習慣（包括C、C++、C#、Java、JavaScript、Perl、Python等）。這些特性使JSON成為理想的數據交換語言。

?JSON 使用 JavaScript 語法來描述數據對象，但是 JSON 仍然獨立于語言和平臺。JSON 解析器和 JSON 庫支持許多不同的編程語言。

對象：對象在js中表示為“{}”擴起來的內容，數據結構為 {key：value,key：value,...}的鍵值對的結構，在面向對象的語言中，key為對象的屬性，value為對應的屬性值，所以很容易理解，取值方法為對象.key 獲取屬性值，這個屬性值的類型可以是數字、字符串、數組、對象幾種，還可以包含另一個json。

AJAX的一些用法及例子　

概念：

AJAX = Asynchronous JavaScript and XML（異步的 JavaScript 和 XML）。

AJAX 不是新的編程語言，而是一種使用現有標準的新方法。

AJAX 是與服務器交換數據并更新部分網頁的藝術，在不重新加載整個頁面的情況下。

注意事項：

調用AJAX使用json數據，里面包含url：處理頁面，data：傳遞數據，提交方式：一般選用post，回調函數：ajax調用成功之后返回執行該方法，ajax的返回數據類型有TEXT,JSON,XML，現在的例題是關于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(){//失去焦點觸發//把文本的值取出來var uid = $(this).val();//調用ajax 里面使用json數據$.ajax({url:"ChuLi1.php",//處理頁面data:{u:uid},//傳遞的數據，json數據type:"POST",//提交方式dataType:"TEXT",//返回數據類型//返回數據類型有：TEXT,JSON,XMLsuccess: function(data){//回調函數 AJAX調用成功之后返回執行該方法 if(data=="OK"){var str = "該品種還不存在";$("#xinxi").html(str);//相當于把他寫進span標簽中}else{var str = "<span style='color:red'>該品種已經存在!</span>"; $("#xinxi").html(str);}}})})});</script> </html>

　　處理頁面，DBDA.class.php依然和之前的一樣

<?php //接收傳過來的參數 $uid = $_POST["u"]; //查數據庫 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"; }

仿照登錄界面寫的水果名及其代號名稱的驗證

<!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>驗收</h1> <div>水果品種：<input type="text" id="tex" /></div><br /><div>代號：<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)//查到數據 {echo "OK"; } else {echo "NO"; }

　ajax的另一個數據：async默認是異步的，里面有兩個參數false，true。async:false//同步，async:true//異步

? 在ajax中同步和異步的概念：AJAX：同步：AJAX必須處理完才能繼續向下執行。異步：AJAX在處理數據的同時代碼繼續往下執行

? 數據傳輸：同步：傳輸必須等到接收方接收到，才能傳下一個。異步：傳輸不用等到對方接收就可以繼續傳遞。

　　處理頁面：ChuLi3.php

<?phpecho "<div id='shuju'>hello world</div>";

另外連接數據庫時會出現的一些錯誤：例如fetch_all()或是fetch_assoc()等出現都是SQL語句出現問題，方法就是去輸出SQL語句找錯誤

　如果是在AJAX調用時出現錯誤會把所有的代碼都輸出那時候就得去里面提前錯誤

?

轉載于:https://www.cnblogs.com/Duriyya/p/5497608.html

總結

以上是生活随笔為你收集整理的5月16 JSON的一些知识点及AJAX的应用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： Linux 系统检测工具
下一篇： (计算机组成原理)第二章数据的表示和运算