JSLite-Ajax
如有疑問歡迎到這些地方交流,歡迎加入JSLite.io組織團體共同開發!
Ajax
執行Ajax請求。請求位址可以是本地的或跨域的,在支援的瀏覽器中透過 HTTP access control或透過 JSONP來完成。
執行Ajax請求。
type:請求方法 ("GET", "POST")
data:(預設:none)傳送到伺服器的資料;如果是get請求,它會自動被作為參數拼接到url上。非String物件
processData (預設: true): 對於非Get請求。是否自動將 data 轉換為字串。
dataType:(json
,jsonp
,xml
,html
, ortext
)
contentType:一個額外的"{鍵:值}"對映射到請求一起發送
headers: (預設:{}): 一個額外的"{鍵:值}"對映射到請求一起發送
url :發送請求的位址
async:此參數不傳預設為true(非同步請求),false同步請求
success(cdata):請求成功之後呼叫。傳入返回後的數據,以及包含成功代碼的字串。
error(status, statusText):請求出錯時呼叫。 (超時,解析錯誤,或狀態碼不在HTTP 2xx)。
$.get
$.get(url, function(data, status, xhr){ ... }) ⇒ XMLHttpRequest
$.get( url, [data], [function(data, status, xhr){ ... }], [dataType]) ⇒ XMLHttpRequest
$.get("http://127.0.0.1/api.php?wcj=123", function(cdata) { console.log("ok", cdata) },"json") $.get("http://127.0.0.1/api.php?wcj=123",{"JSLite":4}, function(cdata) { console.log("ok", cdata) })
$.ajax(GET)
# 1.JSLite獨有....
$.ajax("GET", "http://127.0.0.1/api.php", {"wcj":"123","ok":'11'},function(cdata) { console.log("ok", cdata) })
2.通用呼叫方法
$.ajax({ type:"GET", dataType:"json", data:{"nike":"a"}, url:"http://127.0.0.1/api.php", success:function(data){ console.log("success:",data) }, error:function(d){ console.log("error:",d) } })
$.getJSON
傳送一個Ajax GET請求並解析傳回的JSON資料。方法支援跨域請求。
$.getJSON(url, function(data, status, xhr){ ... })
$.getJSON("http://127.0.0.1/api.php", function(data){ console.log(data) })
jsonp
JSONP 方式
$.ajax({ url: "http://127.0.0.1/api.php?callback", dataType: "jsonp", success: function(data) { console.log(data) } }) $.ajax({ url: 'http://localhost/api3.php', dataType: "jsonp", success: function(data) { console.log("success:2:",data) }, error:function(d){ console.log("error:",d) } })
$.post
$.post(url, [data], function(data, status, xhr){ ... }, [dataType])
$.post("http://127.0.0.1/api.php", {"nike":0},function(cdata) { console.log("ok", cdata) })
$.ajax( POST)
1.JSLite獨有....
var data = { "key": "key", "from": "from"} $.ajax("POST", "http://127.0.0.1/api.php", data,function(data) { console.log("ok", data) },"json")
2.通用呼叫方法
$.ajax({ type:"POST", dataType:"json", data:{"nike":"123","kacper":{"go":34,"to":100}}, url:"http://127.0.0.1/api.php", success:function(data){ console.log("success:",data) }, error:function(d){ console.log("error:",d) } }) $.ajax({ type:"POST", dataType:"json", data:JSON.stringify("{"nike":"123","kacper":{"go":34,"to":100}}"), url:"http://127.0.0.1/api.php", success:function(data){ console.log("success:",data) }, error:function(d){ console.log("error:",d) } }) $.ajax({ type:"POST", dataType:"json", data:JSON.stringify({"nike":"a"}), url:"http://127.0.0.1/api.php", success:function(data){ console.log("success:",data) }, error:function(d){ console.log("error:",d) } }) $.ajax({ type:"POST", data:{"nike":"a"}, url:"http://127.0.0.1/api.php", success:function(data){ console.log("success:",data) }, error:function(d){ console.log("error:",d) } }) $.ajax({ type:"POST", dataType:"json", data:{"nike":"a"}, url:"http://127.0.0.1/api.php", success:function(data){ console.log("success:",data) }, error:function(d){ console.log("error:",d) }, headers: { "Access-Control-Allow-Origin":"http://pc175.com", "Access-Control-Allow-Headers":"X-Requested-With" }, contentType: "application/json" })
$.ajaxJSONP
##已過時,使用$.ajax 代替。此方法相對
$.ajax 沒有優勢,建議不要使用。
$.ajaxJSONP(options) ⇒ 模擬 XMLHttpRequest
load() 方法從伺服器載入數據,並把傳回的資料放入被選元素中。$(selector).load(URL,data,callback);
必要的
URL 參數規定您希望載入的 URL。
可選的
data 參數規定與請求一同發送的查詢字串鍵/值對集合。
可選的
callback 參數是
load() 方法完成後所執行的函數名稱。
<h2>JSLite中AJAX的一个方法!</h2> <p id="demo">这是一个文本文件</p> // 把文件 "demo.txt" 的内容加载到指定的 <div> 元素中 $("#div1").load("demo.txt"); //把 "demo.txt" 文件中 id="div1" 的元素的内容,加载到指定的 <div> 元素中: $("#div1").load("demo.txt #p1");