Question

我有一个将客户端添加到数据库clients/add_client的表单。 add_client方法的参数为$state，并将其传递给另一个方法list_centers()。当有人与潜在客户交谈时，他们将我们所有的中心放在侧边栏中。在中心列表上方有一个<select>，其中列出了我们拥有中心的州。当他们将select更改为另一个状态时，它应列出该状态中的所有中心。现在，我通过在URL中传递参数来实现这一点：localhost/clients/add_clients/GA列出了格鲁吉亚的所有中心。问题是我想用AJAX做这个，而不是刷新页面。我无法弄清楚如何通过ajax传递这些数据。我知道我每次都必须重建列表，但我被卡住了。这是我尝试过的：

$('#center_select').change(function(){
        var data = $(this).val();
        var url = 'add_client/' + data;
        $.ajax({
            type: 'POST',
            dataType: 'html',
            data: data,
            url: url,
            success: function(data) {
                console.log(data);
            },
            error: function(data) {
                console.log(data);  
            } 
        });
        return false;
    });

以防您需要方法：

public function add_client($state = false) {

        $this->load->model('centers_model');

        $data = array(
            'page_title' => 'Add Client',
            'client_status' => $this->clients_model->list_client_status(),
            'centers' => $this->centers_model->list_centers(null, $state),
            'center_states' => $this->centers_model->list_center_states(),
        );

        $this->load->view('header');
        $this->load->view('clients/add_client', $data);
        $this->load->view('footer');

    }

查看：

<div class="col-sm-3">
            <aside id="centers_sidebar" class="well">
                <h2>List of Centers</h2>
                <select class="form-control" name="center_select" id="center_select">
                    <option value="all">All</option>
                    <?php
                        foreach ($center_states as $center_state) {
                            echo '<option value="' . $center_state->center_state . '">' . $center_state->name . '</option>';
                        }
                    ?>
                </select>
                <ul id="center_list">
                    <?php
                        foreach ($centers as $center) {
                            $output = '<li class="center">';
                            $output .= '<h5>' . $center->center_name . '</h5>';
                            $output .= '<p>' . $center->center_type . '</p>';
                            $output .= '<p>' . $center->center_city . ', ' . $center->center_state . '</p>';
                            $output .= '<p>' . $center->center_phone . '</p>';
                            $output .= '</li>';
                            $output .= '<hr>';

                            echo $output;
                        }
                    ?>
                </ul>   
            </aside>
        </div>

Answer 1

我没注意到你请求POST但是设置了GET。所以我们在这里为ajax.data提供了适当的结构

选择处理程序

  $('#center_select').change(function () {
    var st = $(this).val();
      var url = 'update_centers';
    $.ajax({
      type: 'POST',
      dataType: 'html',
      data: {state: st},
      url: url,
      success: function (data) {
        console.log(data);
        $("#center_list").html(data);
      },
      error: function (jqXHR, textStatus, errorThrown) {
        //useful for trouble shooting & error handling
        console.log(textStatus, errorThrown);
      }
    });
    return false;
  });

AJAX响应方法 - 构建html以发送回ajax.success 我们需要从$ _POST中提取输入（使用input-＆gt; post）我已经进行了一系列有效性检查和通用的ajax错误响应功能。不收取额外费用。

function update_centers()
{
  $this->load->model('centers_model');
  $state = $this->input->post('state');
  if(!isset($state))
  {
    $this->ajax_bad_request_error("No state data received");
    return;
  }

  $centers = $this->centers_model->list_centers(null, $state);
  if(!isset($centers))
  {
    $this->ajax_bad_request_error("The database failed to find centers in $state");
    return;
  }

  $output = "";
  foreach($centers as $center)
  {
    $output .= "<li class='center'><h5>$center->center_name</h5>"
      ."<p>$center->center_type</p>"
      ."<p>$center->center_city, $center->center_state</p>"
      ."<p>$center->center_phone</p></li><hr>";
  }
  echo $output;
}

function ajax_bad_request_error($msg)
{
  //All purpose reporting of ajax failure
  header('HTTP/1.1 400 Bad Request');
  header('Content-Type: application/json; charset=UTF-8');
  $data = array('type' => 'error', 'message' => $msg);
  echo json_encode($data);
}

不能保证这将完美地工作 - 可能存在语法错误。但这个概念是合理的。

在Codeigniter中使用AJAX更新列表（在表单中）

1 个答案: