React通过Ajax获取数据
React 组件的数据可以通过 componentDidMount 方法中的 Ajax 来获取，当从服务端获取数据库可以将数据存储在 state 中，再用 this.setState 方法重新渲染 UI。
当使用异步加载数据时，在组件卸载前使用 componentWillUnmount 来取消未完成的请求。
以下实例演示了获取 Github 用户最新 gist 共享描述:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>菜鸟教程 React 实例</title>
<script src="http://static.runoob.com/assets/react/react-0.14.7/build/react.js"></script>
<script src="http://static.runoob.com/assets/react/react-0.14.7/build/react-dom.js"></script>
<script src="http://static.runoob.com/assets/react/browser.min.js"></script>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
var UserGist = React.createClass({
getInitialState: function() {
return {
username: '',
lastGistUrl: ''
};
}, componentDidMount: function() {
this.serverRequest = $.get(this.props.source, function (result) {
var lastGist = result[];
this.setState({
username: lastGist.owner.login,
lastGistUrl: lastGist.html_url
});
}.bind(this));
}, componentWillUnmount: function() {
this.serverRequest.abort();
}, render: function() {
return (
<div>
{this.state.username} 用户最新的 Gist 共享地址：
<a href={this.state.lastGistUrl}>{this.state.lastGistUrl}</a>
</div>
);
}
}); ReactDOM.render(
<UserGist source="https://api.github.com/users/octocat/gists" />,
document.getElementById('example')
);
</script>
</body>
</html>
React通过Ajax获取数据的更多相关文章
- vue 中使用 AJAX获取数据的方法
在VUE开发时,数据可以使用jquery和vue-resource来获取数据.在获取数据时,一定需要给一个数据初始值. 看下例: <script type="text/javascri ...
- jquery通过ajax获取数据，控制显示的数据条数
效果图: 现在我们可以先看它的json数据,如图所示: 然后可以对应我们的代码进行理解. jquery通过ajax获取数据,并通过窗口大小控制显示的数据条数,以及可以根据 ...
- jquery.ajax和Ajax 获取数据
前几天接触了jquery 看到里面ajax的部分,自己也不是很懂,然后有重复看了即便,然后写了一个小功能,分享下...我刚学的.有错误的请指教. 验证用户名是否存在 在checkname_jqajax ...
- node.js之用ajax获取数据和ejs获取数据
摘要:学了node之后有时候分不清前台和后台,今天用ajax和ejs来从后台获取数据,没有数据库,用json数据来进行模拟数据库:来区分前台和后台需要干什么? 一.用ejs获取数据 1.文件目录 2. ...
- vue ajax获取数据的时候，如何保证传递参数的安全或者说如何保护api的安全
https://segmentfault.com/q/1010000005618139 vue ajax获取数据的时候,如何保证传递参数的安全或者说如何保护api的安全 点击提交,发送请求.但是api ...
- 获取链接的参数，判断是否是微信打开，ajax获取数据
//获取链接参数function GetQueryString(name) { var reg = new RegExp("(^|&)" + name + " ...
- select2 AJAX获取数据
页面效果: index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"& ...
- 用Nodejs+Express搭建web，nodejs路由和Ajax传数据并返回状态，nodejs+mysql通过ajax获取数据并写入数据库
小编自学Nodejs,看了好多文章发现都不全,而且好多都是一模一样的 当然了,这只是基础的demo,经供参考,但是相信也会有收获 今天的内容是用Nodejs+Express搭建基本的web,然后呢no ...
- [NodeJs] 用Nodejs+Express搭建web，nodejs路由和Ajax传数据并返回状态，nodejs+mysql通过ajax获取数据并写入数据库
小编自学Nodejs,看了好多文章发现都不全,而且好多都是一模一样的 当然了,这只是基础的demo,经供参考,但是相信也会有收获 今天的内容是用Nodejs+Express搭建基本的web,然后呢no ...
随机推荐
- UVA-1625-Color Length(DP LCS变形)
Color Length(UVA-1625)(DP LCS变形) 题目大意 输入两个长度分别为n,m(<5000)的颜色序列.要求按顺序合成同一个序列,即每次可以把一个序列开头的颜色放到新序列的 ...
- Memcached的安装和应用
Memcached的安装 1.安装libeventlibevent是一个事件触发的网络库,适用于windows.linux.bsd等多种平台,内部使用 select.epoll.kqueue等系统调用 ...
- Week06-继承、多态、抽象类与接口
Week06-继承.多态.抽象类与接口 1. 本周学习总结 1.1 写出你认为本周学习中比较重要的知识点关键词 关键字:接口,Comparable,interface关键字,Comparator,继承 ...
- 数据结构实验4：C++实现循环队列
实验4 4.1 实验目的 熟练掌握队列的顺序存储结构和链式存储结构. 熟练掌握队列的有关算法设计,并在循环顺序队列和链队列上实现. 根据具体给定的需求,合理设计并实现相关结构和算法. 4.2 实验要求 ...
- Mac系统下VirtualBox装Centos7设置静态IP并连网
用Virtualbox装了三台Centos7,现在需要设置成三台之间可以相互通信,并且三台都可以连外网. 需求如下: 1. 三台内部相互通信 2. 可以上外网 3. 主机可以虚拟机可以相互通信(she ...
- python和搜索
# -*- coding: UTF-8 -*- import re # 搜索逻辑 def querylogic(list): query = {} if len(list) > 1 or len ...
- NYOJ660逃离地球——只为最大存活率~
逃离地球 时间限制:1000 ms | 内存限制:65535 KB 难度: 描述 据霍金的<时间简史>所述,在几亿年之后将再次发生宇宙大爆炸.在宇宙大爆炸后,地球上将新生出许多生物而不 ...
- c# 类如何生成dll文件及引用
1.打开“工具”菜单下的“外部工具”子菜单: 2.点击“添加按钮,增加一个菜单,菜单内容填写如下: 注意参数那里为:/k "C:\vs2010\VC\vcvarsall.bat" ...
- [HDU5919]Sequence II
[HDU5919]Sequence II 试题描述 Mr. Frog has an integer sequence of length n, which can be denoted as a1,a ...
- C语言一些常见的操作字符串方法
// 首字母大写 ;(c=string[i])!='\0';i++) // 字符串碰到\0结束 C知识 { if (c==' ') { printf("%c",c), word=; ...