ajax和框架怎么调用,mootools框架里如何使用ajax

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

function scoring(score){

//var url = document.getElementById("url").value;

var url = 'test';

var pingRequest = new Request({

method: "post",

url: "http://www.nowamagic.net/librarys/veda/",

data:score,

onSuccess: function(responseText){

if(responseText=="success"){

//alert(responseText);

}

else{

//alert(responseText);

}

},

onFailure: function(){

//alert(responseText);

}

});

pingRequest.send("url="+ url +"&score=" + score + "&id=" + id);

}

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

ajax类的使用:

var ajax = new Ajax(url, options);

ajax.request();

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

function handleFun(req){

alert(req);

}

onComplete参数指向处理返回的文本函数;data(老版本用postBody名)是按doPost方式提交的字符串。

下面用ajax的2种方法提交form表单(相当于点击form中的submit按钮):

方法1:

function ajaxSubmit(){

var postArgs = $('form1').toQueryString();

new Ajax('test.php',

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

}

方法2:

function ajaxSubmit(){

var postArgs = $('form1').toQueryString();

$('form1').send({onComplete:showResponse,data:postArgs});

}

$()函数相当于js的document.getElementById(),toQueryString()函数是得到form中提交元素的字符串。

用例1时无需在form中指定action,而必须指定Ajax中的url,例2则必须指定form中action,而无需指定Ajax中的url,另外在 test.php 中接受参数一律用 $_POST[''] 接受即可。

下面再来几个示例:

示例一

window.addEvent("domready",function(){

$("send").addEvent("click",function(){

var url="nowamagic.php?areaid="+$("areaidvalue").value+"&say="+escape($("say").value);

// escape()是处理编码函数,没有它传替中文时会出乱码

new Ajax(url,{method:'post',onComplete:function(){

$("Content").innerHTML=this.response.text;

alert('发表成功!');

}}).request();

});

});

示例二

window.addEvent("domready",function(){

$('btnSent').addEvent('click',function(){

if($('txtContent').innerText==''){

alert('发送内容不能空!');

return;

}

var url='Default2.aspx';

var postData=$("postMessage").toQueryString();

new Ajax(url,{method:'post',onComplete:function(){

$('messageBox').innerHTML += this.response.text;

}

}).request(postData);

});

});

示例三

window.addEvent("domready",function(){

$('myForm').addEvent('submit', function(e) {

new Event(e).stop();

if($("message").value==""){

alert('请输入要发送的消息');

return;

}

this.send({

onComplete: function() {

var request=Json.evaluate(this.response.text);

$("messagebox").innerHTML=request.msg;

$("namebox").innerHTML=request.name;

alert('发送成功!');

}

});

});

});

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值