不久之前我写过一篇关于mootools运用ajax的文章《【mootools中文实例诠释】Ajax类的简单使用》，但是这篇文章是基于mootools 1.11版本写的，今天在用1.2版(以下称mt1.2)写一个关于ajax和json调用的教程。
如果你现在在学mt1.2你会发现1.2版已经取消的Ajax这个类了，取而代之的是更强大的Request类。那要怎么实现Ajax效果呢？
老规矩还是先看效果：
http://xiebiji.com/works/mt1.2Ajax/
示例下载地址：目标另存为
html+js代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 | <html>
<head>
<script type="text/javascript" src="mootools.js"></script>
<title>mt1.2ajax-from http://xiebiji.com</title>
<script type="text/javascript">
var jsonRequest;
window.addEvent('domready',function(){
jsonRequest = new Request.JSON({
url: "tellMySiteInfo.php", //请求数据链接地址，从这个地址获取后台数据
onComplete: function(siteInfo, text){//由上述地址在服务端解释后输出一个json字符串这个字符串即为text,而siteInfo为这个json字符串转化成的js对象
$msg='你抛数据的形式是：'+siteInfo.method+'\n';
$msg+='你选择的站长是：'+siteInfo.owner+'\n'+'他的个人主页是：'+siteInfo.homePage+'\n\n';
$msg+='返回的json字符串是：'+text;
$('txt').set('value',$msg)
}
})
});
function showMeTheSite(method){
if(method=='get'){
jsonRequest.get({
'owner': $('owner').get('value')//$('owner').get('value')为select控件当前值
});//以get的方式让jsonRequest抛出数据
}
else{
jsonRequest.post({
'owner': $('owner').get('value')
});//以post的方式让jsonRequest抛出数据
}
return false;
}
</script>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
请选择一个站长：
<select name="owner" id="owner">
<option value="xiebiji">xiebiji</option>
<option value="ajoe">ajoe</option>
</select>
<label>
<input type="submit" name="getBtn" onclick="showMeTheSite('get');return false;" id="getBtn" value="以get的方式抛数据" />
</label>
<label>
<input type="submit" name="postBtn" id="postBtn" onclick="showMeTheSite('post');return false;" value="以post的方式抛数据" />
</label>
</form>
数据将在以下文本框显示：<br/>
<textarea style="height:200px; width:300px" name="txt" cols="" id="txt" rows=""></textarea>
</body>
</html> |
php文件tellMySiteInfo.php代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 | <?php
//定义站点属性
$site1=array(
'method'=>'',
'owner'=>'xiebiji',
'homePage'=>'http://xiebiji.com'
);
$site2=array(
'method'=>'',
'owner'=>'ajoe',
'homePage'=>'http://ajoe.com'
);
$jsonToJs='';//返回的json字符串
if(isset($_GET['owner'])){//假如是get方式
if($_GET['owner']=='xiebiji'){
$site1['method']='GET';
$siteInfo=$site1;
}
else{
$site2['method']='GET';
$siteInfo=$site2;
}
}
elseif(isset($_POST['owner'])){//假如是post
if($_POST['owner']=='xiebiji'){
$site1['method']='POST';
$siteInfo=$site1;
}
else{
$site2['method']='POST';
$siteInfo=$site2;
}
}
else{
die('非法操作');
}
$jsonToJs=json_encode($siteInfo);//转为json格式字符串
echo $jsonToJs;
?> |
代码注释已经说清楚整个过程了，其实相比以前Ajax类来说，Request类更强大了。更多关于Reques请查看：这里
原创内容转载请注明出处：http://xiebiji.com/2009/06/mootools-ajax-json 作者：Joe ZHOU
下次有不懂的地方，请你帮忙OK?
回复
回复
这里是一个学习的园地。
回复
回复
这里是一个学习的园地
回复
收藏了
回复
好好学习
回复