Jquery中ajax提交表单几种方法(get、post两种方法)

使用 jQuery 发送 Ajax 请求可以轻松地处理表单的提交，一般使用的是 get 和 post 两种方法。这里将详细讲解这两种方法的使用。

1. get方法

1.1 语法：

$.get(url, [data], [callback], [type]);

1.2 参数说明：

• url：请求的地址；
• data：（可选）要发送给服务器的数据；
• callback：（可选）当请求成功时要执行的函数；
• type：（可选参数）服务器返回的数据类型。

1.3 示例：

HTML 代码：

<input type="button" id="getBtn" value="使用get方法提交表单" />
<form id="myForm" action="" method="get">
  <input type="text" name="username" value="" /><br>
  <input type="password" name="password" value="" /><br>
</form>

JS 代码：

$(document).ready(function(){
    $("#getBtn").click(function(){
        var formData = $("#myForm").serialize();
        $.get("login.php", formData, function(data,status){
            alert("数据：" + data + "\n状态：" + status);
        });
    });
});

2. post方法

2.1 语法：

$.post(url, [data], [callback], [type]);

2.2 参数说明：

• url：请求的地址；
• data：（可选）要发送给服务器的数据；
• callback：（可选）当请求成功时要执行的函数；
• type：（可选参数）服务器返回的数据类型。

2.3 示例：

HTML 代码：

<input type="button" id="postBtn" value="使用post方法提交表单" />
<form id="myForm" action="" method="post">
  <input type="text" name="username" value="" /><br>
  <input type="password" name="password" value="" /><br>
</form>

JS 代码：

$(document).ready(function(){
    $("#postBtn").click(function(){
        var formData = $("#myForm").serialize();
        $.post("login.php", formData, function(data,status){
            alert("数据：" + data + "\n状态：" + status);
        });
    });
});

以上示例中，我们分别用 get 方法和 post 方法提交了一个表单，并且将表单数据通过 serialize() 方法转换为可提交的数据。

需要注意的是，get 方法是以 Ajax 传递参数的一种方式，而 post 方法是将参数封装在 HTTP 请求体中，因此在发送大量数据的时候，使用 post 方法更加合适。