blocks|key|1865324|text|直接从React+docs|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1865325|fetch('https://mywebsite.com/endpoint/',+{
++method:+'POST',
++headers:+{
++++'Accept':+'application/json',
++++'Content-Type':+'application/json',
++},
++body:+JSON.stringify({
++++firstParam:+'yourValue',
++++secondParam:+'yourOtherValue',
++})
})|code-block|syntax|javascript|1865326|(这是发布JSON，但您也可以这样做，例如，multipart-form。)|1865327|entityMap|0|LINK|mutability|MUTABLE|url|https://facebook.github.io/react-native/docs/network^0|3|A|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@$A|T|B|U|1|V]]|C|$]]|$1|D|3|E|5|F|7|W|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|6|7|X|8|@]|9|@]|C|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|C|$]]]|L|$M|$5|N|O|P|C|$Q|R]]]]

Straight from the <a href="https://facebook.github.io/react-native/docs/network" rel="noreferrer">React docs</a>:

<pre><code>fetch('https://mywebsite.com/endpoint/', {
 method: 'POST',
 headers: {
 'Accept': 'application/json',
 'Content-Type': 'application/json',
 },
 body: JSON.stringify({
 firstParam: 'yourValue',
 secondParam: 'yourOtherValue',
 })
})
</code></pre>

(This is posting JSON, but you could also do, for example, multipart-form.)

blocks|key|1865490|text|React对如何进行REST调用并没有真正的看法。基本上，您可以为这项任务选择您喜欢的任何类型的AJAX库。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1865491|对于普通的老式JavaScript，最简单的方法可能是这样：|1865492|var+request+=+new+XMLHttpRequest();
request.open('POST',+'/my/url',+true);
request.setRequestHeader('Content-Type',+'application/json;+charset=UTF-8');
request.send(data);|code-block|syntax|javascript|1865493|在现代浏览器中，您还可以使用fetch。|offset|length|style|CODE|1865494|如果您有更多的组件进行REST调用，那么将这种逻辑放在一个可以跨组件使用的类中可能是有意义的。例如，RESTClient.post(…)|1865495|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en/docs/Web/API/Fetch_API^0|0|0|0|E|5|E|5|0|0|1E|I|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Z|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|10|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|11|8|@$K|12|L|13|M|N]]|9|@$K|14|L|15|1|16]]|A|$]]|$1|O|3|P|5|6|7|17|8|@$K|18|L|19|M|N]]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|1A|8|@]|9|@]|A|$]]]|R|$S|$5|T|U|V|A|$W|X]]]]

React doesn't really have an opinion about how you make REST calls. Basically you can choose whatever kind of AJAX library you like for this task.

The easiest way with plain old JavaScript is probably something like this:

<pre><code>var request = new XMLHttpRequest();
request.open('POST', '/my/url', true);
request.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');
request.send(data);
</code></pre>

In modern browsers you can also use <a href="https://developer.mozilla.org/en/docs/Web/API/Fetch_API" rel="noreferrer"><code>fetch</code></a>.

If you have more components that make REST calls it might make sense to put this kind of logic in a class that can be used across the components. E.g. <code>RESTClient.post(…)</code>

blocks|key|1651288|text|另一个最近流行的包是：axios|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1651289|安装：npm+install+axios+--save|style|CODE|1651290|简单的基于承诺的请求|1651291|1651292|axios.post('/user',+{
++++firstName:+'Fred',
++++lastName:+'Flintstone'
++})
++.then(function+(response)+{
++++console.log(response);
++})
++.catch(function+(error)+{
++++console.log(error);
++});|code-block|syntax|javascript|1651293|entityMap|0|LINK|mutability|MUTABLE|url|https://www.npmjs.com/package/axios^0|B|5|0|0|3|O|0|0|0|0^^$0|@$1|2|3|4|5|6|7|X|8|@]|9|@$A|Y|B|Z|1|10]]|C|$]]|$1|D|3|E|5|6|7|11|8|@$A|12|B|13|F|G]]|9|@]|C|$]]|$1|H|3|I|5|6|7|14|8|@]|9|@]|C|$]]|$1|J|3|-4|5|6|7|15|8|@]|9|@]|C|$]]|$1|K|3|L|5|M|7|16|8|@]|9|@]|C|$N|O]]|$1|P|3|-4|5|6|7|17|8|@]|9|@]|C|$]]]|Q|$R|$5|S|T|U|C|$V|W]]]]

