ホームページ >ウェブフロントエンド >jsチュートリアル >jQuery フォームのシリアル化サンプル コード例の共有
jQuery フォームのシリアル化サンプル コード例の共有
- 小云云オリジナル
- 2018-01-10 09:26:501480ブラウズ
この記事では主に jQuery フォーム シリアル化のサンプル コードを紹介します。必要な方は参考にしていただければ幸いです。
これ以上ナンセンスではありません。具体的なコードは次のとおりです。
$(function(){
$('#send').click(function(){
$.ajax({
type: "GET",
url: "test.json",
data: {username:$("#username").val(), password:$("#password").val()}, // 参数为对象
dataType: "json",
success: function(data){
// code...
}
});
});
});
$(function(){
$('#send').click(function(){
var username = $("#username").val();
var password = $("#password").val();
$.ajax({
type: "GET",
url: "test.json",
data: "username"+username+"&password"+password, // 参数为字符串拼接，并用&连接
dataType: "json",
success: function(data){
// code...
}
});
});
});上記は、データ パラメーターの 2 つの送信形式をリストした通常の Ajax リクエスト コードです。
Ajaxリクエスト中のデータパラメータの取得を容易にするために、jqueryはいくつかのクイックメソッドを定義しています。
1.serialize()
使用法: var data = $("form").serialize();
戻り値: フォームの内容を文字列にシリアル化します。
こうすれば、ajax経由でフォームデータを送信するときに、すべてのパラメータを1つずつリストする必要がなくなります。 data パラメータを $("form").serialize() に設定するだけです。
コアメソッドは $.param() で、キー/値に従って配列またはオブジェクトをシリアル化するために使用されます。
var obj = {first: "one", last: "two"}; $.param(obj);
console.log(str); // first=one&last=two
2.serializeArray()
使用法: var jsonData = $("form").serializeArray(); 戻り値: ページ フォームを JSON 構造 (キーと値のペア) オブジェクトにシリアル化します。 例えば、 [{"name":"lihui", "age":"20"},{...}] は jsonData[index].name としてデータを取得します まとめると、ajax を使用すると、フォーム データを送信する場合、データ パラメーターは $(form).serialize() または $(form).serializeArray() に設定できます。さらに、詳細については w3c を参照することをお勧めします。 最後に完全な例を追加します。 html:<html>
<head>
<meta charset="utf-8">
</head>
<body>
<form id="demo">
<input type="text" value="demo1" name="demo1">
<input type="text" value="demo2" name="demo2">
<input type="text" value="demo3" name="demo3">
<input type="submit" value="提交" id="submit">
</form>
</body>
</html>JavaScript:
<script>
// 别忘了引入jquery !!!
$(function(){
$("#submit").click(function(){
// var data = $("form").serializeArray();
var data = $("form").serialize();
$.ajax({
type:"GET",
url:"1.php",
data:data,
dataType:"json",
success:function(data){
console.log(data);
},
error:function(xhr,error){
console.log(error);
}
})
})
})
</script>php リマインダー: PHP 環境を設定し、サーバーを開く必要があります
<?php echo json_encode($_GET); ?>関連する推奨事項: jqueryフォームシリアル化の注意事項説明
jQuery はフォームを Object オブジェクトのインスタンスにシリアル化します
以上がjQuery フォームのシリアル化サンプル コード例の共有の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。