使用post()方法以POST方式从服务器发送数据，jQuery基础(五)一Ajax应用与常用插件教程-慕课网

1-5 使用post()方法以POST方式从服务器发送数据

本节编程练习不计算学习进度，请电脑登录imooc.com操作

使用post()方法以POST方式从服务器发送数据

与get()方法相比，post()方法多用于以POST方式向服务器发送数据，服务器接收到数据之后，进行处理，并将处理结果返回页面，调用格式如下：

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

参数url为服务器请求地址，可选项data为向服务器请求时发送的数据，可选项callback参数为请求成功后执行的回调函数。

例如，在输入框中录入一个数字，点击“检测”按钮，调用post()方法向服务器以POST方式发送请求，检测输入值的奇偶性，并显示在页面中，如下图所示：

在浏览器中显示的效果：

从图中可以看出，当点击“检测”按钮时，获取输入框中的值，并将该值使用$.post()方法一起发送给服务器，服务器接收该值后并进行处理，最后返回处理结果。

任务

我来试试，亲自调用$.post()方法向服务器发送数据，检测数据是否大于0。

在下列代码的第23、24、25行中，使用$.post()向服务器 http://www.imooc.com/data/check_f.php 文件中发送检测的数据。

注意：在POST过程中，传递的参数就是用户在文本框中输入的值。

index.html style.css

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>使用post()方法以POST方式从服务器发送和获取数据</title>
        <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
        <link href="style.css" rel="stylesheet" type="text/css" />
    </head>
 
    <body>
        <div id="divtest">
            <div class="title">
                <span class="fl">检测数字是否大于0</span> 
                <span class="fr"><input id="btnCheck" type="button" value="检测" /></span>
            </div>
            <ul>
               <li>请求输入一个数字 <input id="txtNumber" type="text" size="12" /></li>
            </ul>
        </div>
 
        <script type="text/javascript">
            $(function () {
                $("#btnCheck").bind("click", function () {
                    ?
                    ?
                    ?
                    function (data) {
                        $("ul").append("<li>你输入的<b>  "
                        + $("#txtNumber").val() + " </b>是<b> "
                        + data + " </b></li>");
                    });
                })
            });
        </script>
    </body>
</html>

#divtest
{
    width: 282px;
}
#divtest .title
{
    padding: 8px;
    background-color:Blue;
    color:#fff;
    height: 23px;
    line-height: 23px;
    font-size: 15px;
    font-weight: bold;
}
ul
{
    float: left;
    width: 280px;
    padding: 5px 0px;
    margin: 0px;
    font-size: 14px;
    list-style-type: none;
}
ul li
{
    float: left;
    width: 280px;
    height: 23px;
    line-height: 23px;
    padding: 3px 8px;
}
.fl
{
    float: left;
}
.fr
{
    float: right;
}