在SupeSite中如何使用AJAX

lidq.jingwu · 发表于 2009-10-10 16:29:53

节前一个位网友问如何在 SupeSite 中使用 AJAX 没有正面回答，在这里给出一个小例子。

AJAX 中一种将无刷新向服务器请求数据的技术，要运用好它必须有较强的 DIV+CSS+JS 基础，这个小例子只说明了如何运用 AJAX 向服务器发送请求，并接收数据。

1.在ss的安装目录下面新建tester.php文件，文件中代码如下：

<?php
/*说明：AJAX向服务器发送请求，服务器接收到请求后，进行处理，最后必须将内容拼成字符串或XML的形式输出，否则浏览器接收不到数据
*/
if(!empty($_GET['get'])){
$str = $_GET['get'];
$str = iconv("gbk//IGNORE", "utf-8//IGNORE", $str);
echo $str;
}
if(!empty($_POST[post])){
$str = $_POST[post];
$str = iconv("gbk//IGNORE", "utf-8//IGNORE", $str);
echo $str;
}
?>

复制代码

2、新建一个 a.php文件，做为前台的页面，代码如下（代码是加了注释了，多看注释）：

<?php
include('./common.php');
?>
<html>
<head>
<script src="<?php echo S_URL;?>/include/js/ajax.js" type="text/javascript" language="javascript"></script>
<script src="<?php echo S_URL;?>/include/js/common.js" type="text/javascript" language="javascript"></script>
</head>
<body>
测试get方式
<div id="contentget" onclick="testget('contentget')">
哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
</div>
<br>
<br>
<br>
<br>
<br>
测试post方式
<div id="contentpost" onclick="testpost('contentpost','post=bbb')">
哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
</div>
<script type="text/javascript">
<!--
function testget(objname) {
//通过 Ajax 方法来获得一个对象，此对象中包含了 AJAX 的实例对象，但它本身并不是 AJAX
//第一个参数只有两个可供选择的值：HTML,XML，我们是用 HTML 方式
//第二个参数为显示服务器返回的数据的html标签的ID，如上面 div 块的 ID
var x = new Ajax('HTML', objname);
//通过 get 方式获取数据，第一个参数是请求的URL,注意要将此url改成自己的
//第二个参数是一个方法，方法的参数 s 即为服务器返回的数据，方法内部定义对返回的数据如何处理
x.get('http://localhost/s7/s/tester.php?get=aaa', function(s){
//下面三句为获得标签 ID 所对应的对象，并将返回的数据写入标签内。
var obj = $(objname);
obj.style.display = '';
obj.innerHTML = s;
});
}
function testpost(objname,postcontent) {
//通过 Ajax 方法来获得一个对象，此对象中包含了 AJAX 的实例对象，但它本身并不是 AJAX
//第一个参数只有两个可供选择的值：HTML,XML，我们是用 HTML 方式
//第二个参数为显示服务器返回的数据的html标签的ID，如上面 div 块的 ID
var x = new Ajax('HTML', objname);
//通过 post 方式获取数据，第一个参数是请求的 URL ，注意要将此url改成自己的
//第二个参数是 URL 后面的参数，如 URL 是http://localhost/s7/s/tester.php?post=bbb,那么第二个参数的值就是 post=bbb
//第三个参数是一个方法，方法的参数 s 即为服务器返回的数据，方法内部定义对返回的数据如何处理
x.post('http://localhost/s7/s/tester.php', postcontent,function(s){
//下面三句为获得标签 ID 所对应的对象，并将返回的数据写入标签内。
var obj = $(objname);
obj.style.display = '';
obj.innerHTML = s;
});
}
-->
</script>
</body>
</html

复制代码

注意：在a.php的代码中向后台发送请求时的url（x.get与x.post的第一个参数值），要改成自己的。

在浏览器中访问a.php文件，界面如图：

点击“测试get方式”下面的文字，效果如图：

点击“测试post方式 ”下面的文字，效果如图：

效果展示完了，具体的还要灵活运用。

littlehz · 发表于 2009-10-10 21:16:04

有深度，收藏下

benba · 发表于 2009-10-11 14:16:51

实用的例子.我也收了!!!

yayapi · 发表于 2009-10-12 11:35:17

好好学习了

miqi2 · 发表于 2009-11-5 12:31:23

记录下啊..

abcnic18 · 发表于 2009-11-6 16:41:20

支持了！！！

忧伤啊忧伤 · 发表于 2010-1-17 10:21:20

收啊收，我也收。

dafei2009 · 发表于 2010-3-6 09:44:30

不错，学习了，

kingly10 · 发表于 2010-3-31 10:53:12

学习。。。

huytang · 发表于 2010-4-26 21:52:41

回复 1# lidq.jingwu

能给SS做个AJAX回复吗

		自动登录	找回密码
密码			立即注册

在SupeSite中如何使用AJAX

评分