如何在不重新加载的情况下提交表单？ [复制]答案

【问题标题】：How to submit form without reloading? [duplicate]如何在不重新加载的情况下提交表单？ [复制]
【发布时间】：2012-05-20 21:59:46
【问题描述】：

可能重复：
Submit form without page reloading

您好，我需要在不重新加载的情况下提交表单，如何使用 javascript 或框架来执行此操作？

谢谢

【问题讨论】：

1) 阿贾克斯。 2）添加iframe，名称为frameName，并将target="frameName"属性设置为form。
可以使用以下jquery插件：github.com/jinujd/jQuery-Async-Form

标签： javascript html forms

【解决方案1】：

您可以使用 jQuery 来做到这一点：http://jquery.com/

它是一个 javascript 框架，你可以用来做这种事情的方法之一是：

$('#formID').submit(function(){

    var ajaxURL = '/ajax/saveAccountSettings.php';

    $.ajax({
        type: 'POST',
        url: ajaxURL,
        data: { 
            username: $('#accountForm #username').val()
        },
        success: function(data){

                        //Do something

        }
    });

    return false;

});

可能值得先阅读一下如何使用 jquery...

【讨论】：

谢谢！还是很难学？一种新的网络东西......
嘿，不，一旦你掌握了这个概念，这实际上很容易，jquery 非常棒，可以做的远不止这些。只需阅读文档，您就会了解可以用它做什么

【解决方案2】：

我建议使用 JavaScript 而不是尝试使用 iframe 做任何事情。您正在寻找的是 XHRRequest，最简单的解决方案是使用 JQuery。我打算写一个简单的例子，但this tutorial 似乎很好地涵盖了这些步骤。

【讨论】：

谢谢，一定会去看看！

【解决方案3】：

您可以使用jQuery 和jQuery Form Plugin。

jQuery 表单插件的ajaxForm 函数使您能够“劫持” HTML 中的表单。考虑这个例子：

<html> 
<head> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script> 
    <script src="http://malsup.github.com/jquery.form.js"></script> 

    <script> 
        // wait for the DOM to be loaded 
        $(document).ready(function() { 
            // bind 'myForm' and provide a simple callback function 
            $('#myForm').ajaxForm(function() { 
                alert("Thank you for your comment!"); 
            }); 
        }); 
    </script> 
</head>
<body>
    <form id="myForm" action="comment.php" method="post"> 
    Name: <input type="text" name="name" /> 
    Comment: <textarea name="comment"></textarea> 
    <input type="submit" value="Submit Comment" /> 
</form>
</body>
</html>

查看插件的网站了解更多信息。它支持用于错误处理等的各种回调函数。

【讨论】：