您的位置：首页 > Web前端 > JQuery

第九节，ajax异步处理，需要引用jquery

2017-04-27 10:12 344 查看
<!doctype html>

<html lang="en">

<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="./js/react.js"></script>
<script src="./js/react-dom.js"></script>
<!-- 原本的 react package 被拆分为 react 及 react-dom 两个 package。其中 react package 中包含 React.createElement、 .createClass、 .Component， .PropTypes， .Children 这些 API，而 react-dom package 中包含 ReactDOM.render、 .unmountComponentAtNode、
.findDOMNode。 -->
<script src="./js/browser.min.js"></script>
<!-- 使浏览器支持babel，你可以使用ECMAscript2015编码(javascript下一代标准) .js、.jsx、.es和.es6 -->
<script src="./js/jquery.min.js"></script>

</head>

<body>
<div id="ex1"></div>
<script type="text/babel">
let Ajax = React.createClass({
//ceateClass创建的类，首字母必须大写 例如 HelloMessage          
//let是ECMA6的声明变量，用它所声明的变量， 只在let命令所在的代码块内有效。
getInitialState(){
//getInitialState 是系统固定方法，不能变更
//用于设置 this.state 内的初始属性
return {
username : '',
lastGistUrl : '',
};
},
componentDidMount(){
//componentDidMount 是系统固定方法，不能变更
//用于已插入真实 DOM之后 的操作

$.get(this.props.source,function(result){
//ajax语法 $.get(URL,data,function(data,status,xhr),dataType); // data和datatype可选

var lastGist = result[0]; 
//获取ajax返回数据并赋值给lastGist

if(this.isMounted()){
//如果组件渲染到了 DOM 中，isMounted() 返回 true。可以使用该方法保证 setState() 和 forceUpdate() 在ajax异步场景下的调用不会出错。
this.setState({
username : lastGist.owner.login,
lastGistUrl : lastGist.html_url,
});
}
}.bind(this));
//回调函数一定要加.bind(this)方法,绑定到dom对象中
},
render(){
return (
<div>
{this.state.username},s last gist is <a href={this.state.lastGistUrl} target={this.props.target}>here</a>.
</div>
);
}
});
ReactDOM.render(
<Ajax source="https://api.github.com/users/octocat/gists" target="_blank" />,
document.getElementById('ex1')
);
</script>

</body>

</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  javascript
相关文章推荐
新的分享
章节导航