ホームページ > 記事 > ウェブフロントエンド > jQueryフォームシリアル化サンプルコード
jQueryフォームシリアル化サンプルコード
- 巴扎黑オリジナル
- 2017-06-21 16:34:581235ブラウズ
この記事では、主に jQuery フォームのシリアル化サンプル コードを紹介します。必要な方は参考にしてください
具体的なコードは次のとおりです。上は通常の ajax リクエスト コードで、データ パラメーターの 2 つの転送形式がリストされています。
Ajaxリクエスト中のデータパラメータの取得を容易にするために、jqueryはいくつかのクイックメソッドを定義しています。
1.serialize()
使用法: var data = $("form").serialize();戻り値: フォームの内容を文字列にシリアル化します。
こうすれば、ajax経由でフォームデータを送信するときに、すべてのパラメータを1つずつリストする必要がなくなります。 data パラメータを $("form").serialize() に設定するだけです。 コアメソッドは $.param() で、キー/値、var obj = {first:"one",last:"two"};var に従って
配列またはオブジェクトをシリアル化するために使用されます。 str = $.param(obj);console.log(str); // first=one&last=two
また、serializeを使うメリットは中国語のコンパイル処理が付いていることです。したがって、シリアライズを使用することをお勧めします。
2.serialize
()
使用法: var jsonData = $("form").serializeArray(); 戻り値: ページ フォームを JSON 構造 (キーと値のペア) オブジェクトにシリアル化します。 。
例えば、 [{"name":"lihui", "age":"20"},{...}] は jsonData[index].name としてデータを取得します まとめると、ajax を使用すると、フォーム データを送信する場合、データ パラメーターは $(form).serialize() または $(form).serializeArray() に設定できます。さらに、詳細については w3c を参照することをお勧めします。 最後に完全な例を追加します。 html：$(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...
}
});
});
});JavaScript：
<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>php リマインダー: PHP環境を設定してサーバーを起動する必要があります
<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>以上がjQueryフォームシリアル化サンプルコードの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。