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 ...
随机推荐
- js div大小随意伸缩
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...
- 【简●解】POJ 1185,LG P2704【炮兵阵地】
POJ 1185,LG P2704[炮兵阵地] 状压经典入门. [传送门] POJ 1185 洛谷 P2704 [题目大意] 司令部的将军们打算在 \(N\times M\) 的网格地图上部署他们的炮 ...
- 【2018 CCPC网络赛】1004 - 费马大定理&数学
题目地址:http://acm.hdu.edu.cn/showproblem.php?pid=6441 Knowledge Point: 1. 费马大定理:当整数n >2时,关于x, y, z的 ...
- 上传文件到Ubuntu阿里云服务器（windows到Linux的文件上传）
上传文件到Ubuntu阿里云服务器(windows到Linux的文件上传) 最近在阿里云上面租了一个轻量级服务器玩玩,学习学习怎么在服务器部署网站.然后嘞,在想要将本地文件上传到服务器的时候,自己研究 ...
- c++_方格填数（最新方法）
方格填数 如下的10个格子 +--+--+--+ | | | |+--+--+--+--+| | | | |+--+--+--+--+| | | |+--+--+--+ (如果显示有问题,也可以参 ...
- Python面向对象之模块和包
模块 模块的概念 模块是Python程序架构的一个核心概念 所有以.py结尾的源文件都是一个模块: 模块名也是标识符,需要遵循标识符的命名规则: 在模块中定义的全局变量,类,函数,都是直接给外界使用的 ...
- python_正则_re模块
正则表达式元字符: 字符匹配 : . :除换行符以外的任意单个字符 [] :指定范围内字符 [^] :指定范围外字符 次数匹配: * :任意次,0,1,多次 .* :任意字符 任意次 ? :至多1次或 ...
- PS小demo
1.打开图像素材. 2.图层 >> 添加调整图层 >> 色相/饱和度. 得到如下效果: 3.创建新图层,将图层混合模式设为“柔光”,选择笔刷工具,硬度100%,按下图所示绘制该 ...
- python selenium xpath定位方式
作者刚开始写博客,格式和语言方面难免存在问题,请大家海涵,如果有问题也请直接指出 xpath是一种在xm文档中定位的语言,详细简介,请自行参照百度百科,本文主要总结一下xpath的使用方法,个人看法, ...
- hdu 1500 dp
/* 状态转移方程式: dp[i][j]=Min(dp[i][j-1],dp[i-1][j-2]+(a[j-1]-a[j])*(a[j-1]-a[j])); 依次求出第i个人在第j个数时的所求的最小值 ...