Dojo初探之5:dojo的request(请求)操作、请求过程事件绑定和隐藏数据data()操作(基于dojo1.11.2版本)

时间:2023-03-09 06:40:45
Dojo初探之5:dojo的request(请求)操作、请求过程事件绑定和隐藏数据data()操作(基于dojo1.11.2版本)

前言:

上一章详细阐述了dojo的事件绑定操作,本章将讲解dojo的请求操作

注:dojo的请求操作与js和jquery完全不同!

1、dojo的请求

dojo通过request.get()/.put()/.post()/.del()进行请求操作

 request.post("这里放对应的请求接口地址", {
                //解析服务器json数据
                handleAs: "json",
                // 直接从form表单取json对象作为参数
                data: domForm.toObject("formNode"),
                // 超时时间
                timeout: 2000
            }).then(function(response) {
                //正确获得服务器响应后的操作
                dom.byId('svrMessage').innerHTML = JSON.stringify(response);
            });

2、请求的过程中可以绑定不同操作

//请求过程事件绑定
 require(["dojo/dom", "dojo/request", "dojo/request/notify",
         "dojo/on", "dojo/dom-construct", "dojo/query",
         "dojo/domReady!"
     ],
     function(dom, request, notify, on, domConstruct) {
         //开始
         notify("start", function() {
             domConstruct.place("<p>开始</p>", "divStatus");
         });
         //发送
         notify("send", function(data, cancel) {
             domConstruct.place("<p>发送请求</p>", "divStatus");
         });
         //请求成功
         notify("load", function(data) {
             domConstruct.place("<p>加载完毕</p>", "divStatus");
         });
         //请求失败
         notify("error", function(error) {
             domConstruct.place("<p class=\"error\">加载失败</p>", "divStatus");
         });
         //已经完成之后
         notify("done", function(data) {
             domConstruct.place("<p>请求结束 (response processed)</p>", "divStatus");
             if (data instanceof Error) {
                 domConstruct.place("<p class=\"error\">响应失败</p>", "divStatus");
             } else {
                 domConstruct.place("<p class=\"success\">响应成功</p>", "divStatus");
             }
         });
         //停止
         notify("stop", function() {
             domConstruct.place("<p>请求停止</p>", "divStatus");
             domConstruct.place("<p class=\"ready\">准备</p>", "divStatus");
         });

         on(dom.byId("test"), "click", function(evt) {
             //清空id为divStatus内部元素
             domConstruct.empty("divStatus");
             request.get("getTime", //请求地址
                 {
                     query: this.id = "successbtn",
                     handleAs: "json" //返回的是json数据
                 }).then(function(data) {
                 //发送请求成功后的操作
                 alert("获取成功" + data.data);
                 //发送请求失败后的操作
             }, function(error) {
                 alert("获取失败" + error);
             });
         });
     }
 );

3、与jquery相似,dojo也提供隐藏数据的data()操作

要进行data()操作必须引入NodeList-data和NodeList-manipulate模块

如下所示

var NodeList = require(["dojo/NodeList-data", "dojo/NodeList-manipulate", "dojo/domReady!"], function(NodeList) {
    //设置隐藏数据
    function setData(node) {
        query(node).data("updated", new Date());
    }
    //获取隐藏数据
    function getData(node) {
        var str = query(node).data("updated");
        console.log(str);
    }

到这里dojo的常用操作部分基本讲解完毕了,dom操作可以操作页面增删改,事件绑定操作处理事件绑定,本章请求处理用于处理get/post/put/delete四种请求,普通页面操作基本都可以做到了,后面如果发现前面漏掉的地方将会进一步进行补充。

接下来将开始dojo的高级部分学习