Question

我知道如何获得AJAX响应：

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

在action.php（服务器端）：

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

最后，此代码的输出是一个警告BOX，其中包含：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'] );
?>

返回页面我从SESSION或GET获得答案并显示警告。

我更喜欢ONE解决方案，但每个解决方案都有问题：

一个问题：

返回的网址为：http://www.foo.com/myrefererurl&response=inserted

如果您在不使用表单的情况下键入此URL，则每次刷新页面时都会看到警告BOX。问题是：如何只显示一次消息？（仅在表格行动之后）

两个问题：

SESSION现在插入了值（$ _SESSION ['response']），当页面从动作返回时，显然解决方案可能会删除会话的这个值，如：unset（$ _SESSION ['response']，但是支持UNSET因任何原因未到达（连接失败或用户停止导航等），当您转到其他页面中的另一个表单时，警报将显示，因为$ _SESSION ['response']仍然存在（以另一种形式）没有提交它并且与该响应无关。）包含GET＆amp; response =插入到另一个URL中，问题也将存在。

我希望您能理解这些问题并带来最佳解决方案。基本上问题是如何控制这些反应......

Answer 1

不引人注目的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开始构建，基本上没有办法建立这样的网站。

如何在没有ajax的情况下获得表单动作响应？

1 个答案: