react项目实战(权限模块开发七)通过ajax技术获取数据

原创 2017年07月29日 00:25:29

react获取数据一般都是通过fetch加上promise的方式来获取,但由于本人对ajax毕竟感情深厚,怎么也的尝试下。

在构造函数中调用加载数据的ajax请求:

 constructor(...props){
    //构造函数 绑定事件
      super(...props);
      [
       '_loadDate'
      ].forEach(func=> {
        this[func] = this[func].bind(this);
      });
    this._loadData();
  }

定义_loadData来获取数据

  _loadData() {
    const { dispatch }=this.props;
    //将ajx请求封装到了QueryCommand 函数中,参数为url 以及请求类型,默认是异步查询
    var queryCommand = new QueryCommand('/go-framework/role/read_all', "post");
    //组装查询参数 并执行查询操作
    queryCommand.executeQuery(queryCommand.getQueryDs(fieldAry),
      function (list) {
        //调用成功后 调用redux的action 来改变state的值。
        dispatch({
          type: 'roleMd/changeData',
          list: list
        });
      });
  }

QueryCommand的代码大概如下:供参考,由于本人的后台数据格式并不是简单的json数据,所以进行了一定的转换。

export class QueryCommand {
  constructor(url, type, async = false) {
    this.url = url;
    this.async = async;
    this.type = type;
  }

  getQueryDs(fileAry) {
    var obj = new Object();
    obj["sessionId"] = 'a24621c7c9d14340bb9adbb3abba9181';
    //设置查询ds
    obj["dataset"] = GoingUtils.getQueryDs(fileAry);
    return obj;
  }

  executeQuery(data, scussfun) {
    console.log(data);
    console.log(this.type)
    $.ajax({
      type: this.type,
      url: this.url,
      async: this.async,
      contentType: "application/x-www-form-urlencoded;charset=UTF-8",
      dataType: "json",
      data: data,
      success: function (data, textStatus) {
        var code = data["code"];
        if (code != 1) {

        } else {
          var result = data["result"];
          var propNames = result["propNames"];
          var data = new Array();
          result["propValues"].map((itemAry, index)=> {
            var itemObj = new Object();
            propNames.forEach((itemEl, index)=> {
              if (itemEl === "id") {
                itemObj["key"] = itemAry[index];
              } else {
                itemObj[itemEl] = itemAry[index];
              }
            })
            data.push(itemObj);
          })
          scussfun(data);
        }

      }
    })
  }
}

reducers里的状态代码:

   changeData(state,action){
      return { ...state, list:action.list}
    },

view层代码就更简单了:

    const propsObjs = this.props;
    var dataSource=propsObjs.roleMd.roleMd.list;
.....
   <Table rowSelection={rowSelection} columns={columns} dataSource={dataSource}/>

界面效果如下:
这里写图片描述

相关文章推荐

react 学习笔记之AJAX数据请求和使用

今天要做的是利用ajax请求数据之后,在将数据插入在react组件之中。遇到的问题是: 1、无法从ajax函数外部获取ajax请求到的数据 开始没有多想,直接在componentWillMount...

React ajax

来源通过 AJAX 加载初始数据,引入jQuery。在 componentDidMount 时加载数据。当加载成功,将数据存储在 state 中,触发 render 来更新你的 UI。当执行同步请求的...

React根据后台数据动态生成Form表单

import React, { Component } from 'react'; import ReactDOM from 'react-dom'; import { Form, InputNumb...

React入门(三) 评论模块续-从服务器获取数据

评论模块续 评论展示

小白学react之restful api获取服务器数据实战

通过上一篇文章《[小白学react之React Router实战](http://techgogogo.com/2016/09/react_router/)》我们学习了在React Router的基本...

ReactNative学习实例(三) 使用fetch获取网络数据

实例来自http://blog.csdn.net/u014360817/article/details/52447516 RN自带了一个非常优雅的网络操作库fetch,下面的这个例子从gan...

React实战-模块化条件下的6种数据传递方式

React实战-模块化条件下的6种数据传递方式 当前新的前段框架中最突出就是模块化,然后模块化后,数据的传递方式与之前的方式也不尽相同,尤其是框架各自定义的方式也不一样。规则这东西归根到底是个度的问题...

react网络数据获取

// tutorial14.js var CommentBox = React.createClass({ loadCommentsFromServer: function() { $.a...
  • qqq2830
  • qqq2830
  • 2016年04月23日 23:08
  • 499

React中事件传参的写法

React中事件传参数的写法

Table水平滚动条

无标题页
  • qiume
  • qiume
  • 2009年12月12日 15:25
  • 13489
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:react项目实战(权限模块开发七)通过ajax技术获取数据
举报原因:
原因补充:

(最多只允许输入30个字)