react.js 获取 java 后台数据 - 好文

说明一下我是使用creat-react-app来创建的项目
<https://blog.csdn.net/buyaopingbixiazai/article/details/83104853>

1. 在package.json加上如下配置即可

"proxy": "http://localhost:8082",
{ "name": "my-app", "version": "0.1.0", "private": true, "proxy":
"http://localhost:8082", "dependencies": { "react": "^16.5.2", "react-dom":
"^16.5.2", "react-scripts": "2.0.4" }, "scripts": { "start": "react-scripts
start", "build": "react-scripts build", "test": "react-scripts test", "eject":
"react-scripts eject" }, "eslintConfig": { "extends": "react-app" },
"browserslist": [ ">0.2%", "not dead", "not ie <= 11", "not op_mini all" ] }
2.请求
// 请求后台数据 changeInputValue(){ /* 查询数据的格式 */ let filter={ object:{ object:{ } }
} var url ="/flightsInterfaceBLH_searchFlightsAndPersons.do"; var
getInformation ={ method:"POST", headers:{ "Content-Type":"application/json" },
/* json格式转换 */ body:JSON.stringify(filter) } fetch(url,getInformation)
.then(response => response.json()) .then(json =>{ // 返回的数据根据自己返回的json格式取值
debugger; this.setState({ inputValue:json[0].searchDate }) }) }
我的json数据格式
[ { statusCode: "1", statusInfo: "success", searchDate: "2018-11-01",
searchAirport: null, confirmTime: null, data: [ ] } ]
3.结果

4.附上全部代码
import React, { Component } from 'react'; class HelloWorld extends
React.Component { /** * 初始化 * @param {*} props */ constructor(props){
super(props); this.state = { inputValue : '' } } // 请求后台数据 changeInputValue(){
/* 查询数据的格式 */ let filter={ object:{ object:{ } } } var url
="/flightsInterfaceBLH_searchFlightsAndPersons.do"; var getInformation ={
method:"POST", headers:{ "Content-Type":"application/json" }, /* json格式转换 */
body:JSON.stringify(filter) } fetch(url,getInformation) .then(response =>
response.json()) .then(json =>{ // 返回的数据根据自己返回的json格式取值 debugger;
this.setState({ inputValue:json[0].searchDate }) }) } render() { return ( <div
> <div> <input value={this.state.inputValue}/> <button className='red-btn'
onClick={this.changeInputValue.bind(this)} >search</button> </div> <ul>
<li></li> </ul> </div> ); } } export default HelloWorld;

热门工具换一换