zoukankan      html  css  js  c++  java
  • 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的高级部分学习

  • 相关阅读:
    BZOJ 1192 鬼谷子的钱袋
    BZOJ 1012 最大数maxnumber
    BZOJ 3209 花神的数论题
    线段树讲解(数据结构、C++)
    BZOJ 1087 互不侵犯king
    BZOJ 2732: [HNOI2012]射箭
    BZOJ 1043: [HAOI2008]下落的圆盘
    BZOJ 4451: [Cerc2015]Frightful Formula
    BZOJ 2888: 资源运输
    BZOJ 4800: [Ceoi2015]Ice Hockey World Championship
  • 原文地址:https://www.cnblogs.com/eguid/p/10195624.html
Copyright © 2011-2022 走看看