1. 程式人生 > >2017.11.30 Reat前後端數據交互之Button提交數據處理(ajax方法單獨封裝成API,不用Form)

2017.11.30 Reat前後端數據交互之Button提交數據處理(ajax方法單獨封裝成API,不用Form)

logs 處理 mage mongoose 技術 module strong 輸入框 reat

1.按鈕定義:

技術分享圖片

2.引入外部js文件(封裝了ajax方法的文件):註意目錄結構

技術分享圖片

3.調用ajax文件中的具體方法:

技術分享圖片

4.關於ajax文件中方法的編寫語法:

寫法一:

技術分享圖片

寫法二:

技術分享圖片

寫法二對應的調用該方法的寫法:

技術分享圖片

##var mongoose = module.exports = exports = new Mongoose;

5.ES6中export、import與export default區別:

export與export default均可用於導出常量、函數、文件、模塊等,你可以在其它文件或模塊中通過import+(常量 | 函數 | 文件 | 模塊)名的方式,將其導入,以便能夠對其進行使用,但在一個文件或模塊中,export、import可以有多個,export default僅有一個。

技術分享圖片

6.關鍵的一步:React獲取頁面DOM(Input)的數據:

(1)按鈕綁定事件:

技術分享圖片

(2)給不同的輸入框綁定不同的Onchange函數:

技術分享圖片

(3)編寫不同輸入框對應的不同狀態改變函數,目的在於不同輸入框對應不同參數:

技術分享圖片

(4)提交按鈕綁定的事件函數可以調用不同狀態參數:

技術分享圖片

2017.11.30 Reat前後端數據交互之Button提交數據處理(ajax方法單獨封裝成API,不用Form)