在Codeigniter中使用AJAX更新列表(在表单中)
在Codeigniter中使用AJAX更新列表(在表单中)
提问于 2015-11-17 15:43:20
我有一个表单，它将客户端添加到数据库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>回答 1
Stack Overflow用户
回答已采纳
发布于 2015-11-17 16:33:39
我没有注意到您请求一个帖子，但是设置了一个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;
});构建html以将其发送回ajax.success我们需要从$_POST (使用输入->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);
}不能保证这将完美地工作-语法错误可能存在。但这个概念是合理的。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/33761081
复制相关文章
相似问题
腾讯云开发者
