Question

我有一个带有其他按钮的表单，然后有一个提交按钮。我希望Vue在单击该按钮时异步调用Django视图，并返回一条JSON消息，表明函数已成功调用。

Answer 1

ARTICLE中介绍了使用Vue进行Ajax的4种不同方式。

我不太了解。以下是使用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");
          },
        });
});

Django代码：

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

HERE是使用纯JS或Jquery或Fetch或Axios进行Ajax的首选方法。

Answer 2

jQuery和Vue不能很好地协同工作。 Vue在Jquery内有效，但Jquery在Vue内无效。更好的选择是将Axios用于Ajax。在Vue方法中调用axios。

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: ["[[","]]"],
});

如何使用Vue异步调用Django视图函数（AJAX）

2 个答案: