使用Jquery AJAX调用第三方API时出错

Question

我正在使用jquery AJAX调用第三方API，并得到以下错误

GET https://openweathermap.org/img/w/%22+%60$%7B$%7Bresponse.icon%7D%60+%22.png 404 (Not Found)

我的js文件

$(document).ready(function(){
$('#main').submit(function(event){
console.log(event);
event.preventDefault()
$.ajax({
url:'/weather/',
type:'POST',
data:$(this).serialize(),
success:function(response){
console.log(response);
$('#weather_output_box').html(`<p>${response.avg_temp}</p>);
$('#weather_icon').attr('src','http://openweathermap.org/img/w/"+`${response.icon}`+".png');
}
});
})

})

我的Html文件

<form id = 'main', action="{% url 'weather' %}",  method= 'post'>
{% csrf_token %}
<div>
<input type="submit" name "submit" value="Get your weather">
</div>
<div class="box">
<figure class="image is-50x50">
<img id='weather_icon'>
</figure>
<table class="table"  name="wc" id="weather_output_box"></table>
</div>
</form>

显示了CCD_ 1，但是CCD_。我认为response.icon的值在这里是一个未正确分配的

Answer 1

$('#weather_icon').attr('src','http://openweathermap.org/img/w/"+`${response.icon}`+".png');

${response.icon}在您的代码中未正确解析。

在不使用${}的情况下使用它，而使用简单的字符串串联。

'http://openweathermap.org/img/w/' + response.icon + '.png'