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 ...
随机推荐
- UVA12633 Super Rooks on Chessboard
题目描述 题解: 第一眼满眼骚操作,然后全部否掉. 然后屈服于题解,才发现这题这么执掌. 首先,如果这个东西是普通的车,那我们可以记录一下$x,y$的覆盖情况,然后减一下; 但是这个可以斜着走. 所以 ...
- Spring中RestTemplate的使用方法
一.REST 在互联网中,我们会通过请求url来对网络上的资源做增删改查等动作,这里的请求包含两部分:动词,主要包括增.删.改.查:名词,就是网络中的各种资源.传统的非REST风格的请求方式是把动词和 ...
- validate 常用的输入框校验
记录一下angular可以直接用的输入框校验器,外加一个国内手机号码的校验 <!DOCTYPE html> <html> <head> <meta chars ...
- C语言学习9
婚礼的谎言 三对情侣参加婚礼,三个新郎为A.B.C,三个新娘为X.Y.Z.有人想知道究竟水域谁结婚2,于是就问新人中的三位,得到结果如下:A说他将和X结婚:X说她的未婚夫是C:C说他将和Z结婚.这人事 ...
- 小白菜OJ 1122 公牛母牛配（最大二分图匹配模板）
题意: n只公牛和m只母牛,某些公牛和某些母牛互相喜欢.但最后一只公牛只能和一只母牛建立一对一匹配.要使得最后牛群匹配对数最大. 链接: http://caioj.cn/problem.php?id= ...
- JavaScript高级程序设计中第2、3章中细节知识点
第2章 1.<script src='script.js' type='text/javascript'></script>中,只要不包含defer和async属性,浏览器都会 ...
- Jmeter接口测试实战-Cookies
场景: 接口测试时常都需要登录,请求方式(post), 登录常用的方法有通过获取token, 获取session, 获取cookie, 等等. 这几种都有一个共同的特点, 有效期(expires). ...
- POJ-3100-Root of the Problem，原来是水题，暴力求解~~~
Root of the Problem Time Limit: 1000MS Memory Limit: 65536K http://poj.org/problem?i ...
- [Docker]容器镜像
1.rootfs的基础知识 Mount namespaces 隔离的是文件系统挂接点,它使每个容器能看到不同的文件系统层次结构,即每当创建一个新容器时,希望容器进程看到的文件系统时一个独立的隔离环境 ...
- windows 2008、2012防火墙添加入站规则教程（端口例外）
windows2008.2012的设置方法基本一样,以下是以windows2008为例做添加80端口的步骤. 1.依次点“控制面板”→“系统和安全”→“windows防火墙”→“高级设置”,打开“高级 ...