115

この例を使用して、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: いくつかのフィールドがあります。例として 2 つだけ挙げました。

4

3 に答える 3

199

AJAX の簡単な説明

AJAX は単に非同期 JSON または XML (ほとんどの新しい状況では JSON) です。ASYNC タスクを実行しているため、ユーザーにより楽しい UI エクスペリエンスを提供できる可能性があります。この特定のケースでは、AJAX を使用して FORM 送信を行っています。

非常にすぐに、4 つの一般的な Web アクション、、、GETおよびがありPOSTます。これらは、、、およびに直接対応します。デフォルトの HTML/ASP.Net webform/PHP/Python またはその他のアクションは、POST アクションである「送信」です。このため、以下ではすべて POST の実行について説明します。ただし、http を使用すると、別のアクションが必要になる場合があり、.PUTDELETESELECT/Retreiving DATAINSERTING DATAUPDATING/UPSERTING DATADELETING DATAform.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 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、またはログイン関連のもの) にはこの方法を使用しないでください。

于 2013-05-01T18:27:57.997 に答える
29 
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);
            }
        })
于 2013-05-01T18:00:01.743 に答える
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() は機能します。

于 2017-09-07T17:28:13.347 に答える