Another recently popular packages is : <a href="https://www.npmjs.com/package/axios" rel="noreferrer">axios</a>

Install : <code>npm install axios --save</code>

Simple Promise based requests

<hr>

<pre><code>axios.post('/user', {
 firstName: 'Fred',
 lastName: 'Flintstone'
 })
 .then(function (response) {
 console.log(response);
 })
 .catch(function (error) {
 console.log(error);
 });
</code></pre>

blocks|key|1865573|text|您可以安装superagent|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1865574|npm+install+superagent+--save|code-block|syntax|javascript|1865575|然后用于对服务器进行post调用|1865576|import+request+from+"../../node_modules/superagent/superagent";

request
.post('http://localhost/userLogin')
.set('Content-Type',+'application/x-www-form-urlencoded')
.send({+username:+"username",+password:+"password"+})
.end(function(err,+res){
console.log(res.text);
});++|1865577|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

you can install superagent

<pre><code>npm install superagent --save
</code></pre>

then for make post call to server

<pre><code>import request from "../../node_modules/superagent/superagent";

request
.post('http://localhost/userLogin')
.set('Content-Type', 'application/x-www-form-urlencoded')
.send({ username: "username", password: "password" })
.end(function(err, res){
console.log(res.text);
}); 
</code></pre>

blocks|key|1865749|text|从2018年起，您将有一个更现代的选择，即在您的ReactJS应用程序中集成异步/等待。可以使用基于promise的HTTP客户端库，比如axios。示例代码如下：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1865750|import+axios+from+'axios';
...
class+Login+extends+Component+{
++++constructor(props,+context)+{
++++++++super(props,+context);
++++++++this.onLogin+=+this.onLogin.bind(this);
++++++++...
++++}
++++async+onLogin()+{
++++++++const+{+email,+password+}+=+this.state;
++++++++try+{
+++++++++++const+response+=+await+axios.post('/login',+{+email,+password+});
+++++++++++console.log(response);
++++++++}+catch+(err)+{
+++++++++++...
++++++++}
++++}
++++...
}|code-block|syntax|javascript|1865751|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

As of 2018 and beyond, you have a more modern option which is to incorporate async/await in your ReactJS application. A promise-based HTTP client library such as axios can be used. The sample code is given below:

<pre><code>import axios from 'axios';
...
class Login extends Component {
 constructor(props, context) {
 super(props, context);
 this.onLogin = this.onLogin.bind(this);
 ...
 }
 async onLogin() {
 const { email, password } = this.state;
 try {
 const response = await axios.post('/login', { email, password });
 console.log(response);
 } catch (err) {
 ...
 }
 }
 ...
}
</code></pre>

