ajax基於php頁面請求json資料
阿新 • • 發佈：2018-12-21
在jQuery中封裝有$.ajax方法可以直接來呼叫
·testjson.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> </style> </head> <body> <script src="jquery.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $(function() { $.ajax({ type: "get", url: "http://localhost:8080/smarty/test1.php", dataType: "json", success: function(data) { console.log(data); }, error:function(e){ console.log(e); } }); }); </script> </body> </html>
其中type為提交方式，這裡採用get提交
url，表示的是你獲取資料和傳送資料的地址，這裡用的是我自己寫的一個servlet，你也可以換成jsp ，或者txt等格式，
dataType表示的資料格式，這裡是計較的json格式 ,還有其他五種格式
- "xml"：返回 XML 文件，可用 jQuery 處理。
- "html":：返回純文字 HTML 資訊；包含的 script 標籤會在插入 dom 時執行。
- "script":：返回純文字JavaScript 程式碼。不會自動快取結果，除非設定了 "cache" 引數。注意：在遠端請求時(不在同一個域下)，所有 POST 請求都將轉為 GET 請求。（因為將使用 DOM 的 script標籤來載入）
- "jsonp": JSONP 格式。使用JSONP 形式呼叫函式時，如 "myurl?callback=?" jQuery 將自動替換 ? 為正確的函式名，以執行回撥函式，經常被用來同主域名下不同二級域名下的跨域請求。
- "text": 返回純文字字串。
data表示資料的具體內容
success，表示服務端成功響應
error表示服務端響應不成功
test.php程式碼
<?php header("Content-Type:text/html;charset=utf-8"); header("Access-Control-Allow-Origin: *"); $data = 'var jsons = {"title":"這也是一條測試資訊","author":"mjhh","date":"2018-11-14","content":"這也是一條測試資訊！！！！！！！！！！！！！！！！！！這也是一條測試資訊！！！！！！！！！！！！！！！！！！"}'; echo $data; ?>
在跨域訪問檔案時，少了header("Access-Control-Allow-Origin: *");會直接報錯“被CORS策略阻止”
Access to XMLHttpRequest at 'http://localhost:8080/smarty/test1.php' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.