blocks|key|2462776|text|之所以将额外的_=<timestamp>参数附加到请求URL的末尾，是因为您在$.ajax调用中指定了cache:+false选项。这是确保您接收的是所请求资源的非浏览器缓存版本的方法之一。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2462777|参见the+official+docs。|2462778|entityMap|0|LINK|mutability|MUTABLE|url|http://api.jquery.com/jquery.ajax/^0|7|D|13|6|1F|C|0|2|H|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@$9|Q|A|R|B|C]|$9|S|A|T|B|C]|$9|U|A|V|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|W|8|@]|D|@$9|X|A|Y|1|Z]]|E|$]]|$1|H|3|-4|5|6|7|10|8|@]|D|@]|E|$]]]|I|$J|$5|K|L|M|E|$N|O]]]]

The reason that the extra <code>_=&lt;timestamp&gt;</code> parameter is appended to the end of your request URL is because of the <code>cache: false</code> option you are specifying in your <code>$.ajax</code> call. It's one of the ways to ensure that you are receiving a non browser-cached version of the requested resource.

See <a href="http://api.jquery.com/jquery.ajax/" rel="nofollow noreferrer">the official docs</a>.

blocks|key|2462817|text|当您设置cache:+false时，Jquery会附加_={timestamp}。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2462818|​|2462819|$.ajax({
++++++url:+'https://api.weather.gov/alerts/active/zone/AKZ201',
++++++dataType:+'json',
++++++cache:+true,
++++++success:+function(data){
+++++++console.log(JSON.stringify(data))
++++++},
++++++error:+function(xhr,+status,+err){
++++++++console.log(err);
++++++}
++++});|code-block|syntax|javascript|2462820|<script+src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>|2462821|2462822|参考：Official+Jquery+Docs|2462823|entityMap|0|LINK|mutability|MUTABLE|url|http://api.jquery.com/jquery.ajax/^0|4|C|R|D|0|0|0|0|0|3|K|0|0^^$0|@$1|2|3|4|5|6|7|Z|8|@$9|10|A|11|B|C]|$9|12|A|13|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|14|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|15|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|J|7|16|8|@]|D|@]|E|$K|L]]|$1|O|3|G|5|6|7|17|8|@]|D|@]|E|$]]|$1|P|3|Q|5|6|7|18|8|@]|D|@$9|19|A|1A|1|1B]]|E|$]]|$1|R|3|-4|5|6|7|1C|8|@]|D|@]|E|$]]]|S|$T|$5|U|V|W|E|$X|Y]]]]

Jquery appends <code>_={timestamp}</code> when you set <code>cache: false</code>.

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$.ajax({
 url: 'https://api.weather.gov/alerts/active/zone/AKZ201',
 dataType: 'json',
 cache: true,
 success: function(data){
 console.log(JSON.stringify(data))
 },
 error: function(xhr, status, err){
 console.log(err);
 }
 });</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;</code></pre>
</div>
</div>


Reference: <a href="http://api.jquery.com/jquery.ajax/" rel="nofollow noreferrer">Official Jquery Docs</a>

