ホームページ >ウェブフロントエンド >jsチュートリアル >Ajaxを使用してフォームデータを送信するにはどうすればよいですか? ajaxでフォームデータを送信する方法の紹介
フォームのフォームデータを送信する場合、一般的には 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: $('#form1').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 サイトの他の関連記事を参照してください。