首页 > 编程笔记 > Web笔记 > jQuery Ajax请求

jQuery $.post()方法的用法

在 jQuery 中,除了 $.get() 方法,我们还可以使用 $.post() 方法来通过 Ajax 向服务器请求获取数据。

$.get() 方法和 $.post() 方法在使用方式上差不多,不过两者还是有一定的区别:
语法:

$.post(url, data, fn, type)

$.post() 方法有 4 个参数,如表 1 所示。

表 1:$.post() 方法的 4 个参数
参数 说明
url 必选参数,表示被加载的页面地址
data 可选参数,表示发送到服务器的数据
fn 可选参数,表示请求成功后的回调函数
type 可选参数,表示服务器返回的内容格式

接下来举一个例子,首先我们需要准备两个文件:一个是扩展名为 php 的文件,另一个是扩展名为 html 的文件。

扩展名为 php 的文件代码如下:
  1. <?php
  2. header("Content-Type:text/html; charset=utf-8");
  3. echo "<div class='item'><h4>{$_REQUEST['username']}:</h4><p>{$_REQUEST['content']}</p></div>";
  4. ?>

扩展名为 html 的文件代码如下:
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8" />
  5. <style type="text/css">
  6. .item h4{margin:5px;background-color:#F1F1F1;}
  7. .item p{margin:0;text-indent:2em;}
  8. </style>
  9. <script src="js/jquery-1.12.4.min.js"></script>
  10. <script>
  11. $(function(){
  12. $("#send").click(function(){
  13. $.post("get.php", {
  14. username : $("#name").val() ,
  15. content : $("#content").val()
  16. }, function (data, textStatus){
  17. $("#comment").html(data); // 把返回的数据添加到页面上
  18. }
  19. );
  20. })
  21. })
  22. </script>
  23. </head>
  24. <body>
  25. <form>
  26. <fieldset>
  27. <legend>小伙伴们,快快到碗里来!</legend>
  28. <p><label>昵称: <input id="name" type="text" /></label></p>
  29. <p><label>内容: <textarea name="content" id="content" rows="4" cols="30"></textarea></label></label></p>
  30. <p><input id="send" type="button" value="提交" /></p>
  31. </fieldset>
  32. </form>
  33. <h3>已有评论:</h3>
  34. <div id="comment" ></div>
  35. </body>
  36. </html>
预览效果如图 1 所示。
默认效果
图 1:默认效果

我们在表单中输入内容,点击【提交】按钮后,就会将表单内容通过 Ajax 传给后端服务器,结果如图 2 所示。


图 2:提交内容后的效果

上面这个例子与 $.get() 方法的例子是一样的,只不过我们这里是使用 $.post() 方法来实现的。

所有教程

优秀文章