react.js 获取 java 后台数据

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/buyaopingbixiazai/article/details/83624202

说明一下我是使用creat-react-app来创建的项目

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;