在本文中将介绍jQuery的get、post、ajax的三种请求方式
第一部分 jQuery的get请求
jquery_get.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jquery_get</title> <script src="http://code.jquery.com/jquery-3.3.1.min.js"></script> </head> <body> <script type="text/javascript"> // jQuery.get(url,[data],[callback],[type]) $.get('./test2.php?age=12',{'name':'lisi'},function(data){ // alert(data.os);//json对象 $('#h1').append('<h2>Bing'+data.os+'</h2>'); },'json'); </script> <h1 id="h1"></h1> </body> </html> |
test2.php
|
1 2 3 4 5 6 7 8 9 |
<?php $name = $_GET['name']; $age = $_GET['age']; if($name=='lisi' && $age==12){ //这里可以查询数据库 echo json_encode(array('os'=>'Linux','code'=>'php')); }else{ echo json_decode(array('code'=>404,'msg'=>'not found')); } |
第二部分 jQuery额POST请求
jquery_post.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jquery_post</title> <script src="http://code.jquery.com/jquery-3.3.1.min.js"></script> </head> <body> <script> $.post('./test4.php',{os:'linux',system:'php'},function(data){ alert(data); },'json'); </script> </body> </html> |
test.4.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<?php // $os = $_POST['os']; // $system = $_POST['system']; // echo json_encode(array('params1'=>$os,'params2'=>$system)); // echo json_encode($_SERVER); // HTTP_X_REQUESTED_WITH : "XMLHttpRequest"(ajax请求的标识，可以判定是否是ajax请求) // REQUEST_METHOD : "POST" if(isset($_SERVER['HTTP_X_REQUESTED_WITH'])){ echo json_encode(array('msg'=>'这是AJAX请求')); }else{ echo json_encode(array('msg'=>'这不是AJAX请求')); } |
note:
在network中我们可以看到$_SERVER这个超全局变量的值。REQUEST_METHOD : “POST”表明了请求请求所使用的方法，如果是AJAX请求的话还可以看到HTTP_X_REQUESTED_WITH : “XMLHttpRequest”，因此我们可以根据判断HTTP_X_REQUESTED_WITH的值是否存在来确定这是不是一个AJAX请求。
、
第三部分 jQuery的AJAX请求
jquery_ajax.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery_ajax</title> <script src="http://code.jquery.com/jquery-3.3.1.min.js"></script> </head> <body> <button id="bid">点一下！</button> <script> // jQuery.ajax(url,[setting]) error success // $.ajax({ // url:'./test5.php', // dataType:'json', // type:'GET', // timeout:2000, // 2s // success:function(data,status){ // alert(data); // }, // error:function(XMLHttpRequest, textStatus, errorThrown){ // // alert(textStatus);// timeout // // alert(errorThrown); //异常提醒 网速比较慢的时候回提示超时，这里用的是sleep来模拟超时 // // 在数据量比较大的时候比较容易出现超时的情况 // if(textStatus === 'timeout'){ // alert('请求超时，请过一会再重新请求'); // }//timeout // } // }); $('#bid').click(function(){ $.ajax({ url:'./test5.php', dataType:'json', type:'GET', timeout:2000, // 2s success:function(data,status){ alert(data); }, error:function(XMLHttpRequest, textStatus, errorThrown){ // alert(textStatus);// timeout // alert(errorThrown); //异常提醒 网速比较慢的时候回提示超时，这里用的是sleep来模拟超时 // 在数据量比较大的时候比较容易出现超时的情况 if(textStatus === 'timeout'){ alert('请求超时'); (function(){ alert('我准备重新请求啦'); },2000); }//timeout } }); }); </script> </body> </html> |
test5.php
|
1 2 3 |
<?php sleep(3);// 模拟超时的情况 echo json_encode(array('name'=>'Bing')); |
note:
- 注释掉的代码是一个标准的jquery的ajax请求。
- 在数据量较大的时候容易出现超时情况
- 使用 来进行重新请求。
