如何将数据从javascript函数发送到Django视图

Question

我试图从一个javascript函数发送数据，该函数在页面加载时生成一个随机字符串，并将其发送到Django视图。我不知道如何构造script标记以在页面加载后发送数据，以及如何构造views.py以接收数据。我是javascript新手，不太知道该怎么做。我感谢你提供的任何帮助

index.html

<script>

    function makeid(length) {
        var result           = '';
        var characters       = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
        var charactersLength = characters.length;
        for ( var i = 0; i < length; i++ ) {
            result += characters.charAt(Math.floor(Math.random() * charactersLength));
        }
        return result;
    }
    console.log(makeid(9));

</script>

Answer 1

您可以使用ajax将数据发送到Django视图，如下代码所示

javascript:

function makeid(length) {
    var result           = '';
    var characters       = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
    var charactersLength = characters.length;
    for ( var i = 0; i < length; i++ ) {
        result += characters.charAt(Math.floor(Math.random() * charactersLength));
    }
    $.ajax({
        type: "GET",
        url: '/my_def_in_view',
        data: {
            "result": result,
        },
        dataType: "json",
        success: function (data) {
            // any process in data
            alert("successfull")
        },
        failure: function () {
            alert("failure");
        }
    });
}

URL.py：

urlpatterns = [
               url(r'^my_def_in_view$', views.my_def_in_view, name='my_def_in_view'),
               ...
]

views.py：

def my_def_in_view(request):
    result = request.GET.get('result', None)
    # Any process that you want
    data = {
            # Data that you want to send to javascript function
    }
    return JsonResponse(data)

如果它成功了，它会回到“成功”部分

Answer 2

您可以通过两种方式实现这一点：

• 传统的ajax
• WebSocket：带有django通道

如果您想发送一些信息，一个ajax请求就足够了，您必须设置和地址以及一个视图来接收POST或GET ajax请求

我建议您使用纯JS，而不是jquery

例如，这是一个刷新验证码图像的调用

 /*Agregar boton refresh al lado del campo input*/
 let captcha_field =
     document.getElementById('captcha-field-registro_1').parentNode;
 let refresh_button=document.createElement('BUTTON');
 refresh_button.addEventListener('click',refresh_captcha)

 refresh_button.innerHTML = "Refrescar Captcha";                   // Insert text
 captcha_field.appendChild(refresh_button);

 let url_captcha= location.protocol + "//" +
                  window.location.hostname + ":" +
                  location.port + "/captcha/refresh/";

 let id_captcha_0="captcha-field-registro_0"
 function refresh_captcha(){
     let xhr = new XMLHttpRequest();
     xhr.open('GET', url_captcha, true);
     xhr.onload = function recv_captcha_load(event){
         console.log("event received", event,
                     "state",xhr.readyState);

         let data_txt = xhr.responseText;
         let data_json = JSON.parse(data_txt);
         console.log("Data json", data_json);

         if (xhr.readyState==4){
             if (xhr.status==200){
                 console.log("LOAD Se ha recibido esta información", event);
                 let captcha_img=document.getElementsByClassName('captcha')[0];
                 console.log("Catpcha img dom", captcha_img);
                 captcha_img.setAttribute('src', data_json['image_url'])
                 document.getElementById(id_captcha_0).value=data_json['key']
             }
             else{
                 console.log("Error al recibir")

             }
         }

     };

     var csrftoken = getCookie('csrftoken');
     xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
     xhr.setRequestHeader("X-CSRFToken", csrftoken);
     xhr.send();
 }

 function getCookie(name) {
     let cookieValue = null;
     if (document.cookie && document.cookie !== '') {
         var cookies = document.cookie.split(';');
         for (let i = 0; i < cookies.length; i++) {
             let cookie = cookies[i].trim();
             // Does this cookie string begin with the name we want?
             if (cookie.substring(0, name.length + 1) === (name + '=')) {
                 cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                 break;
             }
         }
     }
     return cookieValue;
 }