axios.post使用我的参数自动拼接网址 [英] axios.post automatically splice url with my params
问题描述
我想在前端使用vue和axios实现api:
I want to implement an api with vue and axios in my front-end:
methods:{
startSpider:function(event){
alert("spider is ready to run!");
let data = {'searchKey':this.searchKey,
'category':this.category,
'num':this.num};
axios.post("{% url 'main:getCommodityInfo'%}",
data,
{headers:{'X-CSRFToken': this.getCookie('csrftoken')}})
.then(response=>{
console.log(response.data)
})
.catch(error=>{
console.log(error);
alert("connection has error")
})
},
当我调用此函数时,我希望从后端获取数据并保留在初始URL.它确实接收到数据,但是网址很快就改变了.
When I call this function, I expect to get data from the back-end and stay at the inital url. It does receive data but the url quickly changed.
经过一番探索,我发现浏览器实现了两个请求!首先是POST,然后是GET:
After some exploration, I find the browser implement two request! First, POST, and next GET:
以'searchKey':'switch','category':'electronic','num':60 为例.
,我的浏览器网址随后更改为
and My browser url subsequently changes to
为什么会这样?我刚用过POST而不是GET. axios帖子似乎自动将初始URL与params拼接在一起.我尝试了很多方法,但都失败了.甚至我都编写了一个类似的小型演示程序进行测试,但是演示程序运行良好!发生了什么?请帮助我...
Why it happens? I have just used POST not GET. The axios post seems to automatically splice inital url with the params. I have tried a lot of ways but failed. Even I have writed a small demo with the similiar structure like this to test, but the demo runs well! What happened? Help me please...
更新后的我:给我服务器行为(django视图),并且与我的路由器相关的是path('getCommodityInfo/',views.getCommodityInfo, name = 'getCommodityInfo')
Updated I: Give my server behavior(django-view) and my router related is path('getCommodityInfo/',views.getCommodityInfo, name = 'getCommodityInfo')
def getCommodityInfo(request):
print(request.body)
return JsonResponse({"data":True}, safe=False)
更新后的II:给我前端表格:
Updated II: Give my front-end form:
<form>
<label for="searchKey">KeyWords</label>
<input v-model="searchKey" placeholder="Input Search Key" type="string" class="form-control" id="searchKey" name="searchKey">
<label for="category">Commodity Category</label>
<select v-model="selected" id="category" name="category">
<option v-for="option in options" v-bind:value="option.value">
${option.text}
</option>
</select>
<br>
<label for="num">Amount</label>
<input v-model="num" placeholder="Input amount needed" type="string" class="form-control" id="num" name="num" >
<button v-on:click="startSpider" class="btn btn-default">Submit</button>
<p>KeyWords : ${ searchKey }</p>
<p>Category : ${ selected }</p>
<p>Amount: ${ num }</p>
</form>
推荐答案
由于未设置按钮类型而发生了该错误. 我们可以检查此:
The bug happened because of not setting button type. We could check this:
缺少的默认值是提交按钮"状态.
The missing value default is the Submit Button state.
并且在前端表单中没有按钮的类型,因此按钮类型将是submmit按钮.单击该按钮时,它将自动发送获取请求.
And in the front-end form there is no type for the button, so the button type will be submmit button. When click on the button, it will automatically send a get request.
按如下所示修改按钮:
<button v-on:click="startSpider" class="btn btn-default" type='button'>Submit</button>
这篇关于axios.post使用我的参数自动拼接网址的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!