Как получить данные пользователя от пользователя Javascript обратно в Django

Question

Я использую Django и Bootstrap для создания простого сайта.

В моем файле .html я использую Bootstrap для отображения datepicker.

<div id="datepicker" ></div> 

Также в .html, у меня есть быстрый и грязный яваскрипта код, который обновляется, когда мой DatePicker получает щелкнули.

<script> 
     function setup(){ 

      <SOME OTHER JS> 

      $('#datepicker').on("changeDate", function() { 
       $('#my_hidden_input').val(
        $('#datepicker').datepicker('getFormattedDate') 
       ); 
      }); 
     $(document).ready(setup); 
    </script> 

Я хочу передать эту новую дату на мою страницу Django. В основном я хочу обновить страницу данными, относящимися к этой новой дате, и мой код Django знает, как обрабатывать новую дату.

Как мне это сделать? Должен ли я перенаправить обратно на мою текущую страницу, но добавить что-то в URL-адрес, чтобы регулярное выражение Django заработало? Или я должен сделать это Http GET с новой датой?

Answer 1

Вы можете использовать Ajax для получения данных с сервера без обновления страницы:

jQuery.ajax({ 
    type: 'POST', 
    url: 'web/path/to/php/file.php', 
    data: { 
     post_date: $('#datepicker').val() //this is the data to post to server 
    }, 
    success: function(res) { 
     //code executed after server response. res - server response 
     $('#datepicker').append(res); //modifying your html 
    } 
}); 

И в file.php, например:

echo $_POST['post_date']; //accessing your date on server side and return it 

Если действительно необходимо обновить в страница, вы можете отправить свои данные по адресу:

$('#datepicker').on("changeDate", function() { 
    var val = $('#my_hidden_input').val(
     $('#datepicker').datepicker('getFormattedDate') 
    ); 
    val = encodeURIComponent(val); //encode data for url passing 
    window.location.href = '?date = ' + val; //goto url with appended parameter 
}); 

Чтобы получить данные, которые вы используете:

$date = urldecode($_GET['date']); 

Answer 2

<script> 
    function pass_this_to_backend(date){ 
    $.ajax({ 
     type: "POST", 
     url: "/get_date/", 
     data: { 'date':date }, 
     dataType: "json", 
     success: function(response) { alert(response); }, 
     error: function(rrror) { alert(error); } 
    }); 

    } 


    function setup(){ 

     <SOME OTHER JS> 

     $('#datepicker').on("changeDate", function() { 
      $('#my_hidden_input').val(
       $('#datepicker').datepicker('getFormattedDate') 
      ); 
      pass_this_to_backend(date); 
     }); 
    $(document).ready(setup); 
</script>