使用Jquery AJAX提交HTML表单

小编典典

使用Jquery AJAX提交HTML表单

ajax

我试图使用此示例使用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：我有几个领域，我仅举两个例子。

阅读 296

2020-07-26

共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。

我专门为您编写的代码（在代码注释中描述）：

/* 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发布表单并将结果放入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或登录相关的任何内容）

2020-07-26