blocks|key|15564|text|这更像是一个jQuery问题，而不是一个react问题。正如前面所回答的，添加额外的时间戳是因为您的cache:+false代码。这是一种在加载资源时对其进行缓存的常用方法，因为附加时间戳参数会迫使浏览器获取最新的资源。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|15565|此外，我不知道您为什么要在react中使用jQuery，但至少对于HTTP调用，您可能希望研究一下Fetch+API，它是一种与现代浏览器兼容的本机浏览器api+(无需安装包)。|15566|下面是使用fetch+&+ES2017时方法的一个更现代的示例|15567|async+getAlerts+=+()+=>+{
++const+response+=+await+fetch('https://api.weather.gov/alerts/active/zone/AKZ201');
++const+alerts+=+await+response.json();

++this.setState({
++++alerts,
++});
}|code-block|syntax|javascript|15568|这里发生了一些很酷的ES2017事情。首先是包含了async/await，它确实有助于编写易于阅读的异步代码。如果您希望某个方法/函数异步执行某些操作，可以将async指定为该函数/方法的前缀。|15569|async+function()+{}|15570|我们还在这里使用箭头函数getAlerts+=+()+=>+{}来将getAlerts方法绑定到维护相同this上下文的函数。回报是什么？如果你想在jsx语句中使用它，你就不需要.bind(this)或者担心this实际引用的是什么。|15571|<button+onClick={this.getAlerts}>Update+Alerts</button>|15572|接下来，我们想要get请求的结果，因为它是对某个数据库的异步调用，所以我们在函数调用前加上await，以获得底层promise的结果。|15573|const+response+=+await+somePromise()+//in+our+case,+its+fetch(url)|15574|可以使用response.json()获得响应体，这是另一个异步方法调用。|15575|const+alerts+=+await+response.json();|15576|接下来，您会注意到我们使用对象的名称作为对象键。说{alerts}和{alerts:+alerts}是一样的，但是你写的代码更少，而且看起来更简单！|15577|this.setState({
++alerts,
});|15578|如果您没有ES2017+(我假设您使用的是create-react-app，它包含启用了这些功能)，下面是上面相同方法的es6版本：|15579|getAlerts+=+()+=>+{
++fetch('https://api.weather.gov/alerts/active/zone/AKZ201')
++++.then((response)+=>+response.json())
++++.then((alerts)+=>+{
++++++this.setState({
++++++++alerts,
++++++});
++++});
}|15580|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API^0|1E|C|0|1D|9|0|0|0|0|P|B|27|5|0|0|C|K|1G|4|2H|B|2W|4|0|0|19|5|0|0|4|F|0|0|P|8|Y|G|0|0|0|0^^$0|@$1|2|3|4|5|6|7|1K|8|@$9|1L|A|1M|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|1N|8|@]|D|@$9|1O|A|1P|1|1Q]]|E|$]]|$1|H|3|I|5|6|7|1R|8|@]|D|@]|E|$]]|$1|J|3|K|5|L|7|1S|8|@]|D|@]|E|$M|N]]|$1|O|3|P|5|6|7|1T|8|@$9|1U|A|1V|B|C]|$9|1W|A|1X|B|C]]|D|@]|E|$]]|$1|Q|3|R|5|L|7|1Y|8|@]|D|@]|E|$M|N]]|$1|S|3|T|5|6|7|1Z|8|@$9|20|A|21|B|C]|$9|22|A|23|B|C]|$9|24|A|25|B|C]|$9|26|A|27|B|C]]|D|@]|E|$]]|$1|U|3|V|5|L|7|28|8|@]|D|@]|E|$M|N]]|$1|W|3|X|5|6|7|29|8|@$9|2A|A|2B|B|C]]|D|@]|E|$]]|$1|Y|3|Z|5|L|7|2C|8|@]|D|@]|E|$M|N]]|$1|10|3|11|5|6|7|2D|8|@$9|2E|A|2F|B|C]]|D|@]|E|$]]|$1|12|3|13|5|L|7|2G|8|@]|D|@]|E|$M|N]]|$1|14|3|15|5|6|7|2H|8|@$9|2I|A|2J|B|C]|$9|2K|A|2L|B|C]]|D|@]|E|$]]|$1|16|3|17|5|L|7|2M|8|@]|D|@]|E|$M|N]]|$1|18|3|19|5|6|7|2N|8|@]|D|@]|E|$]]|$1|1A|3|1B|5|L|7|2O|8|@]|D|@]|E|$M|N]]|$1|1C|3|-4|5|6|7|2P|8|@]|D|@]|E|$]]]|1D|$1E|$5|1F|1G|1H|E|$1I|1J]]]]

This is more of a jQuery question then a react one. As answered before, the extra timestamp is added because of your <code>cache: false</code> code. The Its a common way to cache bust a resource when its loaded, as appending a timestamp param forces the browser to fetch the latest resource.