blocks|key|1651530|text|我认为这也是一种正常的方式。但是很抱歉，我不能用英语描述((|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1651531|​|1651532|++++submitHandler+=+e+=>+{
++++e.preventDefault()
++++console.log(this.state)
++++fetch('http://localhost:5000/questions',{
++++++++method:+'POST',
++++++++headers:+{
++++++++++++Accept:+'application/json',
++++++++++++++++++++'Content-Type':+'application/json',
++++++++},
++++++++body:+JSON.stringify(this.state)
++++}).then(response+=>+{
++++++++++++console.log(response)
++++++++})
++++++++.catch(error+=>{
++++++++++++console.log(error)
++++++++})
++++
}|code-block|syntax|javascript|1651533|1651534|https://googlechrome.github.io/samples/fetch-api/fetch-post.html|offset|length|1651535|fetch('url/questions'，{+method：'POST'，headers：{+Accept：'application/json'，'Content-Type'：'application/json'，}，body:+JSON.stringify(this.state)+}).then(response+=>{+console.log(response)+})+.catch(error+=>+{+console.log(error)+})|1651536|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|0|0|0|1S|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|X|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Y|8|@]|9|@]|A|$G|H]]|$1|I|3|C|5|6|7|Z|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|10|8|@]|9|@$L|11|M|12|1|13]]|A|$]]|$1|N|3|O|5|6|7|14|8|@]|9|@]|A|$]]|$1|P|3|-4|5|6|7|15|8|@]|9|@]|A|$]]]|Q|$R|$5|S|T|U|A|$V|K]]]]

I think this way also a normal way. But sorry, I can't describe in English ((

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code> submitHandler = e =&gt; {
 e.preventDefault()
 console.log(this.state)
 fetch('http://localhost:5000/questions',{
 method: 'POST',
 headers: {
 Accept: 'application/json',
 'Content-Type': 'application/json',
 },
 body: JSON.stringify(this.state)
 }).then(response =&gt; {
 console.log(response)
 })
 .catch(error =&gt;{
 console.log(error)
 })
 
}</code></pre>
</div>
</div>


<a href="https://googlechrome.github.io/samples/fetch-api/fetch-post.html" rel="noreferrer">https://googlechrome.github.io/samples/fetch-api/fetch-post.html</a>

fetch('url/questions',{
 method: 'POST',
 headers: {
 Accept: 'application/json',
 'Content-Type': 'application/json',
 },
 body: JSON.stringify(this.state)
 }).then(response => {
 console.log(response)
 })
 .catch(error =>{
 console.log(error)
 })

blocks|key|1865538|text|Here是一个基于ajax类库列表比较的功能和支持。我更喜欢将fetch仅用于客户端开发，或者将isomorphic-fetch用于客户端和服务器端开发。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1865539|有关isomorphic-fetch+vs+fetch的更多信息|1865540|entityMap|0|LINK|mutability|MUTABLE|url|http://andrewhfarmer.com/ajax-libraries/|1|https://developer.mozilla.org/en-US/docs/Web/API/GlobalFetch/fetch|2|https://github.com/matthew-andrews/isomorphic-fetch|3|https://stackoverflow.com/questions/37936715/what-is-the-difference-between-isomorphic-fetch-and-fetch^0|0|4|0|V|5|1|1C|G|2|0|2|P|3|0^^$0|@$1|2|3|4|5|6|7|T|8|@]|9|@$A|U|B|V|1|W]|$A|X|B|Y|1|Z]|$A|10|B|11|1|12]]|C|$]]|$1|D|3|E|5|6|7|13|8|@]|9|@$A|14|B|15|1|16]]|C|$]]|$1|F|3|-4|5|6|7|17|8|@]|9|@]|C|$]]]|G|$H|$5|I|J|K|C|$L|M]]|N|$5|I|J|K|C|$L|O]]|P|$5|I|J|K|C|$L|Q]]|R|$5|I|J|K|C|$L|S]]]]

<a href="http://andrewhfarmer.com/ajax-libraries/" rel="nofollow noreferrer">Here</a> is a the list of ajax libraries comparison based on the features and support.
I prefer to use <a href="https://developer.mozilla.org/en-US/docs/Web/API/GlobalFetch/fetch" rel="nofollow noreferrer">fetch</a> for only client side development or <a href="https://github.com/matthew-andrews/isomorphic-fetch" rel="nofollow noreferrer">isomorphic-fetch</a> for using in both client side and server side development.

For more information on <a href="https://stackoverflow.com/questions/37936715/what-is-the-difference-between-isomorphic-fetch-and-fetch">isomorphic-fetch vs fetch</a>

blocks|key|1651676|text|下面是在reactjs中定义和调用post+API的简单方法。使用命令npm+install+axios安装axios并调用post+req方法，它将返回包含100个元素的数组。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1651677|//+Define+post_req()+Method+in+authAction.js

import+axios+from+'axios';

const+post_req+=+(data)+=>+{
return+new+Promise((resolve,+reject)+=>+{
const+url+=+'https://jsonplaceholder.typicode.com/posts'
const+header+=+{
++++"Access-Control-Allow-Origin":+"*",
++++"Content-Type:+application/json"
}
axios({
++++method:+'post',
++++url:+url,
++++data:+data,
++++headers:+header
+});
+.then((res)=>{resolve(res);})
+.catch((err)=>{reject(err);})
+})
}

//+Calling+post_req()+Method+in+react+component+
import+React,+{+Component+}+from+'react';
import+{+post_req+}+from+'path+of+file+authAction.js'

class+MyReactComponent+extends+Component+{
constructor(props)+{
super(props);
this.state+=+{
+myList:[]
+};
}
componentDidMount()+{
let+data+=+{
+.......
+}+
+this.props.post_req(data)
+.then((resp)=>{this.setState({myList:resp.data})})
+.catch((err)=>{console.log('here+is+my+err',err)})
}
render()+{
return+(
++<div>
++++....
++</div)
+}
}
export+default+MyReactComponent;|code-block|syntax|javascript|1651678|entityMap^0|Z|H|1I|5|1Q|8|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]|$9|P|A|Q|B|C]|$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|T|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|U|8|@]|D|@]|E|$]]]|L|$]]

