首页 > 其他好文 > 详细

mootools框架里如何使用ajax

时间：2014-09-26 23:05:38 阅读：647 评论：0 收藏：0 [点我收藏+]

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

01
function 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类的使用：

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

2
ajax.request();

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

1
function 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：

1
function ajaxSubmit(){

2
    var postArgs = $(‘form1‘).toQueryString();

3
    new Ajax(‘test.php‘,

4
        {data:postArgs,onComplete：handleFun}).request();

5
}

方法2：

1
function 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">

02
window.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=$("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==""){

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

标签：http io os 使用 ar java for 数据 sp

原文地址：http://www.cnblogs.com/laoyangman/p/3995591.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行

友情链接

兰亭集智国之画百度统计站长统计阿里云 chrome插件新版天听网

关于我们 - 联系我们 - 留言反馈

迷上了代码！