ホームページ >ウェブフロントエンド >jsチュートリアル >Ajaxを使用してフォームデータを送信するにはどうすればよいですか? ajaxでフォームデータを送信する方法の紹介

Ajaxを使用してフォームデータを送信するにはどうすればよいですか? ajaxでフォームデータを送信する方法の紹介

不言
不言オリジナル
2018-10-12 10:57:2122167ブラウズ

フォームのフォームデータを送信する場合、一般的には ajax を使用して送信することを考えます。では、ajax はどのようにしてフォームのデータを送信するのでしょうか。 次の記事では、ajax 送信フォーム データ メソッドを紹介します。必要なパートナーはそれを参照してください。

さっそく本文に進みましょう~

Ajax によるフォーム データの送信は 2 つのタイプに分けられます。1 つは、結果を返さずにフォーム データをバックグラウンドに送信することです。バックグラウンド処理が完了すること、もう 1 つは結果を返すことであり、バックグラウンド実行の成功または失敗に関する情報をフロント デスクに返す必要があります。

ajax 自体は結果を返すカテゴリに属しており、成功方法はバックグラウンドで返された結果を処理することです。

Ajax はフォーム フォーム データを送信し、フォーム フォーム データをシリアル化することで結果を返します

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>login test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="ajax方式">
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script type="text/javascript">
        function login() {
            $.ajax({            //几个参数需要注意一下
                type: "POST",//方法类型
                dataType: "json",//预期服务器返回的数据类型
                url: "/users/login" ,//url
                data: $(&#39;#form1&#39;).serialize(),                
                success: function (result) {                    
                console.log(result);//打印服务端返回的数据(调试用)
                    if (result.resultCode == 200) {
                        alert("SUCCESS");
                    }
                    ;
                },                
                error : function() {
                    alert("异常!");
                }
            });
        }    </script></head><body><div id="form-div">
    <form id="form1" onsubmit="return false" action="##" method="post">
        <p>用户名:<input name="userName" type="text" id="txtUserName" tabindex="1" size="15" value=""/></p>
        <p>密 码:<input name="password" type="password" id="TextBox2" tabindex="2" size="16" value=""/></p>
        <p><input type="button" value="登录" onclick="login()"> <input type="reset" value="重置"></p>
    </form></div></body></html>

注: この方法でフォーム フォーム データを送信するときに注意する必要があることフォーム内の項目には name 属性が必要です。バックグラウンドで取得されるキーと値のペアは、key=name value、value= each value です。input タグ、span、またはその他のタグのいずれであっても、名前が必要です。 name 属性はありません。この項目はバックグラウンドで取得できません。 ,

上記がこの記事の全内容です。さらに興味深い内容については、PHP 中国語 Web サイトの他のコラムを参照してください。 ! !


以上がAjaxを使用してフォームデータを送信するにはどうすればよいですか? ajaxでフォームデータを送信する方法の紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。