Here is the simple method to define and call post APIs in reactjs. Install <code>axios</code> using command <code>npm install axios</code> and call <code>post req</code> method wherever you want, it will return array that contains 100 elements.
<pre><code>// Define post_req() Method in authAction.js

import axios from 'axios';

const post_req = (data) =&gt; {
return new Promise((resolve, reject) =&gt; {
const url = 'https://jsonplaceholder.typicode.com/posts'
const header = {
 &quot;Access-Control-Allow-Origin&quot;: &quot;*&quot;,
 &quot;Content-Type: application/json&quot;
}
axios({
 method: 'post',
 url: url,
 data: data,
 headers: header
 });
 .then((res)=&gt;{resolve(res);})
 .catch((err)=&gt;{reject(err);})
 })
}

// Calling post_req() Method in react component 
import React, { Component } from 'react';
import { post_req } from 'path of file authAction.js'

class MyReactComponent extends Component {
constructor(props) {
super(props);
this.state = {
 myList:[]
 };
}
componentDidMount() {
let data = {
 .......
 } 
 this.props.post_req(data)
 .then((resp)=&gt;{this.setState({myList:resp.data})})
 .catch((err)=&gt;{console.log('here is my err',err)})
}
render() {
return (
 &lt;div&gt;
 ....
 &lt;/div)
 }
}
export default MyReactComponent;
</code></pre>

blocks|key|1651559|text|下面是为get和post修改的util函数(堆栈上的另一个post+)。制作Util.js文件。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1651560|let+cachedData+=+null;
let+cachedPostData+=+null;

const+postServiceData+=+(url,+params)+=>+{
++++console.log('cache+status'+%2B+cachedPostData+);
++++if+(cachedPostData+===+null)+{
++++++++console.log('post-data:+requesting+data');
++++++++return+fetch(url,+{
++++++++++++method:+'POST',
++++++++++++headers:+{
++++++++++++++'Accept':+'application/json',
++++++++++++++'Content-Type':+'application/json',
++++++++++++},
++++++++++++body:+JSON.stringify(params)
++++++++++})
++++++++.then(response+=>+{
++++++++++++cachedPostData+=+response.json();
++++++++++++return+cachedPostData;
++++++++});
++++}+else+{
++++++++console.log('post-data:+returning+cachedPostData+data');
++++++++return+Promise.resolve(cachedPostData);
++++}
}