Also, I don't know your reason for using jQuery in react, but at least for HTTP calls, you might want to look into <a href="https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API" rel="nofollow noreferrer">Fetch API</a>, a native browser api (no packages to install) compatible with modern browsers.

Here is a more modern example of your method when using fetch &amp; ES2017

<pre><code>async getAlerts = () =&gt; {
 const response = await fetch('https://api.weather.gov/alerts/active/zone/AKZ201');
 const alerts = await response.json();

 this.setState({
 alerts,
 });
}
</code></pre>

There are some cool ES2017 things going on here. First, is the inclusion of <code>async/await</code>, which really helps write easy to read asynchronous code. If you want a method/function to execute something asynchronously, you specify <code>async</code> as a prefix for that function/method.

<pre><code>async function() {}
</code></pre>

We are also using the arrow function here <code>getAlerts = () =&gt; {}</code> to bind the getAlerts method to a function that maintains the same context of <code>this</code>. The payoff? If you wanted to use this in a jsx statement, you wouldn't have to <code>.bind(this)</code> or worry about what <code>this</code> is actually referencing.

<pre><code>&lt;button onClick={this.getAlerts}&gt;Update Alerts&lt;/button&gt;
</code></pre>

Next we want the results of our get request, and since its an asynchronous call to some database, we prepend our function call with <code>await</code>, to get the results of the underlying promise.

<pre><code>const response = await somePromise() //in our case, its fetch(url)
</code></pre>

The response body can be gotten using <code>response.json()</code>, another asynchronous method call.

<pre><code>const alerts = await response.json();
</code></pre>

The next bit, you notice we are using the name of the object as the an object key. saying <code>{alerts}</code> is the same as <code>{alerts: alerts}</code>, but your writing less code, and tis a little easier on the eyes!

<pre><code>this.setState({
 alerts,
});
</code></pre>

Incase you don't have ES2017, (I was assuming that your using create-react-app, which includes these features enabled), here is an es6 version of that same method above:

<pre><code>getAlerts = () =&gt; {
 fetch('https://api.weather.gov/alerts/active/zone/AKZ201')
 .then((response) =&gt; response.json())
 .then((alerts) =&gt; {
 this.setState({
 alerts,
 });
 });
}
</code></pre>

Good day, everybody!
I have a small problem here with one of my React apps:
I am trying to get the Weather alerts using an API. My App.js file looks like this:

<pre><code>import React, { Component } from 'react';
import './App.css';
import $ from 'jquery';
import Alerts from './Components/Alerts';

class App extends Component {

 constructor(){
 super();
 this.state = {
 alerts:[]
 }
 }

 getAlerts(){
 $.ajax({
 url: 'https://api.weather.gov/alerts/active/zone/AKZ201',
 dataType: 'json',
 cache: false,
 success: function(data){
 this.setState({alerts: data});
 }.bind(this),
 error: function(xhr, status, err){
 console.log(err);
 }
 });
 }


 componentDidMount(){
 this.getAlerts();
 }

 render() {
 return (
 &lt;div&gt;
 &lt;Alerts alerts={this.state.alerts} /&gt;
 &lt;/div&gt;
 );
 }
}

export default App;
</code></pre>

The problem is that this ajax function is adding an extra parameter at the end of the API URL and because of this extra parameter the API URL doesn't return me the correct data.

This is what I get in my console:

<pre><code>jquery.js:9600 GET https://api.weather.gov/alerts/active/zone/AKZ201?_=1527798208757 400 ()
</code></pre>

The extra parameter is ?_=1527798208757 400 ()

I figured it out that this extra parameter is causing the problem.
Any ideas how I could remove this parameter?

Thank you!

React js extra parameter API URL

数据库

jQuery

JSON

大家好！我的一个React应用程序有一个小问题:我正在尝试使用API获取天气警报。我的App.js文件如下所示：import React, { Component } from 'react';import './App.css';import $ from 'jquery';import Alerts from '....

问React js额外参数接口URL
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问React js额外参数接口URLEN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问React js额外参数接口URL
EN