jQuery - AJAX get()/post() 方法

收藏569

阅读37802

更新时间2022-04-12

jQuery - AJAX get() 和 post() 方法


jQuery get() 和 post() 方法用于通过 HTTP GET 或 POST 请求从服务器请求数据。


HTTP 请求:GET vs. POST

两种在客户端和服务器端进行请求-响应的常用方法是:GET 和 POST。

GET - 从指定的资源请求数据

POST - 向指定的资源提交要处理的数据

GET 基本上用于从服务器获得(取回)数据。注释:GET 方法可能返回缓存数据。

POST 也可用于从服务器获取数据。不过,POST 方法不会缓存数据,并且常用于连同请求一起发送数据。

如需学习更多有关 GET 和 POST 以及两方法差异的知识,请阅读我们的 HTTP 方法 - GET 对比 POST。


jQuery $.get() 方法

$.get() 方法通过 HTTP GET 请求从服务器上请求数据。

语法:

$.get(URL,callback);

必需的 URL 参数规定您希望请求的 URL。

可选的 callback 参数是请求成功后所执行的函数名。

下面的例子使用 $.get() 方法从服务器上的一个文件中取回数据:

实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</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){
			alert("数据: " + data + "\n状态: " + status);
		});
	});
});
</script>
</head>
<body>

<button>发送一个 HTTP GET 请求并获取返回结果</button>

</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

$.get() 的第一个参数是我们希望请求的 URL("demo_test.php")。

第二个参数是回调函数。第一个回调参数存有被请求页面的内容,第二个回调参数存有请求的状态。

提示: 这个 PHP 文件 ("demo_test.php") 类似这样:

<?php
echo '这是个从PHP文件中读取的数据。';

?>

jQuery $.post() 方法

$.post() 方法通过 HTTP POST 请求从服务器上请求数据。

语法:

$.post(URL,data,callback);

必需的 URL 参数规定您希望请求的 URL。

可选的 data 参数规定连同请求发送的数据。

可选的 callback 参数是请求成功后所执行的函数名。

下面的例子使用 $.post() 连同请求一起发送数据:

实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</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:"菜鸟教程",
			url:"http://www.runoob.com"
		},
		function(data,status){
			alert("数据: \n" + data + "\n状态: " + status);
		});
	});
});
</script>
</head>
<body>

<button>发送一个 HTTP POST 请求页面并获取返回内容</button>

</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

$.post() 的第一个参数是我们希望请求的 URL ("demo_test_post.php")。

然后我们连同请求(name 和 city)一起发送数据。

"demo_test_post.php" 中的 PHP 脚本读取这些参数,对它们进行处理,然后返回结果。

第三个参数是回调函数。第一个回调参数存有被请求页面的内容,而第二个参数存有请求的状态。

提示: 这个 PHP 文件 ("demo_test_post.php") 类似这样:

<?php
$name = isset($_POST['name']) ? htmlspecialchars($_POST['name']) : '';
$city = isset($_POST['url']) ? htmlspecialchars($_POST['url']) : '';
echo '网站名: ' . $name;
echo "\n";
echo 'URL 地址: ' .$city;
?>


相关

视频

RELATED VIDEOS

更多

免费

Web前端开发极速入门
初级 Web前端开发极速入门

219920次学习

收藏

免费

前端入门_HTML5
初级 前端入门_HTML5

616946次学习

收藏

免费

30分钟学会网站布局
初级 30分钟学会网站布局

238440次学习

收藏

免费

CSS视频教程-玉女心经版
初级 CSS视频教程-玉女心经版

393054次学习

收藏

免费

独孤九贱(1)_HTML5视频教程

免费

独孤九贱(6)_jQuery视频教程

免费

独孤九贱(7)_Bootstrap视频教程

免费

独孤九贱(2)_CSS视频教程
初级 独孤九贱(2)_CSS视频教程

229605次学习

收藏

科技资讯

更多

精选课程

更多
前端入门_HTML5
前端入门_HTML5

共29课时

61.7万人学习

CSS视频教程-玉女心经版
CSS视频教程-玉女心经版

共25课时

39.3万人学习

JavaScript极速入门_玉女心经系列
JavaScript极速入门_玉女心经系列

共43课时

70.9万人学习

独孤九贱(1)_HTML5视频教程
独孤九贱(1)_HTML5视频教程

共25课时

61.6万人学习

独孤九贱(2)_CSS视频教程
独孤九贱(2)_CSS视频教程

共22课时

23万人学习

独孤九贱(3)_JavaScript视频教程
独孤九贱(3)_JavaScript视频教程

共28课时

33.9万人学习

独孤九贱(4)_PHP视频教程
独孤九贱(4)_PHP视频教程

共89课时

125万人学习

关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号