react js java_react.js 获取 java 后台数据

react.js 获取 java 后台数据

发布时间：2018-11-01 17:56,

浏览次数：540

, 标签：

react

js

java

说明一下我是使用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 (

>

onClick={this.changeInputValue.bind(this)} >search

); } } export default HelloWorld;