<?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()一样。
参数解释:
参数 | 类型 | 说明 |
---|---|---|
url | String | 请求的页面地址,如"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给服务器的数据。