每当我点击 cakephp 时如何使用 ajax 更改状态

Question

当我点击它们时，我还想更改我的状态消息。这是我要应用的图像

如图所示，当我点击它时，活动状态需要变为非活动状态。我可以用编辑页面来做到这一点，但现在我想在点击页面加载时更改状态。这是我的代码 ctp 文件

<td class="center">
        <?php if($listings['status']=="1") { ?>
            <span class="label label-success">Active</span>
            <?php } else if($listings['status']=="0")   {?>

            <span class="label label-error">Inactive</span>

            <?php } ?>
        </td>

这是控制器代码

if ((!empty($this->request->data['action'])) && (!empty($this->request->data['ids'])))
    {
          $action=$this->request->data['action'];
          $ids=$this->request->data['ids'];
            switch($action)
            {
                case "active":
                $this->request->data['status']="1";
                foreach($ids as $id)
                {

                    $this->Listing->id = $id;
                    $this->Listing->save($this->request->data);
                }
                $this->Session->setFlash(__('Active Successfully'),'default',array('class' => 'alert alert-success'), 'alert');
                $this->redirect(array('controller'=>'Listing','action' => 'index'));
                break;
                case "inactive":
                $this->request->data['status']="0";
                foreach($ids as $id)
                {

                    $this->Listing->id = $id;
                    $this->Listing->save($this->request->data);
                }
                $this->Session->setFlash(__('InActive Successfully!'),'default',array('class' => 'alert alert-success'), 'alert');
                $this->redirect(array('controller'=>'Listing','action' => 'index'));

                break;

请帮助我并告诉我如何使用 ajax 或 jquery 来做到这一点。

Answer 1

试试这个：

HTML: <button type="button" class="active" data-id="2">Active/button>

//Note that data-id ...It's just an attribute I created, and the value "2" I //believe will be dynamic in your case -Probably that college ID in the DB

JAVASCRIPT（需要 Jquery）

<script>
  $(document).on('click', 'button[data-id]', function(event) {
    event.preventDefault();
    var collegeID = $(this).attr('data-id');

    $.ajax({
        url: 'changeStatus',
        type: 'POST',
        dataType: 'json',
        data: {id: collegeID},
        success: function(data){
            if (data['status'] == "success") {
                $('button[data-id]').removeClass('active').addClass('inactive');
                /*Class active and inactive should be in your CSS with color according to their names*/
            };
        }
    });

});
</script>

控制器：

public function changeStatus(){
    $this->autoRender = false;
    if ($this->request->is('ajax')) {
        $data = $this->request->data;

        /*The id that was passed thru data-id attribute is here: */
        //$data['id'] Use it to update your DB


        //After successful update
        $response = array('status' => 'success');
        return json_encode($response);
    }
}

最后但并非最不重要的是，您的路线：

Router::connect('/changeStatus', array('controller' => 'yourcontroller', 'action' => 'changeStatus'));

希望有所帮助。 祝你好运

Answer 2

其实你可以这么简单：

$("body").on("click", "#status", function(e) {
  e.preventDefault();
  var stat = find("span#span_id").val(); // get the status current value

  $.get('./db_file', function(data) {
    if (data.stat != stat)
      $("#span_id").removeClass("label label-error").addClass("label label-success");
  }, "json");
});

类似的东西会起作用。