jQuery - AJAX get() 和 post() 方法
HTTP 請求:GET vs. POST
兩種在客戶端和服務(wù)器端進(jìn)行請求-響應(yīng)的常用方法是:GET 和 POST。
GET?- 從指定的資源請求數(shù)據(jù)POST?- 向指定的資源提交要處理的數(shù)據(jù)
GET 基本上用于從服務(wù)器獲得(取回)數(shù)據(jù)。注釋:GET 方法可能返回緩存數(shù)據(jù)。
POST 也可用于從服務(wù)器獲取數(shù)據(jù)。不過,POST 方法不會緩存數(shù)據(jù),并且常用于連同請求一起發(fā)送數(shù)據(jù)。
Get和Post的區(qū)別
Get方式:
用get方式可傳送簡單數(shù)據(jù),但大小一般限制在1KB下,數(shù)據(jù)追加到url中發(fā)送(http的header傳送),也就是說,瀏覽器將各個表單字段元素及其數(shù)據(jù)按照URL參數(shù)的格式附加在請求行中的資源路徑后面。另外最重要的一點是,它會被客戶端的瀏覽器緩存起來,那么,別人就可以從瀏覽器的歷史記錄中,讀取到此客戶的數(shù)據(jù),比如帳號和密碼等。因此,在某些情況下,get方法會帶來嚴(yán)重的安全性問題。
Post方式:
當(dāng)使用POST方式時,瀏覽器把各表單字段元素及其數(shù)據(jù)作為HTTP消息的實體內(nèi)容發(fā)送給Web服務(wù)器,而不是作為URL地址的參數(shù)進(jìn)行傳遞,使用POST方式傳遞的數(shù)據(jù)量要比使用GET方式傳送的數(shù)據(jù)量大的多。
總之,GET方式傳送數(shù)據(jù)量小,處理效率高,安全性低,會被緩存,而POST反之。
$.get() 方法
$.get() 方法通過 HTTP GET 請求從服務(wù)器上請求數(shù)據(jù)。
語法:
$.get(URL,callback);
必需的?URL?參數(shù)規(guī)定您希望請求的 URL。
可選的?callback?參數(shù)是請求成功后所執(zhí)行的函數(shù)名。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文網(wǎng)(php.cn)</title> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script> <script> $(document).ready(function(){ $("button").click(function(){ $.get("/try/ajax/demo_test.php",function(data,status){ //需要引入demo_test.php文件 alert("數(shù)據(jù): " + data + "\n狀態(tài): " + status); }); }); }); </script> </head> <body> <button>發(fā)送一個GET 請求并獲取返回結(jié)果</button> </body> </html>
$.get() 的第一個參數(shù)是我們希望請求的 URL("demo_test.php")。
第二個參數(shù)是回調(diào)函數(shù)。第一個回調(diào)參數(shù)存有被請求頁面的內(nèi)容,第二個回調(diào)參數(shù)存有請求的狀態(tài)。
這個 PHP 文件 ("demo_test.php") 類似這樣:
<?php echo "這是個從PHP文件中讀取的數(shù)據(jù)"; ?>
$.post() 方法
$.post() 方法通過 HTTP POST 請求從服務(wù)器上請求數(shù)據(jù)。
語法:
$.post(URL,data,callback);
必需的?URL?參數(shù)規(guī)定您希望請求的 URL。
可選的?data?參數(shù)規(guī)定連同請求發(fā)送的數(shù)據(jù)。
可選的?callback?參數(shù)是請求成功后所執(zhí)行的函數(shù)名。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文網(wǎng)(php.cn)</title> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script> <script> $(document).ready(function(){ $("button").click(function(){ $.post("/try/ajax/demo_test_post.php",{ name:"php中文網(wǎng)", url:"http://miracleart.cn" }, function(data,status){ alert("數(shù)據(jù): \n" + data + "\n狀態(tài): " + status); }); }); }); </script> </head> <body> <button>發(fā)送一個 HTTP POST 請求頁面并獲取返回內(nèi)容</button> </body> </html>
$.post() 的第一個參數(shù)是我們希望請求的 URL ("demo_test_post.php")。
然后我們連同請求(name 和 city)一起發(fā)送數(shù)據(jù)。
"demo_test_post.php" 中的 PHP 腳本讀取這些參數(shù),對它們進(jìn)行處理,然后返回結(jié)果。
第三個參數(shù)是回調(diào)函數(shù)。第一個回調(diào)參數(shù)存有被請求頁面的內(nèi)容,而第二個參數(shù)存有請求的狀態(tài)。
這個 PHP 文件 ("demo_test_post.php") 類似這樣:
<?php $name = isset($_POST['name']) ? htmlspecialchars($_POST['name']) : ''; $city = isset($_POST['url']) ? htmlspecialchars($_POST['url']) : ''; echo '網(wǎng)站名: ' . $name; echo "\n"; echo 'URL 地址: ' .$city; ?>
一個完整的$.post()實例:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文網(wǎng)(php.cn)</title> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script> <script type="text/javascript"> function checkname(){ if($('#name').val() == ""){ $('#msg').html("please enter the name!"); $('#name').focus; return false; } if($('#address').val() == ""){ $('#msg').html("please enter the address!"); $('#address').focus; return false; } ajax_post(); } function ajax_post(){ $.post("text.php",{name:$('#name').val(),address:$('#address').val()}, function(data){ //$('#msg').html("please enter the name!"); //alert(data); $('#msg').html(data); }, "text"); } </script> </head> <body> <form id="ajaxform" name="ajaxform" method="post" action="text.php"> <p> name<input type="text" name="name" id="name"/> </p> <p> address<input type="text" name="address" id="address"/> </p> <p id="msg"></p> <p> <input name="Submit" type="button" value="submit" onclick="return checkname()"/> </p> </form> </body> </html>
創(chuàng)建一個text.php的文件:
<?php $name = $_POST["name"]; $address = $_POST["address"]; echo $name."<br>"; echo $address."<br>"; echo "success"; ?>