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

最新推荐文章于 2021-03-19 11:56:46 发布

strikeshine

最新推荐文章于 2021-03-19 11:56:46 发布

阅读量729

点赞数

分类专栏： Web前端文章标签： ajax AJAX Ajax jquery jQuery JQUERY Jquery JQuery

本文链接：https://blog.csdn.net/strikeshine/article/details/8257899

版权

Web前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<?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给服务器的数据。

strikeshine

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【学习笔记】jQuery中$.get()和$.post()的用法

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

扫一扫

专栏目录