Как вызвать функцию представления Django Асинхронно (AJAX), используя Vue

Question

У меня есть форма с кнопкой, а не кнопка отправки. Я хотел бы, чтобы Vue вызывал представление Django асинхронно при нажатии этой кнопки и возвращал сообщение JSON, в котором говорилось, что функция была успешно вызвана.

Answer 1

Jquery и Vue не очень хорошо работают вместе. Vue работает внутри Jquery, но Jquery не работает внутри Vue. Лучший вариант - использовать Axios для Ajax. Вызовите axios внутри метода Vue.

axios.defaults.xsrfCookieName = 'csrftoken' //need this for method:post
axios.defaults.xsrfHeaderName = 'X-CSRFToken' //need this for method:post

var vue_app = new Vue({
  el: '#id_xyz',
  data: {
    vue_var1:'hello',
    vue_var2:[],

  },
  methods:{
    ajax_method_name1:function(){
      console.log('Vue ajax_method_name1 is called');

      axios({
            method: 'post',
            url: 'ajax/url1/',//your customer url that is set in backend to do Ajax work
            data: {
                  axios_var1: this.vue_var1, //data to send to server

                },
            responseType: 'json', //server will response with this datatype
          })

          .then ( function (response){ //success function
              console.log('axios ajax success. data returned ==' + response.data); //if returned data format is like {[ {'id':1,'id':2} ]} we may have to do response.data['output_dict'][0]['id']
              this.vue_var2 = response.data['output_var'];
          }.bind(this)) //bind(this) is required when accessing Vue variable inside Axios success function (.then)

          .catch ( function (error){ //error function
            console.log('Axios ajax error');
          });

    },
  },

  delimiters: ["[[","]]"],
});

Answer 2

Существует 4 различных способа выполнения Ajax с помощью Vue, как описано в этом СТАТЬЕ .

Я не до конца понимаю. Вот как вы это сделаете, используя Jquery.

Javascript код:

$("#id1").blur(function() { //when field with id="id1" loses focus, Ajax happens
  var email_entered = $(this).val();
    $.ajax({
          url: 'ajax/signup_email_verification/',
          type: "POST", //needs csrf token
          data: { email: email_entered,csrfmiddlewaretoken: $("input[name='csrfmiddlewaretoken']").val(), },
          dataType: 'json',

          success: function (data) {
              alert("Ajax successful");
          },
          error: function(error){
            alert("Ajax error");
          },
        });
});

Код Джанго:

def email_verification(request):
    email=request.POST.get('email'); print('AJAX EMAIL = ',email)
    data={ 'success':True }
    return JsonResponse (data)

ЗДЕСЬ есть несколько предпочтительных способов сделать Ajax с простым JS или Jquery, Fetch или Axios.