Posted in javascript, mootools, php
不久之前我写过一篇关于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" [...]
......<MORE>