Я хочу реализовать API с vue и axios в моем внешнем интерфейсе:
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,Он получает данные, но URL-адрес быстро изменился.
После некоторого исследования я обнаружил, что браузер реализует два запроса!Сначала POST, а затем GET:
Используя 'searchKey': 'switch', 'category': 'electronic', 'num': 60 в качестве примера.
и URL моего браузера впоследствии изменится на 
Почему это происходит?Я только что использовал POST, а не GET.Кажется, что сообщение axios автоматически соединяет исходный URL с параметрами.Я перепробовал много способов, но не смог.Даже я написал небольшое демо с похожей структурой, чтобы проверить, но демо работает хорошо!Что случилось?Помогите мне, пожалуйста ...
Обновлено I: укажите поведение моего сервера (django-view) и мой маршрутизатор имеет отношение path('getCommodityInfo/',views.getCommodityInfo, name = 'getCommodityInfo')
def getCommodityInfo(request):
print(request.body)
return JsonResponse({"data":True}, safe=False)
Обновлено II:Дайте мою внешнюю форму:
<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>