Блог

Главная - Вопросы по программированию - axios.post автоматически соединяет URL-адрес с моими параметрами

axios.post автоматически соединяет URL-адрес с моими параметрами

#vue.js #axios

#vue.js #axios

Вопрос:

Я хочу реализовать 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>

Комментарии:

1. Вы уверены, что ваш сервер не перенаправляет на этот URL-адрес GET в ответ на этот запрос POST? Вы можете проверить заголовки ответов на POST-запрос в консоли разработчика браузера.

2. Я использую самое простое поведение сервера для тестирования. Вы можете проверить мое обновление.

3. Покажите заголовки ответа для первого запроса POST, пожалуйста

4. @Styx Спасибо. Я нашел свою ошибку. Вы можете проверить мое последнее обновление. Я проигнорировал установку типа кнопки, поэтому кнопкой по умолчанию будет кнопка submmit.

Ответ №1:

Ошибка произошла из-за того, что не был установлен тип кнопки. Мы могли бы проверить это:

Отсутствующее значение по умолчанию — это состояние кнопки отправки.

А во внешней форме для кнопки нет типа, поэтому типом кнопки будет кнопка submmit. При нажатии на кнопку он автоматически отправит запрос get.

Измените кнопку следующим образом:

 <button v-on:click="startSpider"  class="btn btn-default" type='button'>Submit</button>
Метки: