您的位置：首页 > Web前端 > JQuery

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

2012-05-22 21:59 901 查看

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

?>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航