时间戳

首页 > 解决方案 > 如何使用 Bootstrap Switch 控件通过 AJAX 向 php 脚本发送值

php - 如何使用 Bootstrap Switch 控件通过 AJAX 向 php 脚本发送值

问题描述

我正在从数据库调用中填充一个表。在每一行的第一列中，我有一个 bootstrap 4 开关，根据记录“is-live”字段是否设置为 1，该开关是否设置为已检查。

我希望用户能够单击开关并将记录设置为实时或不实时，以便无缝地更新数据库和表。 在此处输入图像描述

我知道我需要使用 AJAX 调用来执行此操作，但我无法理解它，因为我对 JQuery/AJAX 真的很陌生。

我的代码已经到此为止，它正在返回成功消息，但我不知道应该如何将输入和行 ID 发送到我的 php 脚本。

发送数据后，我可以编写 php 来更新数据库，但代码看起来好像什么也没做？我也不确定如何在我的 php.ini 结束时将成功/失败返回给 AJAX 脚本。我可以使用 return true 吗？或返回假；将结果发送到 AJAX 脚本？我很确定那是行不通的。

最后脚本在每个表格行中，从性能的角度来看，我认为这很糟糕？？？？

$(document).ready(function(){
  $("#customSwitch<?php echo $voyage->voyage_id; ?>").on('change.bootstrapSwitch', function(e){
    var checkStatus = this.checked ? 1 : 0;
    request = $.ajax({
      type: 'POST',
      url: '<?php echo URLROOT.'/admin/voyages/voyage-admin/updateLive/'; ?>',
      data: checkStatus,
    });
    // Callback handler that will be called on success
     request.done(function (response, textStatus, jqXHR){
         // Log a message to the console
         console.log("Hooray, it worked!");
     });
     // Callback handler that will be called on failure
      request.fail(function (jqXHR, textStatus, errorThrown){
          // Log the error to the console
          console.log(errorThrown);
      });
  });
});

而通过我的控制器/ URL 调用的 PHP 脚本目前就是这样......

public function updateLive() {
  return $_POST;
}

这是表格代码（请原谅过时的脚本代码）：

<table id="trips" class="table table-bordered text-secondary">
  <thead>
    <tr class="bg-msp-lightgrey">
      <th width="5%">
        Active
      </th>
      <th>
        Name
      </th>
      <th>
        Start
      </th>
      <th>
        End
      </th>
      <th>
        Type
      </th>
      <th class="text-center">
        Places
      </th>
    </tr>
  </thead>
  <tbody>
    <?php foreach ($data['voyageData'] as $voyage) : ?>
      <tr>
        <td class="text-center">
          <div class="custom-control custom-switch">
            <input type="checkbox" class="custom-control-input" id="customSwitch<?php echo $voyage->voyage_id; ?>" value="1" <?php echo ($voyage->voyage_live) ? 'checked' : '';?>>
            <label class="custom-control-label" for="customSwitch<?php echo $voyage->voyage_id; ?>"></label>
            <script>
            $(document).ready(function(){
              $("#customSwitch<?php echo $voyage->voyage_id; ?>").on('change.bootstrapSwitch', function(e){
                if($(this).is(':checked'))
                  alert('checked');

                else
                  alert('not checked');

              });
            });
            </script>
          </div>
        </td>
        <td>
          <?php echo $voyage->voyage_name; ?>
        </td>
        <td data-sort="<?php echo date('Y-m-d', strtotime($voyage->voyage_startDate)); ?>">
          <?php echo date('jS M Y', strtotime($voyage->voyage_startDate)); ?>
        </td>
        <td data-sort="<?php echo date('Y-m-d', strtotime($voyage->voyage_endDate)); ?>">
          <?php echo date('jS M Y', strtotime($voyage->voyage_endDate)); ?>
        </td>
        <td>
          <?php echo $voyage->voyagetype_name; ?>
        </td>
        <td class="text-center">
          <?php echo $voyage->voyage_crewBerth; ?> | <?php echo $voyage->voyage_Afterguard; ?>
        </td>
      </tr>
    <?php endforeach; ?>
  </tbody>
</table>

标签： phpjqueryajax

解决方案

因此，经过一些挖掘和大量实验后，我有一个半工作。

