使用 Jquery AJAX 提交 HTML 表单

Posted 2023-03-05

技术标签:

【中文标题】使用 Jquery AJAX 提交 HTML 表单【英文标题】：Submitting HTML form using Jquery AJAX 【发布时间】：2021-12-09 06:54:17 【问题描述】：

我正在尝试使用 this example 使用 AJAX 提交 html 表单。

我的 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：我有几个字段，我只是举了两个作为例子。

【问题讨论】：

你不能取消“form”html组件吗？并使用 jquery 发布来按钮的点击处理程序 【参考方案1】：

AJAX简介

AJAX 只是异步 JSON 或 XML（在大多数较新的情况下为 JSON）。因为我们正在执行 ASYNC 任务，我们可能会为我们的用户提供更愉快的 UI 体验。在这种特定情况下，我们使用 AJAX 进行 FORM 提交。

很快就有 4 个通用网络操作 GET、POST、PUT 和 DELETE；这些直接对应于SELECT/Retreiving DATA、INSERTING DATA、UPDATING/UPSERTING DATA 和DELETING DATA。默认的 HTML/ASP.Net webform/PHP/Python 或任何其他 form 操作是“提交”，这是一个 POST 操作。因此，下面将全部描述如何进行 POST。但是，有时使用 http，您可能需要不同的操作，并且可能希望使用 .ajax。

我的代码专门给你（在代码 cmets 中描述）：

/* attach a submit handler to the form */
$("#formoid").submit(function(event) 

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

  /* get the action attribute from the <form action=""> element */
  var $form = $(this),
    url = $form.attr('action');

  /* Send the data using post with element id name and name2*/
  var posting = $.post(url, 
    name: $('#name').val(),
    name2: $('#name2').val()
  );

  /* Alerts the results */
  posting.done(function(data) 
    $('#result').text('success');
  );
  posting.fail(function() 
    $('#result').text('failed');
  );
);

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

<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">Last Name</label>
    <input type="text" id="name2" name="name2">
  </div>
  <div>
    <input type="submit" id="submitButton" name="submitButton" value="Submit">
  </div>
</form>

<div id="result"></div>

文档

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 或登录相关的内容）

【讨论】：

@abc123 如何在此设置授权请求标头？我试过

beforeSend: function (xhr) 			 				xhr.setRequestHeader("Authorization", "*****"); 				xhr.setRequestHeader("contentType", "application/json;charset=UTF-8"); 			,

但这并没有设置任何标题 @mahendrakawde 您需要使用$.ajax，如果您愿意，我可以写一个示例，但这确实是一个单独的问题 @abc123 我确实为此启动了线程。让我与你分享。我们是否可以完全避免使用表单发布，而只需在按钮（这是一个不属于任何表单 div 的 html 按钮）单击处理程序上执行 jquery 发布。这种方式 event.preventdefault 也不需要？ @harshvchawla 当然，但是您对从 html 元素中提取的变量的选择查询是不同的【参考方案2】：

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);
            
        )

【讨论】：

成功/完成函数将在调用完成并从服务器收到 200 OK 时发生嗨，我把：$(document).ready(function () $('#formoid').submit(function () var postData = "text"; $.ajax( type : "post", url: "url", data: postData, contentType: "studentFormInsert.php", 成功: function(responseData, textStatus, jqXHR) alert("data saved") , error: function(jqXHR, textStatus , errorThrown) console.log(errorThrown); ) ); 它实际上不起作用.. 需要在 php 端进行任何修改吗？很好的例子，写得很好，请附上一些答案，虽然不仅仅是没有解释的示例代码。我不知道如何将它与我希望发布的表单联系起来为什么没有解释？【参考方案3】：

如果你添加：

jquery.form.min.js

您可以这样做：

<script>
$('#myform').ajaxForm(function(response) 
  alert(response);
);

// this will register the AJAX for <form id="myform" action="some_url">
// and when you submit the form using <button type="submit"> or $('myform').submit(), then it will send your request and alert response
</script>

注意：

您可以按照上面帖子中的建议使用简单的 $('FORM').serialize()，但这不适用于 FILE INPUTS... ajaxForm() 会。

【讨论】：

以上是关于使用 Jquery AJAX 提交 HTML 表单的主要内容，如果未能解决你的问题，请参考以下文章

循环表单并使用 jQuery 使用 AJAX 提交

Jquery 表单提交无法使用 AJAX 和 Rails 莫名其妙地重新渲染 index.html.erb

使用 django ajax jquery 提交一个文件不起作用的表单

通过jQuery Ajax提交表单数据时同时上传附件

Jquery AJAX提交多个FORM表单

jQuery ajax提交form表单