jQuery中ajax post() 方法的使用实例

JavaScript中的jQuery库提供了很多强大的功能，其中之一就是jQuery.ajax()方法。这个方法用于在后台服务器与浏览器之间发送HTTP请求，获取服务器返回的数据。 它支持多种HTTP请求类型，例如GET、POST、PUT、DELETE等。本文主要介绍使用jQuery中的ajax post()方法的方法和实例。

语法：

jQuery.post(url,data,callback);

参数说明：

url：表示发送请求的服务器web地址，可以是绝对或相对路径。

data：可选，表示发送请求时携带的数据。可以是字符串、对象或数组。（数据会被转换成查询字符串发送到服务器）

callback：可选，表示请求成功后回调函数。

注意：url参数和data参数可以调换位置，但是callback参数必须放在最后。

jQuery ajax post 方法实例

1.向服务器发送请求，不带参数

   $("#btn").click(function() {

       $.post("test.php", 

       function(result){

          $("span").html(result);

       });

   });

该实例向服务器发送url为“test.php”的请求，服务器返回结果存储在result变量中。最后使用jQuery的html()方法修改显示的文本值。

2.向服务器发送请求，带有参数

   $("#btn").click(function() {

       var name=$("#name").val();

       var age=$("#age").val();

       $.post("test.php",

       {

         name:name,

         age:age

       },

       function(result){

          $("span").html(result);

       });

   });

该实例从input元素中获取姓名和年龄，然后向服务器发送url为“test.php”的请求，并带有name和age参数。

3.向服务器发送请求，带有回调函数

   $("#btn").click(function() {

       var name=$("#name").val();

       var age=$("#age").val();

       $.post("test.php",

       {

         name:name,

         age:age

       },

       function(result){

          alert(result);

       });

   });

该实例从input元素中获取姓名和年龄，然后向服务器发送url为“test.php”的请求，并带有name和age参数。当请求成功后，调用了一个alert方法来显示服务器返回结果。

4.使用json格式作为post数据

   var userinfo = {

       "name": "张三",

       "age": "20",

       "sex":"男"

   };

   $.post(url, JSON.stringify(userinfo), function(data,status){

            //此处为处理回调函数

   });

该实例中以JSON格式发送post数据请求，将userinfo转换成JSON字符串。

总结：

ajax post()方法是向服务器发送HTTP post请求的一种方法，可以与服务器交互、获取数据、更新页面等。在jQuery中，我们可以使用$.post()方法，它可以在请求中向服务器传递数据，从服务器获取数据，并以HTML、JSON或XML格式返回数据。这个方法是非常有用的，可以帮助我们实现动态的用户界面，在不刷新整个页面的情况下更新页面内容。