javascript - 如何提交表单并保持在同一页面上

Question

有一个类似的问题演示了如何在 jQuery 中做到这一点。不幸的是，我使用的是原型(prototype)并且翻译代码并不是很直接。

Submit form and stay on same page?

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

如有任何帮助，我们将不胜感激。

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>

Answer 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
    }
}

在我从事的项目中，我使用了嵌套方法来进行快速原型(prototype)设计，因此您的具体实现看起来会有所不同。例如，我引用了 xhrThingy，它仅在范围内，因为该函数嵌套在 ajaxFormSubmission 函数内。