BinaryDevelop
  1. ホーム
  2. jquery

[解決済み] Jquery AJAXを使ったHTMLフォームの送信

2022-10-11 19:36:39

質問

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つだけ載せました。

どのように解決するのですか？

AJAXの簡単な説明

AJAX とは、単に非同期 JSON または XML (ほとんどの新しい状況では JSON) のことです。 非同期タスクを実行するため、おそらくユーザーにより楽しい UI エクスペリエンスを提供することができます。 この具体的なケースでは、AJAXを使用してFORMの送信を行っています。

本当に素早く、4つの一般的なWebアクションがあります。 GET , POST , PUT そして DELETE に直接対応します。 SELECT/Retreiving DATA , INSERTING DATA , UPDATING/UPSERTING DATA そして DELETING DATA . デフォルトのHTML/ASP.Net webform/PHP/Pythonやその他の form アクションは、POSTアクションである "submit"です。 このため、以下ではすべて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、ログインに関連するもの）には使用しないでください。

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します