Как этот ajax-запрос на jquery сделать с помощью axios?

Question

[Михаил]

Здравствуйте. Бек сделан на Django. Фронт переделываю полностью на vue.js. Интересует как отправить форму при помощи vue.js. Ниже код который работает на jquery. Суть в чем, делать запросы при помощи axios я могу, но форма не проходит валидацию на стороне django. POST приходит пустой, хотя данные отправлены. Csrf_token настроен и работает.
Как этот код jquery перенести на vue.js?

$('#pForm').submit(function(e){
    e.preventDefault();
    $.ajax({
      url: "pass_change",
      type: "POST",
      data: $('#pForm').serialize(),
      success: function(data) {
        alert(data);
      },
      error: function(response) {
          
     }
    });
});

Comments

[lavezzi1]

Причем тут vue.js то? Это библиотека для работы с UI. Запросы он делать не умеет.

[RidgeA]

почему бы не привести код, который не работает?

[Михаил]

RidgeA,

axios.post("${this.urlPass}", {
   data:  {                      
         $('#pForm').serialize()
    }
    responseType: 'json'
    }).then((response) =>
        alert(response.data)
     )

или

axios.post("${this.urlPass}", {
    data: {
        old_password: this.old,
        new_password1: this.new1,
       new_password2: this.new2
    }
       responseType: 'json'
     }).then((response) =>
         alert(response.data)
      )

[Exploding]

Михаил, а запятую случайно перед responseType не забыли?

[Михаил]

Exploding, нет, если ее поставить тот же результат

[Exploding]

Михаил, А axios.post("${this.urlPass}", - это точно правильная конструкция? В смысле то, что поидее должно как мне кажется быть что-то типа axios.post(this.urlPass, или axios.post($(this.urlPass), или axios.post($(this).attr("urlPass"),
я просто хз, что такое axios

[DJWOMS]

Exploding, запрос уходит на сервер, ссылку если просто подставить тот же эффект

[Exploding]

DJWOMS,

POST приходит пустой, хотя данные отправлены

ну уходить то он может, я так понял что проблема еще на стороне клиента при формировании данных для отправки

[Exploding]

Михаил, а если в консоль вывести data, все нормально?

[DJWOMS]

Exploding, да
И показывает что в запросе данные отправляются

[Exploding]

DJWOMS, Тут походу не в либе дело, или не именно в этой. Подключил, попробовал отправить - нихрена. Попробовал вообще на чистом js - и тоже нихрена. (правда не отключал от тестовой стр. остальные либы... потом будет время еще покопаюсь, если никто не ответит). Но на всякий случай у себя исправьте код на:

axios.post("/path/.../file.php", {
    data: {
        old_password: this.old, //что здесь this?
        new_password1: this.new1,
       new_password2: this.new2
    }, 
    responseType: 'json'
}).then(function (response) {
   alert(response.data)
});

Answer 1

[304]

let form = document.querySelector('form');
  form.onsubmit = e => {
    e.preventDefault();
    let res = document.querySelector('.result');
    axios({
      method: 'POST',
      url: '/test',
      data: {
        'input1': document.querySelector('input[name="input1"]').value,
        'input2': document.querySelector('input[name="input2"]').value,
        'textarea': document.querySelector('textarea[name="textarea"]').value
      }
    }).then( () => {
      res.innerHTML = 'Form was successfully sent!';
      form.reset();
    }).catch( ()=> {
      res.innerHTML = 'An error occurred!';
      form.reset();
    });
  };
};