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, or text)
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

load() 方法從伺服器載入數據,並把傳回的資料放入被選元素中。

$(selector).load(URL,data,callback);

必要的
URL 參數規定您希望載入的 URL。 可選的
data 參數規定與請求一同發送的查詢字串鍵/值對集合。 可選的
callback 參數是 load() 方法完成後所執行的函數名稱。

這是範例檔案("demo.txt")的內容:

<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");