使用 Jquery AJAX 提交 HTML 表单 [英] Submitting HTML form using Jquery AJAX

查看：40
本文介绍了使用 Jquery AJAX 提交 HTML 表单的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在尝试使用 此示例 使用 AJAX 提交 HTML 表单.

我的 HTML 代码:

<div><label class="title">名字</label><input type="text" id="name" name="name" >

<div><label class="title">名称</label><input type="text" id="name2" name="name2" >

<div><input type="submit" id="submitButton" name="submitButton" value="Submit">

</表单>

我的脚本:

这不起作用，我什至没有收到警报消息当我提交时，我不想重定向到另一个页面，我只想显示警报消息.

有没有简单的方法?

PS:我有几个字段，我只举了两个作为例子.

解决方案

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.

我专门为你编写的代码(在代码注释中描述):

/* 将提交处理程序附加到表单 */$("#formoid").submit(function(event) {/* 停止表单正常提交 */event.preventDefault();/* 从 <form action=""> 获取动作属性元素 */var $form = $(this),url = $form.attr('action');/* 使用带有元素 id 名称和名称 2 的 post 发送数据*/var 发布 = $.post(url, {名称:$('#name').val(),name2: $('#name2').val()});/* 提示结果 */发布.完成(功能(数据){$('#result').text('成功');});发布.失败(功能(){$('#result').text('失败');});});

<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">名字</label><input type="text" id="name" name="name">

<div><label class="title">Last Name</label><input type="text" id="name2" name="name2">

<div><input type="submit" id="submitButton" name="submitButton" value="Submit">

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

文档

来自 jQuery 网站 $.post 文档.>

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

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

示例:使用 ajax 发布表单并将结果放入 div

<头><script src=http://code.jquery.com/jquery-1.9.1.js"></script><身体><form action="/";id=搜索表单"><输入类型=文本"名称=s"占位符=搜索..."/><输入类型=提交"值=搜索"/></表单><!-- 搜索结果会在这个div里面呈现--><div id=结果"></div><脚本>/* 将提交处理程序附加到表单 */$("#searchForm").submit(function(event) {/* 停止表单正常提交 */event.preventDefault();/* 从页面上的元素中获取一些值:*/var $form = $(this),term = $form.find('input[name="s"]').val(),url = $form.attr('action');/* 使用 post 发送数据 */var 发布 = $.post(url, {s:期限});/* 将结果放入 div */发布.完成(功能(数据){var content = $(data).find('#content');$(#result").empty().append(content);});});

重要提示

如果不使用 OAuth 或至少使用 HTTPS (TLS/SSL)，请不要将此方法用于安全数据(信用卡号、SSN、任何与 PCI、HIPAA 或登录相关的内容)

Im trying to submit a HTML form using AJAX using this example.

My HTML code:

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

My script:

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

This is not working, I'm not even getting the alert message and when I submit I don't want to redirect to another page, I just want to show the alert message.

Is there a simple way of doing it?

PS: I have several fields, I have just put two as an example.

解决方案

Quick Description of AJAX

AJAX is simply Asyncronous JSON or XML (in most newer situations JSON). Because we are doing an ASYNC task we will likely be providing our users with a more enjoyable UI experience. In this specific case we are doing a FORM submission using AJAX.

Really quickly there are 4 general web actions GET, POST, PUT, and DELETE; these directly correspond with SELECT/Retreiving DATA, INSERTING DATA, UPDATING/UPSERTING DATA, and DELETING DATA. A default HTML/ASP.Net webform/PHP/Python or any other form action is to "submit" which is a POST action. Because of this the below will all describe doing a POST. Sometimes however with http you might want a different action and would likely want to utilitize .ajax.

My code specifically for you (described in code comments):

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

Documentation

From jQuery website $.post documentation.

Example: Send form data using ajax requests

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

Example: Post a form using ajax and put results in a 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>

Important Note

Without using OAuth or at minimum HTTPS (TLS/SSL) please don't use this method for secure data (credit card numbers, SSN, anything that is PCI, HIPAA, or login related)

这篇关于使用 Jquery AJAX 提交 HTML 表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