понимание jquery $ ('# name'). load (...)

Question

У меня возникли проблемы с пониманием, как выполнить следующее: По сути, я просто углубляюсь в мир Ajax и создал простое приложение для практики. Моя текущая проблема заключается в том, что я хочу, чтобы под «добавить запись» динамически добавлялась форма, чтобы людям не приходилось уходить на другую страницу, чтобы обновить страницу, эта часть работает. Ниже «Добавить запись» находится список всех добавленных в данный момент записей, и после того, как пользователь нажмет кнопку «Отправить» в этой динамически загруженной форме, я хочу обновить приведенный ниже список, перезагрузив страницу (список создается из базы данных).

Чтобы объяснить приведенный ниже код, / ajax / addform / загружает HTML-файл, который имеет только ..., который является формой добавления записи. Я просто не уверен, как привязать $ ('form'). Submit к недавно загруженной форме. Кроме того, для .load (), вторая переменная является параметром POST для страницы, ожидающей загрузки, нужно ли мне использовать это для использования обратного вызова (который является третьим параметром)?

Вот что у меня есть:

Для начальной страницы:

<a id="add" href=...>Add Entry</a>
<div id="form"></div>
<ul>--list of entries here--</ul>

Где div - просто заполнитель для заполнения формы.

$(document).ready(function (){
    $('#add').click(function (){
        $('#form').load('/ajax/addForm/', {'dummy':'var'},
            function (){
                $('form').submit(function (){
                    return false;
                });
        });
        return false;
    });
});

Большое спасибо за любую помощь!

Answer 1

Если вы хотите выполнить ajax-запрос к ajax/addForm/, вы не будете просто отправлять форму. Вам нужно будет получить значения входов в форме.

var textData = $("input[name='text']").val();

Ваша функция загрузки будет выглядеть так:

$(/* containing element of list */).load('ajax/addForm/', {'text',textData});

Я предполагаю, ajax/addForm/ выводит HTML для вашего списка?

Редактировать: Из вашего ответа я понял, что вы хотите отправить данные на ajax/addForm с помощью ajax, а затем перезагрузить страницу (вместо асинхронного обновления). Если вы собираетесь это сделать, вероятно, было бы проще сделать все это без ajax, но вот инструкции для пост-запроса ajax.

Еще раз, вам нужно будет получить значения входов и сохранить их для запроса ajax. Если вы не получаете никаких данных от ajax / addForm, нет смысла использовать load(); Вы должны использовать $.post() вместо.

$.post('ajax/addForm/', {'text',textData}, function() {
   //reloads the page when ajax/addForm is finished
   window.location.reload();
});

Если вы хотите, чтобы это происходило при нажатии кнопки, вам нужно поместить $.post() в обработчик щелчка для этой кнопки.

Answer 2

После того, как вы загрузите текст с .load - this в обратном вызове будет равен элементу #name DOM, так что вы хотите привязать к любым объектам формы, которые являются дочерними элементами этого элемента. Если вы не return false из этой функции отправки, ответом будет то, с чем отвечают теги action / method формы после POST / GET. Если ваш веб-сервер перенаправляет «успешный» ответ обратно на страницу, на которой вы находитесь, это один из способов решения проблемы.

Если вы хотите, чтобы отправка формы также обрабатывалась с помощью AJAX - плагин формы jQuery имеет функцию .ajaxForm(), которая позволяет выполнять POST / GET в ajax - давая вам функцию обратного вызова для привязки в успех.

$('#form').load('/ajax/addForm/', {'dummy':'var'}, function() {    
  // look for our form that we loaded;
  var $form = $("form", this);

  // turn it into an ajax submit form and attach a custom handler.
  $form.ajaxform({
     success: function(responseText) {
       // reload the form if the post is successful
         window.location.reload();
     }
  });

});