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 ...
随机推荐
- C++ 给自己的扫盲笔记
1.运算符new分配内存的格式: 指针变量名 = new 类型: 如分配一个20字节的name变量 :name = new char[20]; 2.strlen(s);函数: 返回字符串s的长度 ...
- 彻底卸载WIN10 OneDrive
彻底卸载WIN10 OneDrive @ECHO OFF %SystemRoot%\SysWOW64\OneDriveSetup.exe /uninstall RD "%UserProfil ...
- RabbitMQ 关键词解释
源地址: https://www.cnblogs.com/hz04022016/p/6518138.html RabbitMQ是流行的开源消息队列系统,用erlang语言开发.RabbitMQ是AMQ ...
- solr中的Tokenizer Filter
Tokenizer Tokenizer 的工作是将文本流分解为令牌,其中每个令牌(通常)是文本中字符的子序列.分析器知道它配置的字段,但 tokenizer 不是.Tokenizers 从字符流(Re ...
- LeetCode（16）3Sum Closest
题目 Given an array S of n integers, find three integers in S such that the sum is closest to a given ...
- XTU 二分图和网络流 练习题 C. 方格取数(1)
C. 方格取数(1) Time Limit: 5000ms Memory Limit: 32768KB 64-bit integer IO format: %I64d Java class ...
- php-fpm.conf
[global]pid = /usr/local/php/var/run/php-fpm.piderror_log = /usr/local/php/var/log/php-fpm.loglog_le ...
- Linux（1）：基本配置
linux里面的网络(网卡)配置: 1. 输出 setup 命令进行设置 2. 选择 "Network configuration" ,按 回车键 3. 选择 "Devi ...
- Flume+kakfa+sparkStream实时处理数据测试
flume:从数据源拉取数据 kafka:主要起到缓冲从flume拉取多了的数据 sparkStream:对数据进行处理 一.flume拉取数据 1.源数据文件读取配置 在flume目录的 ...
- 库操作&表操作
系统数据库 ps:系统数据库: mysql 授权库,主要存储系统用户的 权限信息 test MySQL数据库系统自动创建的 测试数据库 ination_schema 虚拟库,不占用磁盘空间,存储的是数 ...