JQuery Ajax Post简介
jQuery Ajax Post方法向服务器发送异步HTTP POST请求，从服务器上加载数据。Ajax（Asynchronous JavaScript And XML）是指与服务器交换数据，更新网页的一部分，而不需要重新加载整个页面。这个方法是其中之一，通过发送HTTP POST请求，我们可以直接从服务器上加载数据到网页上。ajax()post方法的快捷方式是$.post()。
语法
$.post(url, [data], [callback(data, status, xhr)], [type])
其中。
url指的是发送请求以获取数据的URL。
数据是一个可选的参数，代表与请求一起被发送到服务器的json数据。
Callback (data, status,xhr)也是一个可选参数，指的是在发送请求并成功加载数据后要执行的函数。
- data指的是服务器的响应中包含的数据
- status指的是请求的状态，如成功、错误、超时、未修改等。
- xhr指的是XMLHttpRequest对象。
type也是一个可选的参数，它指定了将从服务器返回的数据类型，如json, jsonp, xml, html, script, 和 text。
jQuery Ajax Post是如何工作的？
jQuery Ajax Post方法，或简称为$.post()方法，使用HTTP POST方法向Web服务器提出异步请求，并从服务器加载数据作为HTML，XML，JSON等形式的响应。
下面是一个使用ajax向服务器发送POST请求的例子
$.ajax({ type: "POST", url: url, data: data, dataType: ‘json’, success: function(){ //success code here }, error: function(){ //error code here } });
在上述格式中，第一个参数是 "类型"，它代表了调用服务器的类型；在这里，它是POST，向服务器发送HTTP POST请求。
第二个参数是url，我们要向其发送HTTP POST请求以提交我们的数据。
第三个参数是要通过POST请求提交给服务器的数据。
第四个参数是成功回调函数，只有当请求成功并且服务器返回响应时才会调用。反过来，回调函数有三个参数：数据、状态和jqXHR，其中数据参数包含服务器的响应。
如果AJAX POST请求失败并抛出一个错误，就会调用一个错误回调。
最后一个参数是dataType，这里指定为JSON。这意味着，一旦POST请求成功，服务器会以JSON格式返回响应。
jQuery Ajax Post的例子
现在让我们看看如何使用post()方法来发布数据并从服务器上获得响应。
例子 #1
下面给出的是一个实现jQuery Ajax Post方法的例子。
代码。
<html> <head> <title>jQuery Ajax POST Example</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/js/bootstrap.min.js"></script> <script type="text/javascript" language="javascript"> $(document).ready(function () { $(".bin").click(function () { var datastring = $("#Form").serialize(); $.ajax({ type: "POST", url: "https://httpbin.org/post", data: datastring, dataType: "json", success: function (data) { var obj = JSON.stringify(data); $(".result").append( '</textarea></li><li class="list-group-item active">Result</li><li class="list-group-item">Name: ' + data["form"]["name"] + '</li><li class="list-group-item">Email: ' + data["form"]["email"] + '</li><li class="list-group-item">Gender: ' + data["form"]["multiple"] + '</li><li class="list-group-item">Comments: ' + data["form"]["text"] + "</li></ul></div>" ); }, error: function () { $(".result").append("Error occured"); }, }); }); }); </script> <style> #divstyle { width: 600px; height: 550px; padding-top: 20px; padding-left: 5px; font-size: 16px; text-align: center; color: maroon; background-color: cadetblue; } </style> </head> <body> <div id="divstyle"> <div class="container text-center"> <form id="Form"> <div class="form-group"> <label for="FormControlInput">Enter your name</label> <input type="name" name="name" class="form-control" id="FormControlInput" /> </div> <div class="form-group"> <label for="FormControlInput">Enter your email id</label> <input type="email" name="email" class="form-control" id="FormControlInput" /> </div> <div class="form-group"> <label for="FormControlInput">Enter your gender</label> <select multiple name="multiple" class="form-control" id="FormControlSelect" > <option selected>Male</option> <option>Female</option> </select> </div> <div class="form-group"> <label for="FormControlInput">Enter your comments</label> <textarea name="text" class="form-control" id="FormControlTextarea" rows="3" ></textarea> </div> <button type="button" class="btn btn-primary bin">Submit</button> </form> <br /> <div class="result"></div> </div> </div> </body> </html>
输出。
- 当上述代码被执行时，下面的屏幕显示。
- 在这个例子中，表单数据使用AJAX POST请求被发布到服务器上，结果被放到一个div中。
- 返回的响应是JSON格式，在ajax调用的dataType中指定。
示例#2
下面是另一个实现jQuery Ajax Post方法的例子
代码。
<!DOCTYPE html> <html> <head> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js" ></script> <script type="text/javascript"> jQuery("document").ready(function () { jQuery(".FormBox1").submit(function () { event.preventDefault(); var fields = jQuery("input", this).serializeArray(); jQuery("#response").empty(); jQuery.each(fields, function (i, field) { jQuery("#response").append(field.value + " "); }); jQuery .ajax({ method: "POST", url: "sampleData.php", data: fields, }) .done(function (message) { console.log("Data Saved: " + message); }); }); }); </script> <style> #response{ color: blue; } #divstyle { width: 350px; height: 450px; padding-top: 20px; font-size: 18px; text-align: center; color: maroon; background-color: cadetblue; } </style> </head> <body> <div id ="divstyle"> <div class="container"> <form class="FormBox1"> <dl> <dd><input type="hidden" name="name" value="<?php echo ($_SESSION['myname']) ?>"> <input type="hidden" name="approve" value="Hi"> <input type="hidden" name="id" value="<?php echo $_GET['id'];?>"/> <dt><p>Enter your name</p> <dd><input type="text" name="Fullname" id="text"> <dt><p>Enter your gender</p> <dd><select name="gender" id="text"> <option value="0">Gender</option> <option value="1">Male</option> <option value="2">Female</option> </select> <dt><p>Enter your DOB</p> <dd><input type="date" name="start" id="text"> <dt><p>Enter your DOJ</p> <dd><input type="date" name="end" id="text"><hr> <dt><button type="submit" name="submit" class="btn" >Next</button><span id="response"></span></td> </dl> </div> </div> </body> </html>
输出
- 当上述代码被执行时，下面的屏幕显示。
- 在点击 "Next "按钮时，表单数据被使用Ajax Post方法发布，并显示以下屏幕。
总结
- 在这篇文章中，我们讨论了Ajax Post的jQuery实现。
- Ajax指的是与网络服务器交换数据，因此可以使网页被异步更新。
- Ajax Post指的是向web服务器发送同步的HTTP POST请求，从服务器上加载数据。
推荐文章
这是一个关于JQuery Ajax Post的指南。在这里，我们讨论了jQuery Ajax Post是如何工作的，以及与代码和输出有关的例子。你也可以看看下面的文章来了解更多------。
