使用Jquery AJAX提交HTML表单

Question

使用Jquery AJAX提交HTML表单

117

我正在尝试使用这个例子来使用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：我有几个字段，我只是举了两个例子。

- Oliveira

你能不能不要删除"form" HTML组件？并使用jQuery在提交按钮的点击处理程序上进行发布。 - gawkface

3个回答

30

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

- Varun S

1

当调用完成并从服务器接收到200 OK时，成功/完成函数将发生。 - Varun S

嗨，我放置了以下代码： $(document).ready(function () { $('#formoid').submit(function () { var postData = "text"; $.ajax({ type: "post", url: "url", data: postData, contentType: "studentFormInsert.php", success: function(responseData, textStatus, jqXHR) { alert("数据已保存") }, error: function(jqXHR, textStatus, errorThrown) { console.log(errorThrown); } }) }); 实际上它并没有起作用... PHP 方面需要做出任何修改吗？ - Oliveira

4

好的例子和写得好的代码，虽然不仅仅是例子代码而没有解释，但请发布一些带有答案的回答。 - abc123

2

我不明白如何将其与我想要发布的表单连接起来。 - Piotr Kamoda

为什么没有解释？ - 730wavy

这种使用 success 不是已弃用的。https://dev59.com/22Uo5IYBdhLWcg3wtRXh - drooh

4

请注意，$('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>

- Martin Zvarík

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- abc123 · Accepted Answer

AJAX简介

AJAX是指异步JSON或XML（在大多数新情况下使用JSON）。由于我们正在执行一个异步任务，因此我们很可能会为用户提供更愉悦的UI体验。在这种特定情况下，我们正在使用AJAX进行表单提交。

一般有四个网络动作，即GET、POST、PUT和DELETE；它们直接对应选择/检索数据、插入数据、更新/插入数据和删除数据。默认的HTML/ASP.Net webform/PHP/Python或任何其他form操作是“提交”，这是一个POST操作。因此，下面将全部描述如何进行POST。但是，有时候在http中你可能需要不同的操作，并且可能希望使用.ajax来实现。

我为您准备的代码（在代码注释中有详细说明）：

/* 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>

文档

来自 jQuery 网站的 $.post 文档。

示例: 使用ajax请求发送表单数据

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

示例：使用ajax提交表单并将结果放入一个

中。

<!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），请勿使用此方法处理安全数据（信用卡号码、社会安全号码、任何PCI、HIPAA或与登录相关的信息）