Как отправить данные из функции javascript в Django Просмотр

Question

Я пытаюсь отправить данные из функции javascript, которая генерирует случайную строку при загрузке страницы, в представление Django. Я не знаю, как структурировать тег script для отправки данных после загрузки страницы и views.py для получения данных. Я новичок в javascript и не знаю, как go об этом. Я ценю любую помощь.

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");
        }
    });
}

urls.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)

Если он был успешным, он возвращается к части «success».

Answer 2

Вы можете сделать это двумя способами:

• Традиция с ajax
• Веб-сокеты: с django каналами

Если вы хотите Чтобы отправить немного информации, достаточно запроса ajax, вам нужно установить и адрес и представление для получения запроса POST или GET ajax.

Я рекомендую вам использовать чистый JS , а не jquery

Например, это вызов refre sh изображения с картинки ...

 /*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;
 }