使用Jquery AJAX提交HTML表单


107

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


您不能取消“表单” HTML组件吗?并使用jquery张贴“来”按钮的单击处理程序
harshvchawla

Answers:


177

AJAX快速描述

AJAX只是异步JSON或XML(在大多数新情况下为JSON)。因为我们正在执行ASYNC任务,所以我们很可能会为我们的用户提供更愉快的UI体验。在这种情况下,我们使用AJAX进行FORM提交。

真的很快有4个一般的网络行动GETPOSTPUT,和DELETE; 这些直接与对应SELECT/Retreiving DATAINSERTING DATAUPDATING/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或登录相关的任何内容)


@ abc123如何在其中设置授权请求标头?我尝试过,beforeSend: function (xhr) { xhr.setRequestHeader("Authorization", "*****"); xhr.setRequestHeader("contentType", "application/json;charset=UTF-8"); },但是没有设置任何标头
mahendra kawde

@mahendrakawde,您需要利用$.ajax它,如果您愿意,我可以写一个例子,但这确实是一个单独的问题
abc123 2015年

@ abc123我确实为此启动了线程。让我与您分享。
mahendra kawde 2015年

1
我们是否可以完全避免使用表单发布,而只是对按钮(不是任何表单div的html按钮)单击处理程序进行jquery发布。这样既不需要event.preventdefault吗?
harshvchawla

1
@harshvchawla当然,但是从html元素提取的变量的选择查询是不同的
abc123

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

1
呼叫完成并从服务器收到200 OK时,将发生成功/完成功能
Varun S

嗨,我说:$(document).ready(function(){$('#formoid')。submit(function(){var postData =“ text”; $ .ajax({type:“ post”,url:“ url”,数据:postData,contentType:“ studentFormInsert.php”,成功:function(responseData,textStatus,jqXHR){alert(“数据已保存”)},错误:function(jqXHR,textStatus,errorThrown){console.log( errorThrown);}})});它实际上不起作用..需要在PHP端进行任何修改吗?
Oliveira

4
一个很好的例子并且写得很好,请发布一些答案,尽管不只是没有解释的示例代码。
abc123

2
我不知道如何将该表格与我要发布的表格联系起来
Piotr Kamoda

为什么没有解释?
丰富

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()可以。

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.