ホームページ > 記事 > ウェブフロントエンド > Ajaxを使用してフォームデータを送信するにはどうすればよいですか? ajaxでフォームデータを送信する方法の紹介
Ajaxを使用してフォームデータを送信するにはどうすればよいですか? ajaxでフォームデータを送信する方法の紹介
- 不言オリジナル
- 2018-10-12 10:57:2122127ブラウズ
フォームのフォームデータを送信する場合、一般的には 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 サイトの他の関連記事を参照してください。