php - 使用复选框 ajax 更改查询

Question

我想知道如何在不刷新页面的情况下选择复选框中的值

<div class="da-form-row">
  <label>Filter</label>
  <div class="da-form-item">
    <ul class="da-form-list inline">
      <span class="formNote">
      <?= $_LANG[211]; ?>
      </span>
      <li>
        <input class="uniform" type="checkbox" name="individual" id="individual" value="0" />
        <label>
          <?= $_LANG[11]; ?>
        </label>
      </li>
      <li>
        <input class="uniform" type="checkbox" name="individual" id="individual" value="1" />
        <label>
          <?= $_LANG[12]; ?>
        </label>
      </li>
      <li>
        <input class="uniform" type="checkbox" name="individual" id="individual" value="2" />
        <label>
          <?= $_LANG[13]; ?>
        </label>
      </li>
      <li>
        <input class="uniform" type="checkbox" name="individual" id="individual" value="3" />
        <label>
          <?= $_LANG[14]; ?>
        </label>
      </li>
    </ul>
  </div>
</div>
<div class="da-form-row">
  <label>
    <?= $_LANG[134];?>
    <span class="required">*</span></label>
  <div class="da-form-item large"> <span class="formNote">
    <?= $_LANG[135];?>
    </span>
    <select class="chzn-select required" name="ano_letivo">
      <?
                                                $type = $_GET['filter'];

                                                $q
                                                ->select()
                                                ->from('user')
                                                ->where_equal_to(
                                                                    array(
                                                                            'cargo'=>$type
                                                                    )
                                                            )
                                                ->run();

                                                if($q){
                                                        $unit=$q->get_selected();
                                                        foreach($unit as $array){

                                                                print "<option value='".$array['id']."'>".$array['nome']."</option>";
                                                         }
                                                }

                                                ?>
    </select>
  </div>
</div>

我不想刷新页面。通过ajax我是怎么做到的？

请记住，如果选择了 4 个过滤器，则有 4 个复选框。

->where_equal_to(
                    array(
                            'cargo'=>$type,
                            'cargo'=>$type2,
                            'cargo'=>$type3
                        )
                )

Answer 1

试试这个代码。在单击的每个复选框上，ajax 查询将被传递到您的服务器端

<div class="da-form-row">
      <label>Filter</label>
      <div class="da-form-item">
        <ul class="da-form-list inline">
          <span class="formNote">
          <?= $_LANG[211]; ?>
          </span>
          <li>
            <input class="uniform" type="checkbox" name="individual" id="individual" value="0" onclick="check(this)" />
            <label>
              <?= $_LANG[11]; ?>
            </label>
          </li>
          <li>
            <input class="uniform" type="checkbox" name="individual" id="individual" value="1" onclick="check(this)"/>
            <label>
              <?= $_LANG[12]; ?>
            </label>
          </li>
          <li>
            <input class="uniform" type="checkbox" name="individual" id="individual" value="2" onclick="check(this)" />
            <label>
              <?= $_LANG[13]; ?>
            </label>
          </li>
          <li>
            <input class="uniform" type="checkbox" name="individual" id="individual" value="3" onclick="check(this)" />
            <label>
              <?= $_LANG[14]; ?>
            </label>
          </li>

        </ul>
      </div>
    </div>
    <div class="da-form-row">
      <label>
        <?= $_LANG[134];?>
        <span class="required">*</span></label>
      <div class="da-form-item large"> <span class="formNote">
        <?= $_LANG[135];?>
        </span>
        <select class="chzn-select required" name="ano_letivo">
          <?
                                                    $type = $_GET['filter'];

                                                    $q
                                                    ->select()
                                                    ->from('user')
                                                    ->where_equal_to(
                                                                        array(
                                                                                'cargo'=>$type
                                                                        )
                                                                )
                                                    ->run();

                                                    if($q){
                                                            $unit=$q->get_selected();
                                                            foreach($unit as $array){

                                                                    print "<option value='".$array['id']."'>".$array['nome']."</option>";
                                                             }
                                                    }

                                                    ?>
        </select>
      </div>
    </div>

这是脚本。把这个放在头标签里面

 <script>
    function check(box)
    {
    if(box.checked==true)
    {
    var xmlhttp;
    if (window.XMLHttpRequest)
      {// code for IE7+, Firefox, Chrome, Opera, Safari
      xmlhttp=new XMLHttpRequest();
      }
    else
      {// code for IE6, IE5
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
    xmlhttp.onreadystatechange=function()
      {
      if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
       alert("success");
        }
      }
    xmlhttp.open("GET","index.php?filter="+box.value,true);
// change index.php to your pagename and filter is the parameter you should get in your server side.
    xmlhttp.send();
    }
    }
    </script>