使用ajax()方法加载服务器数据

来源：互联网发布：搜狗输入法云计算编辑：程序博客网时间：2024/05/21 22:09

使用ajax()方法加载服务器数据

使用ajax()方法是最底层、功能最强大的请求服务器数据的方法，它不仅可以获取服务器返回的数据，还能向服务器发送请求并传递数值，它的调用格式如下：

jQuery.ajax([settings])或$.ajax([settings])

其中参数settings为发送ajax请求时的配置对象，在该对象中，url表示服务器请求的路径，data为请求时传递的数据，dataType为服务器返回的数据类型，success为请求成功的执行的回调函数，type为发送数据请求的方式，默认为get。

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3     <head> 4         <title>使用ajax()方法加载服务器数据</title> 5         <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script> 6         <style> 7             #divtest 8             { 9                 width: 282px;10             }11             #divtest .title12             {13                 padding: 8px;14                 background-color:Blue;15                 color:#fff;16                 height: 23px;17                 line-height: 23px;18                 font-size: 15px;19                 font-weight: bold;20             }21             ul22             {23                 float: left;24                 width: 280px;25                 padding: 5px 0px;26                 margin: 0px;27                 font-size: 14px;28                 list-style-type: none;29             }30             ul li31             {32                 float: left;33                 width: 280px;34                 height: 23px;35                 line-height: 23px;36                 padding: 3px 8px;37             }38             .fl39             {40                 float: left;41             }42             .fr43             {44                 float: right;45             }46         </style>47     </head>48     49     <body>50         <div id="divtest">51             <div class="title">52                 <span class="fl">检测数字的奇偶性</span> 53                 <span class="fr">54                     <input id="btnCheck" type="button" value="检测" />55                 </span>56             </div>57             <ul>58                <li>请求输入一个数字 59                    <input id="txtNumber" type="text" size="12" />60                </li>61             </ul>62         </div>63         64         <script type="text/javascript">65             $(function () {66                 $("#btnCheck").bind("click", function () {67                     $.ajax({68                         url:"./8-5.php",69                         data: { num: $("#txtNumber").val() },70                         type:"post",71                         success: function (data) {72                             $("ul").append("<li>你输入的<b>  "73                             + $("#txtNumber").val() + " </b>是<b> "74                             + data + " </b></li>");75                         }76                     });77                 });78             });79         </script>80     </body>81 </html>

View Code

1 <?php2 $num = $_POST['num'];3 if($num%2==0){4     echo "偶数";5 }else{6     echo "奇数";7 }

阅读全文

0 0