ホームページ > 記事 > ウェブフロントエンド > jQuery はチェックボックスで選択されたすべての値を選択し、Ajax を使用してデータを非同期的に送信します
jQuery はチェックボックスで選択されたすべての値を選択し、Ajax を使用してデータを非同期的に送信します
- 炎欲天舞オリジナル
- 2017-08-04 18:01:071246ブラウズ
昨日友達とバックエンド管理システムのプロジェクトに取り組んでいたとき、チェックボックスの一括操作が必要でした。送信フォームを使用して送信するのは非常に便利ですが、jQueryとAjaxを組み合わせて非同期的に送信するのは少し面倒でした。 Ajax は基本的にプロジェクトでチェック ボックス データを一括送信することは行ったことがないので、今日使用する場合はそれを共有します。
私が取り組んでいるプロジェクトの一部はより複雑なので、理解できる範囲で、ここでは小さな例のみを示します。
まず、図に示すように、単純な複数のチェックボックスのインターフェイスを作成しました。
これは、比較的単純な複数のチェックボックスの送信インターフェイスです。コードは次のとおりです:
<body><p> <input type="checkbox" name="check" value="1"/>复选框1 <input type="checkbox" name="check" value="2"/>复选框2 <input type="checkbox" name="check" value="3"/>复选框3 <br/> <input type="checkbox" name="check" value="4"/>复选框4 <input type="checkbox" name="check" value="5"/>复选框5 <input type="checkbox" name="check" value="6"/>复选框6 <br/> <input type="checkbox" name="check" value="7"/>复选框7 <input type="checkbox" name="check" value="8"/>复选框8 <input type="checkbox" name="check" value="9"/>复选框9 <input type="button" id="dosubmit" value="提交"> </p> </body>
次に、jQuery プログラムを書き始めました。コードは次のとおりです:
<script>
$('#dosubmit').click(function(){
var checkID = {};//定义一个空数组
$("input[name='check']:checked").each(function(i){//把所有被选中的复选框的值存入数组
checkID[i] =$(this).val();
});
//用Ajax传递参数
$.post('Ajax.php',{checkID:checkID},function(json){
},'json')
})
</script>注: jQuery を記述する前に JQ ライブラリ ファイルをインポートする必要があります。そうしないと何をしても役に立たなくなります。油断しないでください。私も時々このようになります...
わかりました、すべての準備が完了しました 完了、テストを開始します:
最初にいくつかのボックスをチェックしました:
[送信] ボタンをクリックした後、F12 デバッグを開きます。結果は図に示すとおりです:
OK、これでデータを送信するために jQuery を Ajax バッチ操作と組み合わせて使用するチェックボックスが実装されました。ここでは、jQuery を Ajax と組み合わせて使用する方法を簡単にデモンストレーションします。インターフェイスとコードはより単純になります。
以上がjQuery はチェックボックスで選択されたすべての値を選択し、Ajax を使用してデータを非同期的に送信しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。