使用ajax()方法加载服务器数据
使用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 .title 12 { 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 ul 22 { 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 li 31 { 32 float: left; 33 width: 280px; 34 height: 23px; 35 line-height: 23px; 36 padding: 3px 8px; 37 } 38 .fl 39 { 40 float: left; 41 } 42 .fr 43 { 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>
1 <?php 2 $num = $_POST[‘num‘]; 3 if($num%2==0){ 4 echo "偶数"; 5 }else{ 6 echo "奇数"; 7 }
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。