jQuery はチェック ボックスの選択された値と Ajax を使用してデータを非同期的に送信します

一个新手
リリース: 2023-03-16 06:06:01
オリジナル
1825 人が閲覧しました

昨日友達とバックエンド管理システムのプロジェクトに取り組んでいたとき、チェックボックスの一括操作が必要でした。送信フォームを使用して送信するのは非常に便利ですが、jQueryとAjaxを組み合わせて非同期的に送信するのは少し面倒でした。 Ajax は基本的にプロジェクトでチェック ボックス データを一括送信することは行ったことがないので、今日使用する場合はそれを共有します。

私が取り組んでいるプロジェクトの一部はより複雑なので、理解できる範囲で、ここでは小さな例のみを示します。

まず、図に示すように、単純な複数のチェックボックスのインターフェイスを作成しました。

これは、比較的単純な複数のチェックボックスの送信インターフェイスです。コードは次のとおりです:


 1 <body> 
 2 <p> 
 3    <input type="checkbox" name="check"  value="1"/>复选框1 
 4    <input type="checkbox" name="check"  value="2"/>复选框2 
 5    <input type="checkbox" name="check"  value="3"/>复选框3 
 6     <br/> 
 7    <input type="checkbox" name="check"  value="4"/>复选框4 
 8    <input type="checkbox" name="check" value="5"/>复选框5 
 9    <input type="checkbox" name="check"  value="6"/>复选框6
 10     <br/>
 11    <input type="checkbox" name="check"  value="7"/>复选框7
 12    <input type="checkbox" name="check"  value="8"/>复选框8
 13    <input type="checkbox" name="check"  value="9"/>复选框9
 14    <input type="button" id="dosubmit" value="提交">
 15 </p>
 16 </body>
ログイン後にコピー

次に、jQuery プログラムを書き始めました。コードは次のとおりです:


 1 <script>
 2     $(&#39;#dosubmit&#39;).click(function(){ 
 3         var checkID = [];//定义一个空数组 
 4  
 5         $("input[name=&#39;check&#39;]:checked").each(function(i){//把所有被选中的复选框的值存入数组 
 6             checkID[i] =$(this).val(); 
 7         }); 
 8 
 9         //用Ajax传递参数
 10         $.post(&#39;Ajax.php&#39;,{checkID:checkID},function(json){
 11 
 12         },&#39;json&#39;)
 13     })
 14 </script>
ログイン後にコピー

注: jQuery を書く前に JQ ライブラリ ファイルをインポートする必要があります。そうしないと何をやっても役に立たなくなります。油断しないでください。私も時々こうなります...

準備はすべて完了しました。テストを開始します:

最初にいくつかのボックスをチェックしました:

「送信」ボタンをクリックした後、F12 デバッグを開きます。結果は図に示すとおりです:

OK、データを送信するために、Ajax バッチ操作チェック ボックスと組み合わせた jQuery の使用を実装しました。ここでは、jQuery を Ajax と組み合わせて使用​​する方法を簡単にデモンストレーションします。インターフェイスとコードはより単純になります。

以上がjQuery はチェック ボックスの選択された値と Ajax を使用してデータを非同期的に送信しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート