2021-01-20

jQuery 异步ajax

1.0 JavaScript中的XMLHttpRequest对象

    XMLHttpRequest对象 从服务器上面获取数据
    function jsGetData() {
        var xmlhttp = null;
        if (window.XMLHttpRequest) {
            xmlhttp = new XMLHttpRequest();
        } else {
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.open("GET", "/jQueryAjax/getPersonInfor");  

//指定响应头
xmlhttp.send();
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
var obj = JSON.parse(xmlhttp.responseText);
console.log(obj);
document.getElementById(“txtName”).value = obj.name;
document.getElementById(“cboSex”).value = obj.sex;
document.getElementById(“txtAddress”).value = obj.address;
}
}
}
//XMLHttpRequest对象 提交页面表单数据
function jsSubmitForm() {
var name = document.getElementById(“txtName”).value;
var sex = document.getElementById(“cboSex”).value;
var address = document.getElementById(“txtAddress”).value;
if (name == “” || sex == 0 || address == “”) {
alert(“请检查数据是否完成”);
return false;
}
var data = “name=” + name + “&sex=” + sex + “&address=” + address;
var xmlhttp = null;
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else {
xmlhttp = new ActiveXObject(“Microsoft.XMLHTTP”);
}
xmlhttp.open(“post”, “/jQueryAjax/GetData”);
//指定响应头
xmlhttp.setRequestHeader(“Content-type”, “application/x-www-form-urlencoded”);
xmlhttp.send(data);
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
console.log(xmlhttp.responseText);
}
}
}

1.1jQuery中的$.ajax({settings})方法

        $.ajax({settings});
            type:类型，"POST"或"GET",默认值为"GET"
            url:发送请求的地址
            async:设置异步，(默认: true) 默认设置下，所有请求均为异步请求。如果需要发送同步请求，
                  请将此选项设置为 false。注意，同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行。
            data:是一个对象，连同请求发送到服务器的数据
            dataType:预期服务器返回的数据类型,如果不指定，jQuery将自动根据http包MIME信息来智能判断,
                     一般我们采用json格式，可以设置为"json"
            success:是一个方法，请求成功后的回调函数，传入返回后的数据，以及包含成功代码的字符串
            error:是一个方法，请求失败是调用此函数，传入XMLHttpRequest对象
    jQuery中ajax方法从服务器上获取数据

    function jqGetData() {
        $.ajax({
            type: "get",
            url: "/jQueryAjax/getPersonInfor",
            async:true,//如果设置的值为true则可以省略该行代码
            dataType: "json",
            success: function (data) {
                console.log(data);//js对象
                $("#txtName").val(data.name);
                $("#cboSex").val(data.sex);
                $("#txtAddress").val(data.address);
            }
        })
    }
    jQuery中ajax方法将表单数据提交给服务器

1.2表单序列化

        serialize() 序列表单内容为字符串，用于 Ajax 请求
        serializeArray() 序列化表单元素 (类似 '.serialize()' 方法) 返回 JSON 数据结构数据。
            注意：此方法返回的是JSON对象而非JSON字符串。需要使用插件或者第三方库进行字符串化操作
            返回的JSON对象是由一个对象数组组成的，其中每个对象包含一个或两个名值对——name参数和value参数
    */
    function jqSubmitForm() {
        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();
        var arrData = $("#myform").serializeArray();
        console.log(serData);
        console.log(arrData);
        $.ajax({
            type: "post",
            url: "/jQueryAjax/getDataByFormCollection",
            data: arrData,
            //dataType:'json'
            success: function (msg) {
                alert(msg);
            },
            error: function (xmlhttp) {
                console.log(xmlhttp);
            }
        })
    }

1.0 jQuery中的$.get()方法

        语法：$.get(url, [data], [callback], [type])
        描述：通过远程 HTTP GET 请求载入信息。
            这是一个简单的 GET 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数，请使用 $.ajax。
        参数说明：
            url:发送请求地址。
            data:待发送 Key/value 参数。
            callback:发送成功时回调函数。
            type:返回内容格式，xml, html, script, json, text, _default。
    
    //使用$.get()方法从服务器上获取数据
    function getFun() {
        $.get("/jQueryAjax/getPersonInfor", function (data) {
            //console.log(data);
            $("#txtName").val(data.name);
            $("#cboSex").val(data.sex);
            $("#txtAddress").val(data.address);
        }, "json");
    }

1.1 jQuery中的$.post()方法语法：$.post(url, [data], [callback], [type])
描述：通过远程 HTTP POST 请求载入信息。
这是一个简单的 POST 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数，请使用 $.ajax。
参数说明：
url:发送请求地址。
data:待发送 Key/value 参数。
callback:发送成功时回调函数。
type:返回内容格式，xml, html, script, json, text, _default。

    function postFun() {
        var strname = $("#txtName").val();
        var strsex = $("#cboSex").val();
        var straddress = $("#txtAddress").val();
        if (strname == "" && strsex == 0 && straddress == "") {
            alert("请检查表单是否填写完毕！");
            return false;
        }
        var frmData = $("#myform").serializeArray();

//$.post("/jQueryAjax/getDataByRequest", { name: strname, sex: strsex, address: straddress }, function (msg) {
// alert(msg);
//});
KaTeX parse error: Expected 'EOF', got '}' at position 117: … }); }̲ 1.3 jQuery中的.getJSON()方法

        语法：$.getJSON(url, [data], [callback])
        描述：通过 HTTP GET 请求载入JSON数据
        参数说明：
            url:发送请求地址。
            data:待发送 Key/value 参数。
            callback:发送成功时回调函数。
    function getJSONFun() {
        var name = $("#txtName").val();
        var sex = $("#cboSex").val();
        var address = $("#txtAddress").val();
        if (name == "" && sex == 0 && address == "") {
            alert("请检查表单是否填写完毕！");
            return false;
        }
        var frmData = $("#myform").serializeArray();
        //$.getJSON()方法只能接受返回值为json的数据
        $.getJSON("/jQueryAjax/getDataByEntityClass", frmData, function (msg) {
            console.log(msg);
            alert(msg);
        });
    }