使用 Jquery AJAX 提交 HTML 表单

edqdpe6u 于 2022-11-03 发布在 jQuery

关注(0)|答案(3)|浏览(246)

我试图提交一个HTML表单使用 AJAX 使用this example。
我的HTML程式码：

<form id="formoid" action="studentFormInsert.php" title="" method="post">
    <div>
        <label class="title">First Name</label>
        <input type="text" id="name" name="name" >
    </div>
    <div>
        <label class="title">Name</label>
        <input type="text" id="name2" name="name2" >
    </div>
    <div>
        <input type="submit" id="submitButton"  name="submitButton" value="Submit">
    </div>
</form>

我的脚本：

<script type="text/javascript">
    $(document).ready(function() { 
        $('#formoid').ajaxForm(function() { 
            alert("Thank you for your comment!"); 
        }); 
    });
</script>

这是行不通的，我甚至没有得到警报消息，当我提交我不想重定向到另一个页面，我只想显示警报消息。
有简单的方法吗？
PS：我有几个领域，我刚才举了两个例子。

jquery

来源：https://stackoverflow.com/questions/16323360/submitting-html-form-using-jquery-ajax

3条答案

按热度按时间

jm81lzqq1#

AJAX 的快速描述

AJAX 就是简单的异步JSON或XML（在大多数较新的情况下是JSON）。因为我们正在做一个ASYNC任务，我们可能会为我们的用户提供一个更愉快的UI体验。在这个特定的例子中，我们正在做一个表单提交使用AJAX。
很快就有4个通用的Web操作GET、POST、PUT和DELETE;这些直接对应于SELECT/Retreiving DATA、INSERTING DATA、UPDATING/UPSERTING DATA和DELETING DATA。默认的HTML/ASP.NET webform/PHP/Python或任何其他form操作是“submit”，这是一个POST操作。因此，下面将描述如何执行POST。然而，有时候对于http，您可能需要一个不同的操作，并且可能希望利用.ajax。

我专门为您准备的代码（在代码注解中描述）：

第一个

文件

From jQuery website $.post documentation.

*示例：使用 AJAX 请求发送表单数据 *

$.post("test.php", $("#testform").serialize());

示例：使用 AJAX 发布表单并将结果放入div

<!DOCTYPE html>
<html>
    <head>
        <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    </head>
    <body>
        <form action="/" id="searchForm">
            <input type="text" name="s" placeholder="Search..." />
            <input type="submit" value="Search" />
        </form>
        <!-- the result of the search will be rendered inside this div -->
        <div id="result"></div>
        <script>
            /* attach a submit handler to the form */
            $("#searchForm").submit(function(event) {

                /* stop form from submitting normally */
                event.preventDefault();

                /* get some values from elements on the page: */
                var $form = $(this),
                    term = $form.find('input[name="s"]').val(),
                    url = $form.attr('action');

                /* Send the data using post */
                var posting = $.post(url, {
                    s: term
                });

                /* Put the results in a div */
                posting.done(function(data) {
                    var content = $(data).find('#content');
                    $("#result").empty().append(content);
                });
            });
        </script>
    </body>
</html>

重要说明

在不使用OAuth或至少使用HTTPS（TLS/SSL）的情况下，请勿将此方法用于安全数据（信用卡号、SSN、任何与PCI、HIPAA或登录相关的内容）

赞(0）回复(0）举报 2022-11-09

goqiplq22#

var postData = "text";
      $.ajax({
            type: "post",
            url: "url",
            data: postData,
            contentType: "application/x-www-form-urlencoded",
            success: function(responseData, textStatus, jqXHR) {
                alert("data saved")
            },
            error: function(jqXHR, textStatus, errorThrown) {
                console.log(errorThrown);
            }
        })

赞(0）回复(0）举报 2022-11-09

ohtdti5x3#

请注意，**$（'FORM'）.serialize（）**很容易使用，但不适用于文件输入/上传！
这将起作用：

<form id="myform">
   <input type="file" name="somefile">
   <button type="submit">Submit</button>
</script>

// jquery.form.min.js
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.form/4.3.0/jquery.form.min.js">

<script>
// register form for ajax
$('#myform').ajaxForm(function(submit_response) {
    console.log(submit_response);
});
</script>

赞(0）回复(0）举报 2022-11-09

我来回答

使用 Jquery AJAX 提交 HTML 表单

3条答案

AJAX 的快速描述

我专门为您准备的代码（在代码注解中描述）：

文件

重要说明

相关问题

热门标签

最新问答