如何提交表单并保持在同一页面上答案

【问题标题】：How to submit form and remain on the same page如何提交表单并保持在同一页面上
【发布时间】：2011-12-29 16:35:11
【问题描述】：

有一个类似的问题演示了如何在 jQuery 中执行此操作。不幸的是，我使用的是原型并且翻译代码并不是很直接。

需要发生的是将值（电子邮件）发布到子域上的页面并且用户不会被重定向。我没有任何控制来编辑子域上的页面。

我们将不胜感激。

function submitEmailForm(){
        var userEmail = $('Text').value;
        $('EmailForm').action = 'http://subDomain.myDomain.com/?email_address='+userEmail;
        $('EmailForm').request({ onComplete: function(){ return false;} });
    }

<form method="post" id="EmailForm" onsubmit="submitMobileEmailForm(); return false;">
          <input type="text" id="Text"/>
          <input type="submit" id="Submit" value=""/>
</form>

【问题讨论】：

我相信最好将 onSubmit 用于
而不是 onClick 用于。还在调试。
看起来你真正想要的是 AJAX。你可以使用 jQuery 来处理 api.jquery.com/jQuery.ajax （这个帖子有一个shothand api.jquery.com/jQuery.post）
能不能不用xmlhttprequest（见this example）
如果您只想保持在同一页面上，因为您不想将用户重定向到 htpp://subDomain.myDomain.com/，那么进行 POST 可能是一个更好的主意来自服务器的请求，而不是来自客户端的请求。我认为重要的是要意识到，当您这样做时，您网站的安全性取决于 subDomain.myDomain.com 的安全性。

标签： javascript html forms redirect form-submit

【解决方案1】：

您可以使用 AJAX 模拟表单提交。

（注意：我使用了一个旧项目作为模板，所以我使用的一些技术可能有点旧。例如，事件处理可能会有所不同。）

function ajaxFormSubmission(form)
{
    xhrThingy = yourFunctionForObtainingXMLHttpRequestInstance();// XHR support is different for various browsers, so you might need to have browser specific code.
    xhrThingy.onreadystatechange = eventHandlerHere;
    xhrThingy.open('POST', 'theFileThatWillHandleYourRequest.php', true);// The used arguments are: HTTP request Method, request url, asynchronous flag
    xhrThingy.setRequestHeader("Content-type", "application/x-www-form-urlencoded");// Simulating Form Submission


    var emailData = form.elements['Text'].value;// Extracting needed data from form
    var postData = "emailAddress=" + emailData;
    xhrThingy.send(postData);
}

然后 eventHandlerHere 函数可以检查响应。像这样的：

function eventHandlerHere()
{
    if (xhrThingy.readyState==4 && xhrThingy.status==200)
    {
        var response = xhrThingy.responseText
        // Do whatever you need to do with the email adress
    }
}

在我从事的项目中，我使用嵌套方法进行快速原型制作，因此您的具体实现看起来会有所不同。例如，我引用了 xhrThingy，它只是在作用域内，因为该函数嵌套在 ajaxFormSubmission 函数中。

【讨论】：

感谢 RC。我实际上正在使用原型尝试您现在提到的 Ajax 方法。到目前为止，由于我的请求将是跨域的，因此它看起来无法按预期运行。我仍在努力解决它。
跨域应该没关系。只要您格式化请求以便服务器可以处理它，发送 AJAX 请求就不会有问题。
如果您需要访问的数据，您确实需要找到一种方法来绕过同源策略。我只尝试回答“如何在不加载新页面的情况下提交表单？”这个问题。有一些方法可以规避同源策略，但您应该记住，该策略用于防御跨站点脚本攻击。
RC，马特，你是对的。我在我的 Ajax 请求中发现并修复了一个编码问题，现在服务器正在接收数据。页面的行为也可以按我的需要工作。谢谢！

【解决方案2】：

您需要通过 JQuery 单击按钮将其重定向到同一页面上。

http://www.webdeveloper.com/forum/archive/index.php/t-105181.html

【讨论】：

他的意思可能是没有页面刷新 (AJAX)，不过还是不错的尝试 :)
我实际上对页面刷新没问题。只要用户不去我发送数据的那个页面，我就很高兴。 =)
这是一个怎样的答案？请澄清一下？