您的位置：首页 > Web前端 > JQuery

【学习笔记】jQuery中$.get()和$.post()的用法

2012-12-04 22:42 246 查看 
<?php
// 将穿上的配件写到一个文件中
if (isset($_POST["accessories"]))
file_put_contents("potato.txt", $_POST["accessories"]) ;
if (file_exists("potato.txt"))
echo file_get_contents("potato.txt", FILE_IGNORE_NEW_LINES);
else
echo "";
?>


$.get()方法的参数：

$.get(url, [, data] [, callback] [, type])

$.post()方法的参数与$.get()一样。

参数解释：

参数类型说明
urlString请求的页面地址，如"potato.php"
data（可选）Object发送至服务器的数据对象
callback（可选）Function请求成功时回调函数，默认参数为请求的结果（data）和状态（status）
type（可选）String服务器端返回内容的格式，包括xml、html、script、json、text和_default
下面以一个例子来讲解

HTML文件

<!DOCTYPE html>
<html>
<head>...</head>
<body>
<h1>Mr. Potato Head</h1>
<h2 id="status">He is wearing: </h2>

<fieldset id="controls">
<legend>Parts</legend>

<label><input type="checkbox" id="arms" /> Arms</label>
<label><input type="checkbox" id="ears" /> Ears</label>
<label><input type="checkbox" id="eyes" /> Eyes</label>
<label><input type="checkbox" id="mouth" /> Mouth</label>
<label><input type="checkbox" id="nose" /> Nose</label>
<label><input type="checkbox" id="eyebrows" /> Eyebrows</label>
<label><input type="checkbox" id="glasses" /> Glasses</label>
<label><input type="checkbox" id="hat" /> Hat</label>
<label><input type="checkbox" name="moustache" id="moustache" /> Moustache</label>
<label><input type="checkbox" name="shoes" id="shoes" /> Shoes</label>
</fieldset>

<div id="potato">
<img id="arms_image" src="http://222.200.185.14/labs/lab8/arms.png" alt="arms" style="top: 177px; left: 26px; display: none;" />
<img id="ears_image" src="http://222.200.185.14/labs/lab8/ears.png" alt="ears" style="top: 104px; left: 58px; display: none;" />
<img id="eyes_image" src="http://222.200.185.14/labs/lab8/eyes.png" alt="eyes" style="top: 126px; left: 132px; display: none;" />
<img id="mouth_image" src="http://222.200.185.14/labs/lab8/mouth.png" alt="mouth" style="top: 233px; left: 119px; display: none;" />
<img id="nose_image" src="http://222.200.185.14/labs/lab8/nose.png" alt="nose" style="top: 170px; left: 131px; display: none;" />
<img id="eyebrows_image" src="http://222.200.185.14/labs/lab8/eyebrows.png" alt="eyebrows" style="top: 102px; left: 109px; display: none;" />
<img id="glasses_image" src="http://222.200.185.14/labs/lab8/glasses.png" alt="glasses" style="top: 121px; left: 97px; display: none;" />
<img id="hat_image" src="http://222.200.185.14/labs/lab8/hat.png" alt="hat" style="top: 28px; left: 101px; display: none;" />
<img id="moustache_image" src="http://222.200.185.14/labs/lab8/moustache.png" alt="moustache" style="top: 189px; left: 91px; display: none;" />
<img id="shoes_image" src="http://222.200.185.14/labs/lab8/shoes.png" alt="shoes" style="top: 297px; left: 46px; display: none;" />
</div>
</body>
</html>


ajax代码

$(document).ready(function() {
// set up listeners on all checkboxes
...
// Reload saved initial state from web server ...
$.get("potato.php",
function(data, status) {
$("#potato img").hide();
var accessories = data.split(" ");
for (var i = 0; i < accessories.length; i++) {
// check corresponding checkbox
$("#" + accessories[i]).attr("checked", "checked");
// make accessroy appear
$("#" + accessories[i] + "_image").show();
}
$("#status").text("He is wearing: " + data);
}, "text");
});

// called when any checkbox is checked/unchecked;
// toggles that accessory and sends the changes to the server
function toggleAccessory(event) {
// Make the accessory appear / disappear ...
var accessory = event.target;
if (accessory.checked)
$("#" + accessory.id + "_image").show();
else
$("#" + accessory.id + "_image").hide();

// Save the state to the server using Ajax ...
$.post("potato.php", {accessories : getAccessoriesString()}
, function(data, status) {
$("#status").text("He is wearing: " + data);
});
}

// returns a string of all accessories that are currently selected on
// mr. potato head, such as "eyes ears moustache"
function getAccessoriesString() {
...
}

PHP

<?php
// 将穿上的配件写到一个文件中
if (isset($_POST["accessories"]))
file_put_contents("potato.txt", $_POST["accessories"]) ;
if (file_exists("potato.txt"))
echo file_get_contents("potato.txt", FILE_IGNORE_NEW_LINES);
else
echo "";
?>


在这个例子中$.get()用来载入服务器中保存的Mr. Potato身上的配件的数据，$.post()用于点击某个复选框后将当前Mr. Potato的状态以文本文件（potato.txt）的形式存储到服务器上。可以看到$.get()和$.post()的回调函数的参数是一样的，不同的是前者的data是从服务器get来的数据，后者的是post给服务器的数据。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航