const+getServiceData+=+(url)+=>+{
++++console.log('cache+status'+%2B+cachedData+);
++++if+(cachedData+===+null)+{
++++++++console.log('get-data:+requesting+data');
++++++++return+fetch(url,+{})
++++++++.then(response+=>+{
++++++++++++cachedData+=+response.json();
++++++++++++return+cachedData;
++++++++});
++++}+else+{
++++++++console.log('get-data:+returning+cached+data');
++++++++return+Promise.resolve(cachedData);
++++}
};

export++{+getServiceData,+postServiceData+};|code-block|syntax|javascript|1651561|在另一个组件中的用法如下所示|1651562|import+{+getServiceData,+postServiceData+}+from+'./../Utils/Util';

constructor(props)+{
++++super(props)
++++this.state+=+{
++++++datastore+:+[]
++++}
++}

componentDidMount+=+()+=>+{++
++++let+posturl+=+'yoururl';+
++++let+getdataString+=+{+name:+"xys",+date:"today"};++
++++postServiceData(posturl,+getdataString)
++++++.then(items+=>+{+
++++++++this.setState({+datastore:+items+})+
++++++console.log(items);+++
++++});
++}|1651563|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

Here is a util function modified (another post on stack) for get and post both. Make Util.js file.

<pre><code>let cachedData = null;
let cachedPostData = null;

const postServiceData = (url, params) =&gt; {
 console.log('cache status' + cachedPostData );
 if (cachedPostData === null) {
 console.log('post-data: requesting data');
 return fetch(url, {
 method: 'POST',
 headers: {
 'Accept': 'application/json',
 'Content-Type': 'application/json',
 },
 body: JSON.stringify(params)
 })
 .then(response =&gt; {
 cachedPostData = response.json();
 return cachedPostData;
 });
 } else {
 console.log('post-data: returning cachedPostData data');
 return Promise.resolve(cachedPostData);
 }
}

const getServiceData = (url) =&gt; {
 console.log('cache status' + cachedData );
 if (cachedData === null) {
 console.log('get-data: requesting data');
 return fetch(url, {})
 .then(response =&gt; {
 cachedData = response.json();
 return cachedData;
 });
 } else {
 console.log('get-data: returning cached data');
 return Promise.resolve(cachedData);
 }
};

export { getServiceData, postServiceData };
</code></pre>

Usage like below in another component

<pre><code>import { getServiceData, postServiceData } from './../Utils/Util';

constructor(props) {
 super(props)
 this.state = {
 datastore : []
 }
 }

componentDidMount = () =&gt; { 
 let posturl = 'yoururl'; 
 let getdataString = { name: "xys", date:"today"}; 
 postServiceData(posturl, getdataString)
 .then(items =&gt; { 
 this.setState({ datastore: items }) 
 console.log(items); 
 });
 }
</code></pre>

blocks|key|1866074|text|从‘React’导入react，{useState}；从‘Axios’导入axios；|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1866075|导出默认函数Formlp()+{|1866076|const+url+="";

const+[state,+setstate]+=+useState({
++++name:"",
++++iduser:""
})

function+handel(e){

++++const+newdata={...state}
++++newdata[e.target.id]=e.target.value
++++setstate(newdata);
}

function+submit(e)
{
++++e.preventDefault();

++//++Axios.post(url,{name:state.name,iduser:state.iduser}).then(+res=>{console.log(res)});

++console.log(state)

}|code-block|syntax|javascript|1866077|OnSubmit=(+|1866078|+submit(e)}>+handel(e)+}+id="name“value={state.name}+placeholder="name”type="text“>+handel(e)+}+id="iduser”value={state.iduser}+placeholder="iduser“type="text”>|1866079|
|1866080|++++++++<button>submit</button>
++++++++</form>
++++</div>|1866081|1866082|)；}|1866083|1866084|1866085|entityMap^0|0|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|X|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Y|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Z|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|10|8|@]|9|@]|A|$]]|$1|K|3|L|5|6|7|11|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|12|8|@]|9|@]|A|$]]|$1|O|3|P|5|F|7|13|8|@]|9|@]|A|$G|H]]|$1|Q|3|N|5|6|7|14|8|@]|9|@]|A|$]]|$1|R|3|S|5|6|7|15|8|@]|9|@]|A|$]]|$1|T|3|N|5|6|7|16|8|@]|9|@]|A|$]]|$1|U|3|-4|5|6|7|17|8|@]|9|@]|A|$]]|$1|V|3|-4|5|6|7|18|8|@]|9|@]|A|$]]]|W|$]]

