如何使用 reactjs 向服务器发送请求？

Question

我有一个使用 jquery 和 spring mvc 开发的 Web 应用程序...一切运行良好...但是现在我想在我的应用程序中使用 React JS...我想在 react js 中创建一个表单并将 ajax 请求发送到我的 spring mvc 控制器...我知道如何使用 jquery 但不使用 react js ....请告诉我一种创建表单并向 spring mvc 控制器发送请求的方法...。 这是我想要获取请求的控制器方法...

@RequestMapping(value = "/saveuser", method = RequestMethod.POST)
    public @ResponseBody String Save(/*@Valid Users user, BindingResult result,*/HttpServletRequest request, Model model, 
            @RequestParam(required = false) Boolean reverseBeforeSave) {
   
        String userName = request.getParameter("username");
        String password = request.getParameter("password");
        String firstName = request.getParameter("first_name");
        String lastName = request.getParameter("last_name");
        System.out.println("save method");
        String[] roleNames = request.getParameterValues("roles");

        userService.saveUserandRoles(userName, password, firstName, lastName, roleNames);
        return "success";
        
    }

我在 StackOverflow 中浏览了不同的解决方案，并在 google 上进行了搜索，但没有得到任何正确的结果。

Answer 1

安装 axios

$ npm install axios

导入axios

import axios from 'axios';

GET 请求示例

axios.get('https://api.example.com/')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

POST 请求示例

var body = {
    firstName: 'testName',
    lastName: 'testLastName'
};

axios.post('https://api.example.com/', body)
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

Answer 2

您需要从您的 react.js 应用程序向服务器发送 XMLHttp 请求。 示例：

var http = new XMLHttpRequest();
var url = "http://<server-url>/saveuser";
var params = "param1=param1Value&param2=param2Value";
http.open("POST", url, true);
http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

http.onreadystatechange = function() {
  if(http.readyState == 4 && http.status == 200) {
      alert(http.responseText);
  }
}
http.send(params);

您还可以使用一些漂亮的库，例如axios、fetch、superagent、request 等。

Answer 3

后来通常用于通信的 API 之一是 fetch，它也在慢慢成为浏览器标准。

fetchAPI文档

https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API

fetch用法

更多信息：https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

    fetch('http://example.com/movies.json', { // optional fetch options
        body: JSON.stringify(data), // you may send any data, encoded as you wish. shall match content-type 
        cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
        credentials: 'same-origin', // include, same-origin, *omit
        headers: {
          'content-type': 'application/json'
        },
        method: 'POST', // *GET, POST, PUT, DELETE, etc.
        mode: 'cors', // no-cors, cors, *same-origin
        redirect: 'follow', // *manual, follow, error
        referrer: 'no-referrer', // *client, no-referrer
    })
    .then(function(response) {
        // manipulate response object
        // check status @ response.status etc.
        return response.json(); // parses json
    })
    .then(function(myJson) {
        // use parseed result
        console.log(myJson);
    });

跨浏览器兼容性

由于浏览器并不总是统一的，您可以考虑使用 polyfill，例如 whatwg-fetch @ https://github.com/github/fetch

Form 与 fetch 反应

import React from 'react';

export class ReactForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
        username: '',
        password: '',
        first_name: '',
        last_name: '',
    };
  }

  onSubmit(e) {
    e.preventDefault();
    fetch('http://example.com/movies.json', {
      body: JSON.stringify(this.state),
      cache: 'no-cache',
      credentials: 'same-origin',
      headers: {
        'content-type': 'application/json'
      },
      method: 'POST',
      mode: 'cors',
      redirect: 'follow',
      referrer: 'no-referrer',
    })
      .then(function (response) {
        console.log(response);
        if (response.status === 200) {
          alert('Saved');
        } else {
          alert('Issues saving');
        }
        // you cannot parse your "success" response, since that is not a valid JSON
        // consider using valid JSON req/resp pairs.
        // return response.json();
      });

  }

  render() {
    return (
      <form onSubmit={this.onSubmit.bind()}>
        <input type="text" name="username" onChange={e => this.setState({username: e.target.value})}/>
        <input type="password" name="password" onChange={e => this.setState({password: e.target.value})}/>
        <input type="text" name="first_name" onChange={e => this.setState({first_name: e.target.value})}/>
        <input type="text" name="last_name" onChange={e => this.setState({last_name: e.target.value})}/>
        <button type="submit">Submit</button>
      </form>
    );
  }
}

Answer 4

使用以下之一：axios、fetch 或 XMLHttpRequest。 Project axios 已停止所有者，fetch 使用的代码比 axios 多，最后一个复杂