KISSY基础篇乄KISSY之IO(2)

本文详细介绍了KISSY框架中的IO模块,包括如何创建Maven Project,以及IO模块中的setupConfig、get、post、getJSON、jsonp、upload和serialize等方法的使用,展示了数据传输和不同请求类型的示例。
摘要由CSDN通过智能技术生成

第14天:KISSY之IO(2)

今日任务:创建Maven Project并学习IO模块.

这一节我们主要来看一下IO模块里的一些方法。

一、Maven Project

(1)创建mavenproject

创建Maven Project->maven-archetype-webapp,创建自己的Group Id和Artfact id,至于Package可以先不写

(2)项目配置

         1、在pom.xml里添加SpringMVC需要的jar包

         2、添加SpringMVC需要的配置文件spring-mvc.xml

         3、配置web.xml文件

注:详细配置可参看项目实例中这三个文件的配置,这里就不再赘述了。

二、数据传输

这是IO模块数据传输实例中的js文件中的代码,本实例只在controller层获取数据作为模拟,详情请参考项目实例。

实例1

这个实例的功能是传输字符串给后台,后台经过处理后返回响应信息代表的 json 对象。

KISSY.use('io,node', function(S, io, Node) {

   io({

      url : '/kissyDemo/testController/ioTest.do',

      data : {

         top:30,

         bottom:15

      },

      dataType : "json",

      success : function(databack) {

         Node.one('#datas').html(

                '最高温度范围:' + databack.top1 +'~' + databack.top2

                + '摄氏度<br>最低温度范围:' + databack.bottom1+'~' + databack.bottom2

                + '摄氏度');

      },

      error : function() {

         alert("显示错误");

      }

   });

});

实例2

这个实例的功能时读取文件,并返回响应信息代表的 json 对象。

KISSY.use('io,node', function(S, io, Node) {

   io({

      url : './file/ioFile.txt',

      dataType : "json",

      success : function(data) {

         Node.one('#filetxt').html('您正在使用:' + data.name

                + ',版本号:' + data.version + ',此技术用于:'+ data.use + '。感谢您的使用!');

      },

      error : function() {

         alert("显示错误");

      }

   });

});

三、IO模块各个方法

 (1)IO.setupConfig()

为所有的ajax请求(包括未来)设定默认设置。参数cfg(Object)用来配置默认请求配置的键值对对象。其中的每个配置都是可选的。通过setuoConfig设置后,除非单个请求设置了对应的配置值,否则后续所有的ajax请求都是用该设置。例如:

设置默认的请求地址为 /xmlhttp/ ,并使用 POST 方式。那么接下来的请求都会往 /xmlhttp/ 发送请求L

IO.setupConfig({

       url:'/xmlhttp/',

       type:'post'

   });

再使用IO时便默认url和type设置:

 

IO({

       data:{x:'mydata'}

   });

 (2)IO.get()IO.post()

发送http get请求。参数:url(string) –请求地址;data(Object|string) –请求附带的参数;callback (function)– 请求成功后的回调;dataType(string) –传到回调函数作为参数的数据类型。

请求页面 test.txt , 但是忽略返回结果:

IO.get("test.txt");

请求页面 test.txt , 并附带一些参数传递给后端:

IO.get("test.txt",{

      name:"john",

      time:"2pm"

});

alert 请求成功后返回的结果,数据类型由响应的 content-type 决定

IO.get("test.txt",function(d){

       alert(d);

});

alert 请求成功后返回的 json 数据,和响应的 content-type 无关

IO.get("test.txt",function(d){

       alert(d);

   },"json");

如实例2可改写为中:

KISSY.use('io,node', function(S, io, Node) {

   io.post('./file/ioFile.txt',function(data) {

         Node.one('#filetxt').html('您正在使用:' + data.name

                + ',版本号:' + data.version + ',此技术用于:'+ data.use + '。感谢您的使用!');

      },"json");

});

注:post与get用法类似。

四、IO.getJSON()

发送http get请求,无视请求响应的 Content-type,将返回信息解析为 json 作为第一个参数调用 callback 回调。参数:url,data,callback。

实例3

 

KISSY.use('node,io',function(S,Node,IO){

    var $=Node.all;

    $("#getJSON").on("click",function(){

       

        IO.getJSON("/kissyDemo/testController/test.do",function(d){

            Node.one('#details').html('用户名:' + d.user + '<br>密码:' + d.password);

        });                                 

    });

});

这里是在SpringMVC框架的基础上获取json数据并显示在页面。

五、IO.jsonp()

发送jsonp请求,将返回信息解析为json作为第一个参数调用callback 回调。参数:url,data,callback。

IO({

     dataType:'jsonp',

     url:/../,

     data:{

         //数据

     },

     jsonp:"jsoncallback",   

     success:function (data) {

        //处理成功返回的数据

        }

     });

六、IO.upload()

发送jsonp请求,将返回的json信息作为第一个参数调用callback 回调。参数:url,form(表单元素),data,callback,dataType。form参数代表的form节点中如果有input type=”file”的节点会自动启动iframe-upload模式,否则收集form内input数据启动普通xhr模式。Form参数用户文件上传时请设置type:’post’。

IO.upload("/kissyDemo/testController/test.do","#form",function(d){

      //your code

    },"json");

七、IO.serialize()

序列化一系列表单元素为可提交的字符串。参数:elements代表表单元素的集合。方法返回一个将表单元素 url 编码过的字符串,表单元素通常包括 <input> <textarea> <select> ,元素必须使用 name 属性。或者直接对整个 <form> 元素的所有表单子孙元素进行序列化。

测试页面代码:

<form id='f'>

      <div>

         <input type="text" name="a" value="1" id="a" />

      </div>

      <div>

         <input type="text" name="b" value="2" id="b" />

      </div>

      <div>

         <input type="hidden" name="c" value="3" id="c" />

      </div>

      <div>

         <textarea name="d" rows="8" cols="40">4</textarea>

      </div>

      <div>

         <select name="e">

            <option value="5" selected="selected">5</option>

            <option value="6">6</option>

            <option value="7">7</option>

         </select>

      </div>

      <div>

         <input type="checkbox" name="f" value="8" id="f" />

      </div>

      <div>

         <input type="submit" name="g" value="Submit" id="g" />

      </div>

</form>

进行序列化js代码:

KISSY.use('node,io',function(S,Node,IO){

     var $=Node.all;

    var str1 = IO.serialize("#f");

    var str2 = IO.serialize(Node.all("#f").all("input"));

    $("#results1").text(str1);

    $("#results2").text(str2);

});

结果是:

idresults1的值:a=1&b=2&c=3&d=4&e=5

idresults2的值:a=1&b=2&c=3

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

云重影

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值