web-dev-qa-db-ja.com

Jqueryを使用した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>

これは動作していません、私は警告メッセージを受け取ることさえしていません、そして私が送信するとき私は別のページにリダイレクトしたくない、私はただ警告メッセージを表示したいです。

それをする簡単な方法はありますか？

シモンズ：私はいくつかの分野を持っています、私はちょうど例として2つを入れました。

jqueryajaxform-submit
95
Oliveira

AJAXの簡単な説明

AJAXは単なる非同期JavaScriptまたはXMLです（ほとんどの場合、JSON）。私たちはASYNCタスクを行っているので、ユーザーにもっと楽しいUIエクスペリエンスを提供するでしょう。この特定のケースでは、AJAXを使用してFORM送信を行っています。

本当にすぐに4つの一般的なWebアクションがありますGET、POST、PUT、そしてDELETE。これらはSELECT/Retreiving DATA、INSERTING DATA、UPDATING/UPSERTING DATA、およびDELETING DATAと直接対応しています。デフォルトのHTML/ASP.Net Webフォーム/ PHP/Pythonまたはその他のformアクションは "送信"することです。これはPOSTアクションです。このため、以下ではすべてPOSTの実行について説明します。しかし時々、httpではあなたは別のアクションを望み、おそらく.ajaxを利用したいと思うかもしれません。

あなた専用の私のコード（コードのコメントで説明されています）：

<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
    <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'>
    /* 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 ) {
        alert('success');
      });
    });
</script>

</body>
</html>

ドキュメンテーション

jQueryのWebサイトの$.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、またはログイン関連のもの）にこの方法を使用しないでください

157
abc123
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);
            }
        })
26
Varun S

あなたが追加した場合：

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では機能しません。 （）になります。

2
Martin Zvarík