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按钮):

<form action="test.php" id="form1">
<input name="user_name" />
<input name="user_id" />
<input type="button" onclick="ajaxSubmit();" />
</form>

方法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[''] 接受即可。

下面再来几个示例:

示例一

<script type="text/javascript">
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();
});
});
</script>

示例二

<script type="text/javascript">
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);
});
});
</script>

示例三

	<script type="text/javascript">
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('发送成功!');
}
});
}); });
</script>

mootools框架里如何使用ajax的更多相关文章

  1. "Timeout"在测试框架里是如何被实现的

    今天组里的小伙伴问了我一个问题:“我这里有一个底层驱动的接口,我想在测试它的时候加上超时限制,时间一过就fail掉它,执行后面的测试用例.怎么办到呢?”.我问:“它自己没有超时响应的机制么? 超时抛e ...

  2. struts2框架通过jQuery实现AJAX应用

    众所周知,在web2.0时代,哪个web框架要是不跟AJAX沾点边,都不好意思说自己的框架有多么多么NB,当然struts也不例外,从 struts1开始到现在的struts2也都对AJAX有支持.A ...

  3. javascript之复习(框架里的方法们)

    继上次整理,一些东西没有整理完.就写在这.可能比较乱比较杂,因为都是整理的一些东西,也没有到做成专题的程度. 1.String.repeat() 大家要实现重复一个字符串的重复怎么写呢,反正我的第一想 ...

  4. 将dubbo框架里的服务提供者迁移进k8s里,以docker提供服务时要注意的细节

    在将dubbo框架里的服务提供者迁移进k8s时,有几个注意事项: 1, 要为默认情况下,dubbo会将k8s里的pod ip地址作为注册服务的地址,所以这个地址需要被改写(ip测试过,行得通,而dns ...

  5. unittest框架里的常用断言方法:用于检查数据

    1.unittest框架里的常用断言方法:用于检查数据. (1)assertEqual(x,y) 检查两个参数类型相同并且值相等.(2)assertTrue(x) 检查唯一的参数值等于True(3)a ...

  6. 虚拟DOM解析及其在框架里的应用

    虚拟DOM解析及其在框架里的应用 浏览器是怎样解析HTML并且绘出整个页面的 上图为webkit引擎浏览器的处理流程,如上图大致分为4大步: 第一步,HTML解析器分析html,构建一颗DOM树: 第 ...

  7. easyUi 学习笔记 (二 ) 使用tabs 里datagridview 发送ajax请求 不访问后台的问题

    这个BUG 我花了一个半小时, 还是看不出哪里的问题,  于是就百度到这么一段话,我需要记住 <================================================= ...

  8. [麦先生]在Laravel框架里实现邮箱验证---发送邮件

    在经过一段时间的使用后,发现在项目中很多地方需要用到用户验证,以短信验证和邮箱验证为主流趋势,小麦总结了如果在Laravel框架中实现发送邮件功能,以后会陆续更上如何实现短信验证..... 在.env ...

  9. 简单实用后台任务执行框架(Struts2+Spring+AJAX前端web界面可以获取进度)

    使用场景: 在平常web开发过程中,有时操作员要做一个后台会运行很长时间的任务(如上传一个大文件到后台处理),而此时前台页面仍需要给用户及时的进度信息反馈,同时还要避免前台页面超时. 框架介绍: 本架 ...

随机推荐

  1. DSP+ARM多核异构开发环境SYSLINK搭建OMAPL138

    DSP+ARM多核异构开发环境搭建OMAPL138 注意: 环境为Ubuntu 12.04 只能是这个环境.我甚至在Ubuntu16.04上面安装了VMware,然后,在装了一个Ubuntu 12.0 ...

  2. 华为机试 求int型数据在内存中存储时1的个数

    题目描述 输入一个int型的正整数,计算出该int型数据在内存中存储时1的个数. 输入描述: 输入一个整数(int类型) 输出描述: 这个数转换成2进制后,输出1的个数 输入 5 输出 2 普通运算方 ...

  3. HyperLedger Fabric 1.4 区块链应用场景(3.1)

    比特币是区块链应用最早的场景,随着比特币安全稳定运行多年以后,数字货币的场景应用遍地开花,各种山寨币泛滥,通过ICO(Initial Coin Offering 首次币发行)就能融到大量资金,上市后的 ...

  4. SPFA算法(2) POJ 1511 Invitation Cards

    原题: Invitation Cards Time Limit: 8000MS   Memory Limit: 262144K Total Submissions: 31230   Accepted: ...

  5. Spring 中的文件上传与下载控制

    先创建根应用上下文配置,WebDemo/src/main/java/com/seliote/webdemo/config/RootContextConfig.java package com.seli ...

  6. Windows 10 下如何彻底关闭 Hyper-V 服务(翻外篇)

    原文:Windows 10 下如何彻底关闭 Hyper-V 服务(翻外篇) windows禁用/启用hyper-V,解决hyper-V与模拟器同时启用时造成冲突 我是这样解决的,以管理员身份运行命令提 ...

  7. C#基础--之数据类型【转】

    在第一章我们了解了C#的输入.输出语句后,我这一节主要是介绍C#的基础知识,本节的内容也是后续章节的基础,好的开端等于成功的一半.在你阅读完本章后,你就有足够的C#知识编写简单的程序了.但还不能使用继 ...

  8. Hbase读写流程和寻址机制

    写操作流程 (1) Client通过Zookeeper的调度,向RegionServer发出写数据请求,在Region中写数据. (2) 数据被写入Region的MemStore,直到MemStore ...

  9. elasticsearch-mathc和term的区分

    elasticsearch和mysql在思想上是有不同的,elasticsearch有分词一说,比如北京奥运分词成北京,奥运,北京奥运.分词要要考虑两点,一个是查询字符串要不要分词,还有就是原存储字段 ...

  10. Linux-Shell脚本编程-学习-3-Shell编程-shell脚本基本格式

    前面两篇文章基本介绍了一部分linux下的基本命令,后面还需要大家自行了解下linux的文件系统的磁盘管理部分,这里就不在写了. 什么是shell编程,我也解释不来,什么是shell脚本了,我理解就是 ...