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

我有一个用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上进行了搜索，但没有得到任何正确的结果。

您需要从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);

var http=new-XMLHttpRequest（）；
变量url=”http:///saveuser";
var params=“param1=param1Value¶m2=param2Value”；
http.open（“POST”，url，true）；
http.setRequestHeader（“内容类型”、“应用程序/x-www-form-urlencoded”）；
http.onreadystatechange=函数（）{
如果（http.readyState==4&&http.status==200）{
警报（http.responseText）；
}
}
http.send（params）；

---

您还可以使用一些漂亮的库，如、等。

通常用于通信的较新API之一是

fetch

，它也逐渐成为浏览器标准

fetch

API文档

fetch

用法 更多信息，请访问：

交叉浏览器兼容性 <>因为浏览器并不总是统一的，所以你可以考虑使用一个多填充，比如<代码> WHWWG FETCH < /Cord>@ < /P> 与fetch进行反应

从“React”导入React；
导出类ReactForm扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
用户名：“”，
密码：“”，
名字：''，
姓氏：“”，
};
}
提交（e）{
e、 预防默认值（）；
取（'http://example.com/movies.json', {
正文：JSON.stringify（this.state），
缓存：“无缓存”，
凭据：“相同来源”，
标题：{
“内容类型”：“应用程序/json”
},
方法：“POST”，
模式：“cors”，
重定向：“跟随”，
推荐人：“无推荐人”，
})
.然后（功能（响应）{
控制台日志（响应）；
如果（response.status==200）{
警报（“已保存”）；
}否则{
警报（“问题保存”）；
}
//您无法解析“success”响应，因为它不是有效的JSON
/考虑使用有效的JSON-Req/RESP对。
//返回response.json（）；
});
}
render（）{
返回(
this.setState（{username:e.target.value}）}/>
this.setState（{密码：e.target.value}）}/>
this.setState（{first_name:e.target.value}）}/>
this.setState（{last_name:e.target.value}）}/>
提交
);
}
}

安装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);
  });

---

使用以下选项之一：axios、fetch或XMLHttpRequest。Axios项目已经停止，请使用比Axios更多的代码，最后一个代码很复杂

能否为React js表单添加代码…我不知道如何在React js中创建表单…@Ahmad:我提供了一个React表单示例。但还有一点是如何组装整个react应用程序的。但至少你有一些东西要开始好的，谢谢…但是请告诉我如何在我的应用程序中配置React JS，帮我一个忙？你能告诉我在我的应用程序中配置React JS的整个流程吗？然后创建表单，然后将请求发送给我的控制器……我建议你从这里开始：。答案并不是要详细说明如何设置和开发整个项目。你能为React js表单添加代码吗…我不知道如何在React js中创建表单。。。

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

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);
  });