我创建了一个表格，每个引导开关名称/id 都等于 foreach 循环中记录的 id。然后我在表格的页脚添加了一个提交按钮，所以从用户体验的角度来看它看起来不错。然后我让我的 AJAX 调用向服务器发送数据，并在我们进行时循环设置每个开/关。

仍然要做的是弄清楚如何进行特色航行。我希望用户能够单击使该旅行成为特色的明星，但应该只有一个特色旅行，因此在单击新旅行时应该取消选择旧旅行...

在此处输入图像描述

下面的代码：

<form class="switch" action="<?php echo URLROOT; ?>/admin/voyages/voyage-admin/updateLive" method="POST">
<table id="trips" class="table table-bordered text-secondary">
  <thead>
    <tr class="bg-msp-lightgrey">
      <th width="5%">
        Active
      </th>
      <th>
        Name
      </th>
      <th>
        Start
      </th>
      <th>
        End
      </th>
      <th>
        Type
      </th>
      <th class="text-center">
        Places
      </th>
    </tr>
  </thead>
  <tbody>
    <?php foreach ($data['voyageData'] as $voyage) : ?>
      <tr>
        <td class="text-center">
            <div class="custom-control custom-switch">
              <input value="1" type="checkbox" class="custom-control-input" name="<?php echo $voyage->voyage_id; ?>" id="<?php echo $voyage->voyage_id; ?>" <?php echo ($voyage->voyage_live) ? 'checked' : '';?>>
              <label class="custom-control-label" for="<?php echo $voyage->voyage_id; ?>"></label>
            </div>
        </td>
        <td>
          <?php echo ($voyage->voyage_featured == 1) ? '<i class="fas fa-star text-msp-orange"></i> ' : '<i class="fas fa-star text-msp-lightgrey"></i> '; echo $voyage->voyage_name; ?>
        </td>
        <td data-sort="<?php echo date('Y-m-d', strtotime($voyage->voyage_startDate)); ?>">
          <?php echo date('jS M Y', strtotime($voyage->voyage_startDate)); ?>
        </td>
        <td data-sort="<?php echo date('Y-m-d', strtotime($voyage->voyage_endDate)); ?>">
          <?php echo date('jS M Y', strtotime($voyage->voyage_endDate)); ?>
        </td>
        <td>
          <?php echo $voyage->voyagetype_name; ?>
        </td>
        <td class="text-center">
          <?php echo $voyage->voyage_crewBerth; ?> | <?php echo $voyage->voyage_Afterguard; ?>
        </td>
      </tr>
    <?php endforeach; ?>
  </tbody>
  <tfoot>
    <tr class="bg-msp-lightgrey">
      <th>
        <button type="submit" class="btn btn-sm btn-msp-orange text-white">UPDATE</button>
      </th>
      <th colspan="5">

      </th>
    </tr>
  </tfoot>
</table>
</form>

JQuery / Ajax 调用脚本是：（我发现我必须先销毁旧的数据表，然后重新初始化它，因为我在更新时遇到了奇怪的行为）

<script>
  $(document).ready(function(){
    $('#trips').DataTable({
       "order": [[ 2, "asc" ]],
    });

    $('form.switch').on('submit', function() {
      var that = $(this),
          url = that.attr('action'),
          type = that.attr('method'),
          data = {};

      that.find('[name]').each(function(index,value) {
        var that = $(this),
            name = that.attr('name'),
            value = $('#'+name).prop('checked')
        data[name] = value;
      });
      $.ajax({
        url: url,
        type: type,
        data: data,
        success: function(response) {
          $('#statusMessage').toast('show');
          $('#trips').dataTable().fnDestroy();
          $('#trips').DataTable({
             "order": [[ 2, "asc" ]],
          });
        }
      });
      return false;
    });

  });
</script>

这是我的服务器端代码：

public function updateLive() {
  if (!$this->permissionModel->checkSettingsPermission(get_class($this), $_SESSION['userGroup']) && $_SESSION['userGroup'] != 1) {
    flash('siteMessage', 'You do not have access to this page', 'bg-danger');
    redirect('register');
  }
  if ($_SERVER['REQUEST_METHOD'] == 'POST') {
    foreach ($_POST as $key => $value) {
      if ($value == 'false') {
        $status = 0;
      } else {
        $status = 1;
      }
      $update = $this->voyageModel->status($key, $status);
    }
  }
}

推荐阅读