【Javascript學習筆記】
目錄
- 目錄
- 資料準備
- 傳遞資料的連結
- 模拟資料
- JQuery準備
- 安裝jspm包管理
- 在本地目錄安裝包管理
- 下載下傳JQuery
- 檢查依賴配置
- 狀态State
- JQuery&&Ajax
- 效果
- 更新擷取資料的狀态
- 快捷連結
資料準備
傳遞資料的連結
index.js
- var commen = [
- { "author": "KXX", "date": "2018-8-17", "text": "天氣不錯！" },
- { "author": "KXX2", "date": "2018-8-17", "text": "天氣不錯2！" }
- ];
- ReactDOM.render(<App data={comments} />, document.getElementById('root'));
+ ReactDOM.render(<App url="./comments.json" />, document.getElementById('root'));
模拟資料
建立一個comments.json到index.html檔案的目錄裡，用json檔案模仿伺服器請求的連結擷取資料。
comments.json
[
{ "author": "KXX", "date": "2018-8-17", "text": "天氣不錯！" },
{ "author": "KXX2", "date": "2018-8-17", "text": "天氣不錯2！" }
]
JQuery準備
安裝jspm包管理
在本地目錄安裝包管理
下載下傳JQuery
檢查依賴配置
狀态State
CommentBox .js
...
+ import $ from 'jquery';
class App extends Component {
+ constructor(props){
+ super(props);
+ this.state = {
+ data:[],
+ };
+ }
render() {
...
- <CommentBox data={this.props.data} />
+ <CommentBox data={this.state.data} />
...
通過建構構造函數，準備用于放置從父元件擷取的資料的容器— —state狀态彙中
JQuery&&Ajax
...
constructor(props){
...
console.log(this.props.url);
$.ajax({
url:this.props.url,
dataType:'json',
cache:false,
success:comments => {
this.setState({
data:comments
});
},
error:(xhr,status,error) => {
console.log(error);
}
});
}
通過this.setState擷取資料後實作狀态更新。
效果
更新擷取資料的狀态
App.js
...
constructor(props){
...
this.getComments();
setInterval(() => this.getComments(),);//每五秒更新請求
}
getComments(){
$.ajax({
url:this.props.url,
dataType:'json',
cache:false,
success:comments => {
this.setState({
data:comments
});
},
error:(xhr,status,error) => {
console.log(error);
}
});
}
...
快捷連結
全部React學習筆記的目錄 Click Here>>
全部Javascript學習筆記的目錄 Click Here>>
Less學習筆記 Click Here>>
安利一波前端開發推薦使用的工具 Click Here>>
github各類實戰練習源碼下載下傳 Click Here>>
如果你覺得我的東西能幫到你，無限歡迎給我的github庫點個收藏Star~0v 0~