Question

正如下面的墨水说明，我最初发布的是一段代码墙 - 对于任何人都无法帮助我。因此，我没有创建新的问题/主题，而是决定重做这个问题 - 标题仍适用于该问题。

我正在尝试实施jQuery Form插件。我的最终目标是 1）在提交之前验证表格 2）上传所选文件，然后 3）将提交的表单数据发送到处理脚本，并将文件和表单数据写入数据库。

我的第一次三次尝试使用某种ajax插件执行此操作都失败了。所以我从一个简单的ajax表单开始，它将两个表单字段发送到一个脚本，该脚本应该返回一个成功的运行，然后显示一条消息说明。然后，一旦我开始工作，我将继续处理数据，然后（希望）上传文件。

以下代码取自jQuery Form插件的示例代码。

这是表单HTML：

<form id="myForm" action="testProcessAjaxUploadForm.php" method="post"> 
    Name: <input type="text" name="name" /> 
    Comment: <textarea name="comment"></textarea> 
    <input type="submit" value="Submit Comment" /> 
</form>

这是jQuery代码：

// bind 'myForm' and provide a simple callback function 
$('#myForm').ajaxForm(function() { 
    alert("Thank you for your comment!"); 
});

这里是假设的PHP代码，用于处理检索到的表单数据并返回一些内容，以便显示javascript警告：

<?php
    require_once ('../scripts/logging.php');
    $log = new Logging();

    if (isset($_POST['comment']) && isset($_POST['name'])) {
        $log->lwrite('name: ' . $_POST['name'] . ', comment: ' . $_POST['comment']);
    } else {
        $log->lwrite('Nothing passed to the script.');
    }

    //return true;
    return $_POST['name'];
    //echo $_POST['name'];

第一个日志记录行会写入日志文件，因此我知道脚本正在执行。当使用任一返回行时，浏览器只会在地址栏中加载一个带有脚本文件名的空白页，当使用echo时，页面上会显示名称，并在地址栏中显示脚本的文件名。无论如何，javascript Thank You消息永远不会显示。

我错过了什么？

更新

PHP代码正常工作我的编写方式。这意味着它可以采用已发布的表单字段并使用它们。 jQuery Form插件示例页面说明了示例代码，“如果服务器返回成功状态，则用户将看到”谢谢“消息。”所以我想我的问题是，“什么是PHP脚本应该返回，这将导致jQuery代码检测到成功的响应，以便显示谢谢消息？

Link to testing page可以在与文件comment.txt中的网页相同的文件夹中查看php脚本内容

Answer 1

尝试使用类似的内容代替JavaScript：

// bind 'myForm' and provide a simple callback function 
$('#myForm').ajaxForm({ 
    success: function() { 
        alert("Thank you for your comment!"); 
    });
});

PHP返回的内容无关紧要 - 它可以是真的，或者回显一个语句。 “成功”来自服务器 - 这样当页面加载成功时，它将返回“成功”状态。如果该页面不存在，或者禁止访问，则会返回错误代码。

Answer 2

您的表单元素

<input type="submit" value="Submit Comment" />

导致您将脚本加载到包含已发布变量的新页面中。这意味着您的ajax函数没有时间执行返回，因为浏览器直接为您加载新的php页面。为防止这种情况发生，您需要从提交按钮中删除type="submit"，以便浏览器不会自动将您带到php脚本。

这样，你可以在异步执行ajax时停留在页面上，并且可以看到你的回调函数（在这种情况下，感谢警报），因为你还没有离开页面。

需要帮助实现jQuery Form插件

2 个答案: