【ReactJs学习笔记】【状态State && 用JQ和ajax从服务器端得到数据】

【Javascript学习笔记】

目录

数据准备

传递数据的链接

index.js

- var commen = [ - { "author": "KXX", "date": "2018-8-17", "text": "天气不错！" }, - { "author": "KXX2", "date": "2018-8-17", "text": "天气不错2！" } - ]; 
- ReactDOM.render(<App data={comments} />, document.getElementById('root')); + ReactDOM.render(, document.getElementById('root'));

模拟数据

新建一个comments.json到index.html文件的目录里，用json文件模仿服务器请求的链接获取数据。
comments.json

[
    { "author": "KXX", "date": "2018-8-17", "text": "天气不错！" },
    { "author": "KXX2", "date": "2018-8-17", "text": "天气不错2！" }
]

JQuery准备

安装jspm包管理

在本地目录安装包管理

下载JQuery

检查依赖配置

状态State

CommentBox .js

...

+ import $ from 'jquery';

class App extends Component {
+  constructor(props){
+    super(props);
+    this.state = {
+      data:[],
+    };
+  }

  render() {

...
-        
+        

...

通过构建构造函数，准备用于放置从父组件获取的数据的容器— —state状态汇中

JQuery&&Ajax

...

  constructor(props){

    ...

    console.log(this.props.url);
    $.ajax({
      url:this.props.url,
      dataType:'json',
      cache:false,
      success:comments => {
        this.setState({
          data:comments
        });
      },
      error:(xhr,status,error) => {
        console.log(error);
      }
    });
  }

通过this.setState获取数据后实现状态更新。

效果

更新获取数据的状态

App.js

...

  constructor(props){
    ...

    this.getComments();
    setInterval(() => this.getComments(),5000);//每五秒更新请求
  }

  getComments(){
    $.ajax({
      url:this.props.url,
      dataType:'json',
      cache:false,
      success:comments => {
        this.setState({
          data:comments
        });
      },
      error:(xhr,status,error) => {
        console.log(error);
      }
    });
  }

...

快捷链接

全部React学习笔记的目录 Click Here>>
全部Javascript学习笔记的目录 Click Here>>
Less学习笔记 Click Here>>
安利一波前端开发推荐使用的工具 Click Here>>
github各类实战练习源码下载 Click Here>>
如果你觉得我的东西能帮到你，无限欢迎给我的github库点个收藏Star~0v 0~