将我的表单提交切换到 ajax - 我可以更改 onsubmit 操作吗？

Question

我看到很多关于从头开始构建提交表单的 jquery 教程，这很酷，但我想知道是否可以转换我现有的表单。

我使用的是典型的表单，并且已经检查了电子邮件和空白值。现在，在提交表单时，用户会被带到带有 form-submit.php 的确认 php 页面。

我想将其更改为仅在当前页面上给用户一行“您的表单已提交”

这是我的表格：

<form name="theForm" action="/contact-form2.php" method="post" onsubmit="return formCheck(this);" >
<table class="formTable" cellpadding="3" cellspacing="0">
  <tbody><tr>
    <td align="left"><b>Name:</b></td>
    <td><input name="name" id="name" size="25" value="" type="text" /></td>
   </tr>
  <tr>
    <td align="left"><b>Email:</b></td>
    <td><input name="email" id="email" size="25"  type="text" /></td>
  </tr>
  <tr>
    <td align="left"><b>Confirm Email:</b></td>
    <td><input name="email_confirm" id="email_confirm" size="25"  type="text" /></td>
  </tr>
  <tr>
    <td align="left"><b>Subject:</b></td>
    <td><input name="Subject" id="subject" size="35" value="" type="text" /></td>
  </tr>
  <tr>
    <td align="left" valign="top"><b>Message:</b></td>
    <td><textarea name="Message" id="message" cols="30" rows="6"></textarea></td>
  </tr>
  <tr align="left"><td>&nbsp;</td><td><input type="submit" value="Submit" onclick=" return checkEmail();" />&nbsp;<input type="reset" value="Reset" /></td></tr>
</tbody>
</table>
</form>

那么是否可以只更改 on submit 或 onclick 以便能够通过外部 php 文件提交表单并保持在同一页面上？

Answer 1

您可以转换现有的表单，但不是仅仅更改 onSubmit 或 onClick 事件那么简单。

当您使用 jQuery 或其他 Ajax 库执行回调时，您正在将新内容加载到现有页面中。为此，您需要一个带标签的块，通常是一个 div，以包含任何要更改的数据。您还需要为回调编写包装代码以发送它并更新页面的 HTML。

在您的表单上快速而肮脏的版本是将表格包装在一个 div 标记中，然后 Ajax 调用为该 div 返回新的 HTML。 onsubmit 的新目标是我上面描述的回调的包装代码。

您仍然需要完成所有工作才能使用 jQuery 并将其指向正确的位置。由于我使用prototype.js，我无法详细说明jQuery 过程，但您正在阅读的所有教程都可以。

Answer 2

是的。我建议引入一些 Javascript（以下示例使用 jQuery）：

<script type="text/javascript">
// when the DOM is ready
$(document).ready(function() {
    // bind some code to the form's onsubmit handler
    $('form[name=theForm]').submit(function() {
        if(formCheck(this)) {
            // $.post makes a POST XHR request, the first parameter takes the form's
            // specified action
            $.post($("form[name=theForm]").attr('action'), function(resp) {
                if(resp == '1') {
                    alert('Your form has been submitted');
                } else {
                    alert('There was a problem submitting your form');
                }
            });
        }
        return false;
    });
});
</script>

上述提交处理程序末尾的 return false 可防止浏览器以传统方式加载表单的操作（跟随 url）。此外，如果 Javascript 不存在，表单将提交老式的方式，所以本质上您在标准表单实现之上添加了一层可用性，可以优雅地降级。

我想指出，向用户提供真实的反馈总是一个好主意。也就是说，表单的ajax发布可以从服务器捕获一些指示，在上面的示例中，我假设'1'表示记录已成功保存，'0'表示未成功保存已保存（查询失败等）。向用户显示的消息取决于此结果。

Answer 3

是的，您可以将 onclick 表单操作更改为 javascript:myajaxsubmit() 函数。