jQuery ajax フォーム(Form)でGETの内容を取得するサンプル
環境
Google Chrome 106.0.5249.119
Windows 10 Home 64bit
jQuery 3.6.0
構文
var frmData = $(‘form’).serialize();
Serializeメソッドを使ってフォームの内容を一括して取得します
formのidを設定している場合は 「$(‘#ID名’).serialize(); 」を記載します。
操作方法
1.htmlコード
<input type="text" id="username" name="username" >
<input type="text" id="username" name="username" >
<input type="text" id="username" name="username" >
2.jQueryコード
<script type="text/javascript">
var frmData = $('form').serialize();
$.ajax({
url: '/user/index',
type: 'GET',
data: frmData,
timeout: 10000,
dataType: 'text'
})
.done(function (data) {
// 通信が成功したときの処理コード
})
.fail(function (data) {
// 通信が失敗したときの処理コード
})
.always(function (data) {
// 通信が完了したときの処理コード
});
</script>
<script type="text/javascript">
var frmData = $('form').serialize();
$.ajax({
url: '/user/index',
type: 'GET',
data: frmData,
timeout: 10000,
dataType: 'text'
})
.done(function (data) {
// 通信が成功したときの処理コード
})
.fail(function (data) {
// 通信が失敗したときの処理コード
})
.always(function (data) {
// 通信が完了したときの処理コード
});
</script>
<script type="text/javascript">
var frmData = $('form').serialize();
$.ajax({
url: '/user/index',
type: 'GET',
data: frmData,
timeout: 10000,
dataType: 'text'
})
.done(function (data) {
// 通信が成功したときの処理コード
})
.fail(function (data) {
// 通信が失敗したときの処理コード
})
.always(function (data) {
// 通信が完了したときの処理コード
});
</script>