Передача нескольких параметров в ajax

286

01 июня 2017, 09:18

Суть в том: Есть форма, данные из которой ловит django view и, после нескольких операций, результат выводит с помощью render(request, '...html', {'data': result}) в div. Также, этот view ловит ID кнопки, с помощью которой была произведена отправка данных. К тому же, при отправке должен появляться скрытый div. Есть немного кода, но не хватает опыта понять, как заставить все это работать. Помогите, пожалуйста. Заранее спасибо.

HTML:

<form action="/application/" method="post" id="input" 
onsubmit="if(document.getElementById('output') .style.display=='none')
{document.getElementById('output') .style.display=''}"> 
<input type="text" name="in" value="" />
<div id="output" style="text-align:left; display:none;">
  {{ data }}
</div>
<div>
    <input type="submit" class="button" id="1" value="1"/>
    <input type="submit" class="button" id="2" value="2"/>
</div>

JS:

<script src="{% static 'js/jquery.min.js' %}"></script>
<script src="{% static 'js/js.cookie.js' %}"></script>
<script type="text/javascript">
       $(document).ready(function(){
             $('.button').on('click', function(){
                  var id = $(this).attr('id');
                  $('#input').on('submit', function() {
                         data = {
                            'id': id,
                            $('#input').serialize()
                          }
                         $.ajax({
                            headers: { "X-CSRFToken": Cookies.get("csrftoken") },
                            url : /application/,
                            type: "POST",
                            data: data,
                            dataType: "json",
                            success: function() {
                               alert("Done.");
                            },
                            error: function() {
                               alert("Something wrong.");
                            }
                         });
                  });
       });
</script>

Answer 1

Для ajax ответа, сервер должен рендерить только содержимое дива output - render(result) не знаю как точно это в django

Дальше в success надо прописать вывод этих данных:

...
success: function(r) {
    $('#output').html(r).show();
},
...

В кнопках задайте name, это имя будет приходить как и другие инпуты, соответственно id из data убрать.

<input type="submit" name="button" class="button" id="1" value="1"/>

Answer 2

Как вариант:

var form = document.getElementById('input');		 
var data = new Object; 
for (var i = 0; i < form.elements.length; i++) 
{			 
	data[form.elements[i].name] = form.elements[i].value;			 
}

И добавьте нужные данные в объект - data['имя_свойства'] = 'Значение';