jQuery はチェックボックスの選択された値と Ajax を使用してデータを非同期的に送信します-PHPチュートリアル-php.cn

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

一个新手

リリース： 2023-03-16 06:06:01

オリジナル

1830 人が閲覧しました

昨日友達とバックエンド管理システムのプロジェクトに取り組んでいたとき、チェックボックスの一括操作が必要でした。送信フォームを使用して送信するのは非常に便利ですが、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 ライブラリファイルをインポートする必要があります。そうしないと何をやっても役に立たなくなります。油断しないでください。私も時々こうなります...

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

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