iframe против div + jquery - PullRequest
       2

iframe против div + jquery

8 голосов
/ 03 августа 2011

Хотелось бы узнать, что больше подходит для того, чего я хочу достичь:

На моей главной странице (main.php) у меня есть ссылки на различные формы: form1.php, form2.php, form3.php. Мне нужно, чтобы страницы ссылок открывались в части main.php, то есть в div или в iframe на main.php, без обновления main.php. Страницы формы позволяют заполнять, удалять, обновлять базу данных. Когда я делаю эти действия, я не хочу, чтобы main.php обновлял, а только соответствующую страницу формы. Мой первый вариант - открыть form1.php, например, в iframe main.php. Когда я отправляю форму, обновляется только form1.php в iframe. Второй вариант - использовать jquery: откройте ссылку (form1.php) в div файла main.php. Отправьте форму в div и обновите только div.

Второй вариант более требователен, поскольку у меня нет большого опыта работы с ajax и jquery. Первый вариант для меня более прямой. Мне интересно, есть ли какие-либо преимущества использования второго варианта с обновлением div по сравнению с iframe, то есть совместимостью с различными браузерами и т. Д. Спасибо.

Ответы [ 2 ]

3 голосов
/ 03 августа 2011

Я бы рекомендовал использовать jquery, ajax (XMLHttpRequest).Iframe старые, не семантические, и вы не можете получить доступ к iframe в main.php.

$("#submit_button_id").click(function(e) {
    e.preventDefault();
    $.post('form.php', $("#form_name").serialize(), function(result) { 
        $("#div_id").html(result); } }

этот фрагмент должен работать.
$("#submit_button_id").click(function(e) {: перехватывает функцию щелчка назначенного идентификатора и создает триггер.

e.preventDefault();: предотвращает регулярную отправку формы,мы собираемся отправить его с помощью jquery.

$.post отправляет форму в методе POST.

'form.php' - это ваш контроллер формы, который собирается вернуть HTML-код, который будетпоказано.

("#form_name").serialize() эта функция является утилитой для отправки формы сериализации.загружает поля ввода и преобразует их в { field1: value, field2: value }

function(result) { - третий параметр, в случае успеха $.post вызывает третий параметр как функцию.мы создаем анонимную функцию для замены html нашего div.

$("#div_id").html(result) устанавливает html назначенного div в result переменную.

ссылается на http://api.jquery.com/, они имеютзамечательный справочный лист.

1 голос
/ 03 августа 2011

Попробуйте $("#div").load("form.php"); из jQuery

Этот метод является наиболее простым способом получения данных с сервера.Он примерно эквивалентен $ .get (url, data, success), за исключением того, что это метод, а не глобальная функция, и он имеет неявную функцию обратного вызова.Когда обнаружен успешный ответ (т. Е. Когда textStatus имеет значение «success» или «notmodified»), .load () устанавливает содержимое HTML соответствующего элемента для возвращаемых данных.

Ссылка: .load () |Документация по jQuery API

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...