~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
開發工具與關鍵技術：Visual Studio 2015 &&jQuery
作者：韋永桂
撰寫時間：2020 年05 月 05 日
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
1、從服務器上獲取資料到頁面【jQuery】
functionjqGetData() {
$.ajax({
type: "get",【型別】
url: "/jQueryAjax/getPersonInfor",【發送請求的地址】
async: true,【設定異步】
dataType: "json"【預期服務器回傳的資料型別】
success: function (data) {【是一個物件，連同請求發送到服務器的資料】
$("#txtName").val(data.name);
$("#cboSex").val(data.sex);
$("#txtAddress").val(data.address);
}
})
}
2、將頁面資料提交給服務器【jQuery】
functionjqSubmitForm() {
var name = $("#txtName").val();
var sex = $("#cboSex").val();
var address = $("#txtAddress").val();
if (name == "" || sex == 0|| address == "") {
alert("請檢查資料是否完成");
return false;
}
var frmdata = "name=" +name + "&sex=" + sex + "&address=" + address;
var serData = $("#myform").serialize();【serialize() 序串列單內容為字串，用于 Ajax 請求
】
var arrData = $("#myform").serializeArray();【serializeArray() 序列化表單元素 (類似 '.serialize()' 方法) 回傳 JSON 資料結構資料】
console.log(serData);
console.log(arrData);
$.ajax({
type: "post",【型別】
url: "/jQueryAjax/getDataByFormCollection",【發送請求的地址】
data: arrData, 【是一個物件，連同請求發送到服務器的資料】
success: function (msg) {【success:是一個方法，請求成功后的回呼函式，傳入回傳后的資料，以及包含成功代碼的字串】
alert(msg);
},error: function (xmlhttp) {
console.log(xmlhttp);
}
})
}
3、jQuery中的$.get()方法和$.post()方法
語法：$.get或$.post (url, [data], [callback],[type])
描述：通過遠程 HTTP GET或POST 請求載入資訊
url:發送請求地址。
data:待發送 Key/value 引數。
callback:發送成功時回呼函式。
type:回傳內容格式，xml, html,script, json, text, _default。
使用$.get()或$.post方法從服務器上獲取資料
functiongetFun() {
$.get("/jQueryAjax/getPersonInfor",function (data) {
$("#txtName").val(data.name);
$("#cboSex").val(data.sex);
$("#txtAddress").val(data.address);
}, "json");
}
functionpostFun() {
$.post("/jQueryAjax/getDataByRequest",frmData, function (msg) {
$("#txtName").val();
$("#cboSex").val();
$("#txtAddress").val();
},"json");
}
uj5u.com熱心網友回復：
這個好，收藏了。
uj5u.com熱心網友回復：
收藏著備用。轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/51605.html
標籤：JavaScript
上一篇：通過SNI提供的主機名和通過HTTP提供的主機名不同
下一篇：兩個網頁間隔10s來回自動切換