用jquery实现ajax获取后台数据的示例

最新推荐文章于 2022-07-05 21:37:32 发布

ciaos

最新推荐文章于 2022-07-05 21:37:32 发布

阅读量9.7k

点赞数

分类专栏：其它乱七八糟文章标签： jquery ajax function 浏览器 server

本文链接：https://blog.csdn.net/ciaos/article/details/7592658

版权

其它乱七八糟专栏收录该内容

37 篇文章 0 订阅

订阅专栏

ajax在如今web2.0中的应用实在太广泛了，免刷新获取服务器数据既省资源又省时间，还能提升用户体验。

用jquery实现ajax数据交互也是比较方便的，示例程序如下：

<html>
	<head>
		<title>Test</title>
		<script src="jquery-1.7.2.js" type="text/javascript"></script>
		<script type="text/javascript">
		
			function fetchData(arg){
				$.ajax({
					url:"data.php?id="+arg,
					dataType:"text",
					success:function(data){
						$("#b")[0].innerHTML = data;
					}
				})(arg);
			}
		</script>
	</head>
	
	<body>
		<div id="a" style="width:100px;height:100px;background-color:yellow">
			<a οnclick="fetchData(1)">Click</a>
		</div>
		<div id="b" style="width:100px;height:100px;background-color:gray">
			
		</div>
	</body>
</html>

其中点击“click”链接后会调用自定义fetchData函数，函数内用到jquery封装的ajax操作方法，填写获取数据的地址，类型以及数据获取成功后的回调函数，可以在回调函数中用jquery操作页面元素，非常方便。

示范的缘故，后端data.php很简单，就不解释了

<?php
	$id = $_GET["id"];

	$id = "server get ".$id;

	echo $id;
?>

用浏览器访问后点击“Click”，我们发现页面没有刷新，但是div b中已经有了后端传过来的数据了，不错，简单就是最好的，做网站回帖分页也可以用这个简单地实现了。

如果脚本所在服务器和请求的url不是同一个域下面，存在跨域调用的问题，可以使用jsonp的方式如下：

<script>
$(document).ready(function() {
	$.ajax({
		url: "http://another_host/data.php",
		dataType: "jsonp",
		jsonp:"myCallback",
		success: function(data) {
			$("#b")[0].html(data["Hello"]);
		},
		error: function() {
            alert("Error");
		}
	})
})
</script>

服务器端代码data.php如下：

<?php

$b = $_REQUEST["myCallback"];

$a = <<<EOF
{ "Hello":"World Two" }
EOF;

echo "$b($a)";

?>

ciaos

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
用jquery实现ajax获取后台数据的示例

ajax在如今web2.0中的应用实在太广泛了，免刷新获取服务器数据既省资源又省时间，还能提升用户体验。用jquery实现ajax数据交互也是比较方便的，示例程序如下： Test function fetchData(arg){ $.ajax({ url:"data.php?id="+arg, dataType:"text",
复制链接

扫一扫

专栏目录