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...
  • cdp19930414
  • cdp19930414
  • 2016年10月26日 19:04
  • 7490

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

import React, { Component } from 'react'; import ReactDOM from 'react-dom'; import { Form, InputNumb...
  • joyfixing
  • joyfixing
  • 2017年03月22日 10:19
  • 4819

React中Ajax异步解决小技巧

1.设置 setTimeout定时器,通过延迟下一操作的执行时间,来解决ajax网络请求和下一操作异步的冲突(注意:时长的设置要大于等于网络请求的执行时间),代码如下 // 定义状态机 co...
  • zrcj0706
  • zrcj0706
  • 2017年11月26日 21:18
  • 297

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

评论模块续 评论展示
  • houwenjie11
  • houwenjie11
  • 2015年12月30日 10:39
  • 1106

react-native(Fetch网络请求数据)

语法使用:fetch(参数) .then(完成的回调函数) .catch(失败的回调函数) fetch(url,opts) .then((response) => { //请求成功后返回的...
  • snake_son
  • snake_son
  • 2017年01月16日 22:34
  • 3376

React JS 请求服务端接口

(1) web端 请求接口: var TestRequest = React.createClass({ getInitialState...
  • mxc40700229
  • mxc40700229
  • 2015年08月07日 17:17
  • 4890

实例讲解基于 React+Redux 的前端开发流程

前言:在当下的前端界,react 和 redux 发展得如火如荼,react 在 github 的 star 数达 42000 +,超过了 jquery 的 39000+,也即将超过前几年比较火的an...
  • fengyinchao
  • fengyinchao
  • 2016年06月02日 13:42
  • 22821

react网络数据获取

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

Ant Design of React Modal显示数据错乱问题

需求 写一个Modal,来展示或者录入用户的数据。 问题 当修改一个用户的Modal后,再打开另一个用户的Modal,后一个用户显示的数据为前一个用户的数据,造成数据错乱的问题。 这是在Ant Des...
  • hbkc5
  • hbkc5
  • 2017年04月13日 14:18
  • 1004

React native fetch 遇到的坑

最近在自学react native,学习过程中遇到了不少的坑,下面将针对登录这一功能来详细介绍一下以下遇到的两个问题。...
  • meyin
  • meyin
  • 2017年06月27日 11:44
  • 1683
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:react项目实战(权限模块开发七)通过ajax技术获取数据
举报原因:
原因补充:

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