首页 > 代码库 > mootools框架里如何使用ajax

mootools框架里如何使用ajax

2024-07-24 15:03:09   221人阅读

ajax可通过直接写源码实现，但有点繁琐，现在流行的ajax框架都集成了ajax的功能，而且写起来非常简单方便。当然mootools也不例外。mootools是一个非常优秀的javascript的库，有些地方跟prototype颇有相似（指按面向对象做js）。mootools的Request实现了对XMLHttpRequest的功能包装类，下面是我写的一个小示例：云鼎娱乐城

01function scoring(score){ 
02    //var url = document.getElementById("url").value; 
03    var url = ‘test‘;
04    var pingRequest = new Request({ 
05        method: "post", 
06        url:    "http://www.nowamagic.net/librarys/veda/", 
07        data:   score,
08        onSuccess:  function(responseText){ 
09            if(responseText=="success"){ 
10                //alert(responseText);
11            } 
12            else{ 
13                //alert(responseText);
14            } 
15        }, 
16        onFailure:  function(){ 
17            //alert(responseText);
18        } 
19    }); 
20    pingRequest.send("url="+ url +"&score=" + score + "&id=" + id); 
21}

在后台可以使用$_POST[]来获得ajax传过来的数据。

ajax类的使用：

1var ajax = new Ajax(url, options);
2ajax.request();

url是提交到后台处理的路径。options有2个经常使用的参数：｛onComplete：handleFun，data:postArgs｝

1function handleFun(req){
2    alert(req);
3}

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();" />
5</form>

方法1：

1function ajaxSubmit(){
2    var postArgs = $(‘form1‘).toQueryString();
3    new Ajax(‘test.php‘,
4        {data:postArgs,onComplete：handleFun}).request();
5}

方法2：

1function ajaxSubmit(){
2    var postArgs = $(‘form1‘).toQueryString();
3    $(‘form1‘).send({onComplete:showResponse,data:postArgs});
4}

$()函数相当于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);
05                // escape()是处理编码函数，没有它传替中文时会出乱码
06                new Ajax(url,{method:‘post‘,onComplete:function(){
07                    $("Content").innerHTML=this.response.text;
08                    alert(‘发表成功！‘);
09                }}).request();
10            });
11        });
12</script>

示例二

01<script type="text/javascript">
02window.addEvent("domready",function(){
03    $(‘btnSent‘).addEvent(‘click‘,function(){
04        if($(‘txtContent‘).innerText==‘‘){
05            alert(‘发送内容不能空！‘);
06            return;
07        }
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;
12            }
13        }).request(postData);
14    });
15});
16</script>

示例三

view source
 
print?
01<script type="text/javascript">
02    window.addEvent("domready",function(){
03        $(‘myForm‘).addEvent(‘submit‘, function(e) {
04            new Event(e).stop();
05            if($("message").value=http://www.mamicode.com/=""){
06                alert(‘请输入要发送的消息‘);
07                return;
08            }
09         this.send({
10          onComplete: function() {
11              var request=Json.evaluate(this.response.text);
12              $("messagebox").innerHTML=request.msg;
13              $("namebox").innerHTML=request.name;
14           alert(‘发送成功！‘);
15          }
16         });
17        });
18         
19    });
20</script>

mootools框架里如何使用ajax


联系
我们