mootools框架里如何使用ajax
2024-07-24 15:03:09 220人阅读
ajax可通过直接写源码实现,但有点繁琐,现在流行的ajax框架都集成了ajax的功能,而且写起来非常简单方便。当然mootools也不例外。mootools是一个非常优秀的javascript的库,有些地方跟prototype颇有相似(指按面向对象做js)。mootools的Request实现了对XMLHttpRequest的功能包装类,下面是我写的一个小示例:云鼎娱乐城
01 | function scoring(score){ |
04 | var pingRequest = new Request({ |
06 | url: "http://www.nowamagic.net/librarys/veda/" , |
08 | onSuccess: function (responseText){ |
09 | if (responseText== "success" ){ |
16 | onFailure: function (){ |
20 | pingRequest.send( "url=" + url + "&score=" + score + "&id=" + id); |
在后台可以使用$_POST[]来获得ajax传过来的数据。
ajax类的使用:
1 | var ajax = new Ajax(url, options); |
url是提交到后台处理的路径。options有2个经常使用的参数:{onComplete:handleFun,data:postArgs}
1 | function handleFun(req){ |
onComplete参数指向处理返回的文本函数;data(老版本用postBody名)是按doPost方式提交的字符串。
下面用ajax的2种方法提交form表单(相当于点击form中的submit按钮):
1 | <form action= "test.php" id= "form1" > |
2 | <input name= "user_name" /> |
3 | <input name= "user_id" /> |
4 | <input type= "button" onclick= "ajaxSubmit();" /> |
方法1:
2 | var postArgs = $( ‘form1‘ ).toQueryString(); |
4 | {data:postArgs,onComplete:handleFun}).request(); |
方法2:
2 | var postArgs = $( ‘form1‘ ).toQueryString(); |
3 | $( ‘form1‘ ).send({onComplete:showResponse,data:postArgs}); |
$()函数相当于js的document.getElementById(),toQueryString()函数是得到form中提交元素的字符串。
用例1时无需在form中指定action,而必须指定Ajax中的url,例2则必须指定form中action,而无需指定Ajax中的url,另外在 test.php 中接受参数一律用 $_POST[‘‘] 接受即可。
下面再来几个示例:
示例一
01 | <script type= "text/javascript" > |
02 | window.addEvent( "domready" , function (){ |
03 | $( "send" ).addEvent( "click" , function (){ |
04 | var url= "nowamagic.php?areaid=" +$( "areaidvalue" ).value+ "&say=" +escape($( "say" ).value); |
06 | new Ajax(url,{method: ‘post‘ ,onComplete: function (){ |
07 | $( "Content" ).innerHTML= this .response.text; |
示例二
01 | <script type= "text/javascript" > |
02 | window.addEvent( "domready" , function (){ |
03 | $( ‘btnSent‘ ).addEvent( ‘click‘ , function (){ |
04 | if ($( ‘txtContent‘ ).innerText== ‘‘ ){ |
08 | var url= ‘Default2.aspx‘ ; |
09 | var postData=http://www.mamicode.com/$( "postMessage" ).toQueryString(); |
10 | new Ajax(url,{method: ‘post‘ ,onComplete: function (){ |
11 | $( ‘messageBox‘ ).innerHTML += this .response.text; |
示例三
01 | <script type= "text/javascript" > |
02 | window.addEvent( "domready" , function (){ |
03 | $( ‘myForm‘ ).addEvent( ‘submit‘ , function (e) { |
05 | if ($( "message" ).value=http://www.mamicode.com/= "" ){ |
10 | onComplete: function () { |
11 | var request=Json.evaluate( this .response.text); |
12 | $( "messagebox" ).innerHTML=request.msg; |
13 | $( "namebox" ).innerHTML=request.name; |
mootools框架里如何使用ajax
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉:
投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。