как получить отклик действия формы без ajax хорошим способом? - PullRequest
Новая
       18

как получить отклик действия формы без ajax хорошим способом?

1 голос
/ 04 октября 2010

Я знаю, как получить ответ AJAX: 

$.post( '/action', 
        { actiontodo: 'insert' } 
        function (data) { alert(data); } );

Int action.php (на стороне сервера): 

<?php 
       if ($_POST['actiontodo'] == 'insert') 
       { 
           doInsertAction(); 
           echo "inserted"; 
       } 
?>

Наконец, вывод этого кода - это СООБЩЕНИЕ со словом: вставлено.

НО, без ajax, у меня есть два способа решить это (на стороне сервера):

ONE: 

<?php 

if ($_POST['actiontodo'] == 'insert') { 
    doInsertAction(); 
    header( "Location: " . $_SERVER['HTTP_REFERER'] . " &response=inserted"  ); 
} ?>

TWO: 

<?php
session_start();
if ($_POST['actiontodo'] == 'insert') {
    doInsertAction();
    $_SESSION['response'] = 'inserted';
}
header( "Location: " . $_SERVER['HTTP_REFERER'] );
?>

Возвращаясь к странице, я получаю ответ от СЕССИИ или от GET и показываю предупреждение.

Мне больше нравится ОДНО решение, но у каждого решения есть проблема:

ОДНА проблема:

URL-адрес возврата: http://www.foo.com/myrefererurl&response=inserted

Если вы введете этот URL-адрес без использования формы, вы будете видеть окно предупреждения каждый раз, когда обновляете страницу. Вопрос: Как показать сообщение только ОДИН раз? (ТОЛЬКО ПОСЛЕ ДЕЙСТВИЯ ФОРМЫ)

ДВА задачи:

SESSION теперь имеет вставленное значение ($ _SESSION ['response']), когда страница возвращается из действия, очевидно, что решение может удалить это значение сеанса, например: unset ($ _SESSION ['response'], но ПРЕДПОЛАГАЕТСЯ, что UNSET не достигаются по какой-либо причине (сбой подключения или навигация, остановленная пользователем и т. Д.), Когда вы переходите на другую форму на другой странице, появится предупреждение, поскольку $ _SESSION ['response'] все еще существует (в другой форме без отправки и не имеет ничего общего с этим ответом.) Включая WITH GET & response = вставленный в другой URL, проблема также будет существовать.

Я надеюсь, что вы понимаете эти вопросы и предлагаете лучшее решение. В основном вопрос заключается в том, как контролировать эти ответы ......

1 Ответ

2 голосов
/ 04 октября 2010

Ненавязчивый JS, или «прогрессивное улучшение» - это путь.

Шаг 1:

Сначала создайте свою страницу, чтобы работать без JavaScript.Допустим, у вас есть простое приложение, в котором пользователь выбирает что-то и нажимает кнопку «Отправить».В зависимости от выбора, вы либо отобразите полезное сообщение об ошибке над формой, либо обновите страницу с правильным выводом и скроете (или избавитесь) форму.Создайте эту страницу, как для AJAX, но пока ничего не пишите.

Вот ваша страница: 

<html>
<head>
    <style type="text/css">
        p#feedback { display:none;}
    </style>
</head>
<body>
    <div id="feedback"></div>
    <div id="form">
        <form action="getaction.php" method="post" id="actionform">
            <select name="requestedAction">
                <option value="foo">Do Foo</option>
                <option value="bar">Do Bar</option>
            </select>
            <input type="submit">
        </form>
    </div>
</body>
</html>

При успешной отправке.сервер получит запрос с одним значением $_POST: requestedAction=foo (или bar).Исходя из этого, ваш серверный скрипт создаст новую страницу со всем от <html> до </html>.

На данный момент у вас есть страница, которая работает в любом браузере без поддержки JS.Старомодно.Очень надежный.

Шаг 2

Добавьте сценарии для переопределения поведения по умолчанию submit.Соберите нужные данные со страницы и создайте представление AJAX.Единственная разница между этим и представленной выше информацией заключается в том, что вы добавите флаг, сообщающий серверу, что запрос поступает через AJAX, и отправляете обратно только необходимое сообщение (вы также можете отправить его в другой скрипт).Сценарий сервера будет в основном проходить по той же логике, что и выше, но вместо построения всей страницы он просто отправляет обратно строку сообщения и оставляет ее AJAX, чтобы поместить эти данные в нужное место.Ваш ответ может быть просто фрагментом текста, блоком HTML или структурой данных XML.Это зависит от ваших потребностей.

<script type="text/javascript">
    $(enhance); // at onDOMReady, run the enhance function

    function enhance() {
        // Override the default form submission behavior:
        $('form#actionform').bind('submit',doSubmit);
    };
    function doSubmit(event) {
        $.ajax(
            {
                type:'POST',
                url:'/path/to/getaction.php',
                data:'request=' + $('form#actionform select[name=requestedAction]').val() + '&type=ajax',
                success:fnCallback
            }   
        );
        // Kill the submit action so the user doesn't leave the page
        event.preventDefault();
    };
    function fnCallback(xhr) {
        var strResponse = xhr.responseText; 
        if (strResponse === "error") {
            $('div#feedback').text("There was an error. Please try again.");
        }
        else {
            $('div#feedback').text(strResponse);
            $('div#form').hide();
        }
    };
</script>

В этом случае отправка AJAX будет идентифицироваться на сервере, поскольку есть второй POST параметр type=ajax.

Сайт, который делает это действительно невероятно хорошов очень большом масштабе это ESPN.Выключите JS и посмотрите заголовки их главных историй под общей картиной.Поведение идентично их странице с поддержкой AJAX, и, кроме того, что видео не работает, вы действительно никогда не узнаете, был ли ваш JS включен или выключен.По сути, нет способа создать подобный сайт, не начав с тупого HTML и не создавая его.

...