import React ,{useState}from 'react';
import Axios from 'axios';
export default function Formlp()
{
<pre><code>const url =&quot;&quot;;

const [state, setstate] = useState({
 name:&quot;&quot;,
 iduser:&quot;&quot;
})

function handel(e){

 const newdata={...state}
 newdata[e.target.id]=e.target.value
 setstate(newdata);
}

function submit(e)
{
 e.preventDefault();

 // Axios.post(url,{name:state.name,iduser:state.iduser}).then( res=&gt;{console.log(res)});

 console.log(state)

}
</code></pre>
return (
&lt;div onSubmit={ (e)=&gt; submit(e)}&gt;

&lt;input onChange={ (e)=&gt;handel(e) } id=&quot;name&quot; value={state.name} placeholder=&quot;name&quot; type=&quot;text&quot; &gt;
&lt;input onChange={ (e)=&gt;handel(e) } id=&quot;iduser&quot; value={state.iduser} placeholder=&quot;iduser&quot; type=&quot;text&quot; &gt;
<pre><code> &lt;button&gt;submit&lt;/button&gt;
 &lt;/form&gt;
 &lt;/div&gt;
</code></pre>
);
}

blocks|key|1650895|text|下面是一个示例：https://jsfiddle.net/69z2wepo/9888/|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1650896|$.ajax({
++++type:+'POST',
++++url:+'/some/url',
++++data:+data
++})
++.done(function(result)+{
++++this.clearForm();
++++this.setState({result:result});+++
++}.bind(this)
++.fail(function(jqXhr)+{
++++console.log('failed+to+register');
++});|code-block|syntax|javascript|1650897|它使用了jquery.ajax方法，但你可以很容易地用基于AJAX的库来代替它，比如axios、superagent或fetch。|style|CODE|1650898|entityMap|0|LINK|mutability|MUTABLE|url|https://jsfiddle.net/69z2wepo/9888/^0|8|Z|0|0|0|4|B|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@$A|V|B|W|1|X]]|C|$]]|$1|D|3|E|5|F|7|Y|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|6|7|Z|8|@$A|10|B|11|K|L]]|9|@]|C|$]]|$1|M|3|-4|5|6|7|12|8|@]|9|@]|C|$]]]|N|$O|$5|P|Q|R|C|$S|T]]]]

Here is an example: <a href="https://jsfiddle.net/69z2wepo/9888/" rel="nofollow noreferrer">https://jsfiddle.net/69z2wepo/9888/</a>

<pre><code>$.ajax({
 type: 'POST',
 url: '/some/url',
 data: data
 })
 .done(function(result) {
 this.clearForm();
 this.setState({result:result}); 
 }.bind(this)
 .fail(function(jqXhr) {
 console.log('failed to register');
 });
</code></pre>

It used <code>jquery.ajax</code> method but you can easily replace it with AJAX based libs like axios, superagent or fetch.

I am new to ReactJS and UI and I wanted to know how to make a simple REST based POST call from ReactJS code.

If there is any example present it would be really helpful.

How to make a rest post call from ReactJS code?

我是ReactJS和UI的新手，我想知道如何从ReactJS代码进行简单的基于REST的POST调用。如果有任何例子，这将是非常有帮助的。

问如何从ReactJS代码进行rest post调用？
EN

回答 11

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何从ReactJS代码进行rest post调用？EN

回答 11

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何从ReactJS代码进行rest post调用？
EN