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

最新推荐文章于 2025-07-14 20:11:55 发布

ciaos

最新推荐文章于 2025-07-14 20:11:55 发布

阅读量9.8k

点赞数

CC 4.0 BY-SA版权

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

本文链接：https://blog.youkuaiyun.com/ciaos/article/details/7592658

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

37 篇文章

订阅专栏

本文介绍了一个使用 jQuery 实现的 AJAX 数据交互示例。通过点击页面上的链接触发 AJAX 请求，从服务器获取数据并更新指定 DOM 元素的内容。此外，还展示了如何解决跨域调用问题。

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 onclick="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)";

?>