jQuery中post方法用法实例

简介

jQuery提供的post方法是用于发送POST请求的，可以实现与服务器的数据交互。本文将详细介绍jQuery中post方法用法的实例。

语法

$.post(url, data, success, dataType)

• url：必需，规定发送请求的url地址。
• data：可选，规定发送到服务器的数据。
• success：可选，成功时的回调函数。
• dataType：可选，规定预期的响应数据类型。

实例1

请求数据

$.post("http://example.com/api/data",
    {
        name: "John",
        age: 30
    },
    function(data, status){
        alert("数据：" + data + "\n状态：" + status);
    });

说明：

• 请求数据的地址为http://example.com/api/data。
• 发送数据为name和age两个参数，值分别为"John"和30。
• 请求成功后的回调函数alert会输出请求到的数据和状态。

返回Json数据

$.post("http://example.com/api/data",
    function(data, status){
        $.each(data, function(i, item){
            alert("姓名：" + item.name + "\n年龄：" + item.age);
        });
    },
    "json");

说明：

• 请求数据的地址为http://example.com/api/data。
• dataType设置为"json"，向服务端发出的请求预期会返回JSON格式的数据。
• 请求成功后的回调函数$.each会按照JSON数据结构遍历每一个元素，并输出姓名和年龄。

实例2

发送表单数据

$('form').submit(function(){
    $.post(
        $(this).attr('action'),
        $(this).serialize(),
        function(data){
            $('form').html(data);
        }
    );
    return false;
});

说明：

• 表单被提交时会发送POST请求。
• $(this).attr('action')获取表单的目标地址。
• $(this).serialize()将表单内的所有数据序列化为字符串，以便发送请求。
• 请求成功后的回调函数$('form').html(data)将返回的HTML内容更新到表单。

发送Json数据

var data = {
    "name": "John",
    "age": 30
};
$.post(
    "http://example.com/api/data",
    JSON.stringify(data),
    function(result){
        alert(result);
    }
);

说明：

• 发送数据格式为JSON，需要使用JSON.stringify将数据序列化为字符串。
• 请求成功后的回调函数alert输出结果。

以上两个例子可以用来增强表单提交体验或者异步更新本页面数据。

结论

使用jQuery的post方法可以向服务器发送POST请求，用法灵活，可以设置请求地址、发送数据、数据格式等参数，非常实用。