飞天代码的博客

只要你相信、其他人的看法可能就不是那么的重要咯

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

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
个人分类: react项目实战
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