使用 ajax javascript 显示数据库中的数据

Question

我想在弹出窗口中创建表单，然后在同一个弹出窗口中显示结果。数据已插入，但插入后，弹出窗口已关闭。

我想要的是单击表单submit数据插入数据库以及结果数据显示在同一弹出页面中之后。

这是视图页面

<script type="text/javascript">
$('a[href="#myModal"]').on('click',function(){
var category= $(this).attr('data-value');
$('input[name="category"]').val(category);
//Save Data
$('#add_btn').on('click',function(){
var product_name=$('#product_name').val();
var price=$('#price').val();
var category=$('#category').val();
$.ajax({
type : "POST",
url  : "<?php echo admin_url(). 'product/add_product'; ?>",
data : {product_name:product_name, price:price, category:category},
success : function(data){
var data = JSON.parse(data);
var html = '';
var i;
for(i=0; i<data.length; i++){
html += '<tr>'+
'<td>'+data[i].product_name+'</td>'+
'<td>'+data[i].price+'</td>'+
'</tr>';
}
$('#show_product').html(html);
}
})
});
});
</script>
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h4 class="modal-title">Category Product</h4>
</div>
<div class="modal-body">
<form method="post" id="task-form">
<table class="table">
<tbody>
<tr>
<td><label for="product_name">Product Name</label></td>
<td></td>
<td><input type="text" class="form-control" name="product_name" id="product_name"></td>
</tr>
<tr>
<td><label for="price">Price</label></td>
<td></td>
<td><input type="text" class="form-control" name="price" id="price"></td>
</tr>
<tr>
<input type="hidden" id="category" name="category" value="">
</tr>
<tr>
<td></td>
<td></td>
<td><button type="submit" class="btn-primary" value="Submit" id="add_btn">Add Product</button></td>
</tr>
</tbody>
</table>
</form>
<table class="table">
<thead>
<tr>
<th>Product Name</th>
<th>Price</th>
</tr>
</thead>
<tbody id="show_product">
</tbody>
</table>
</div>
</div>
</div>

这是控制器

public function add_product()
{
$product_name= $this->input->post('layanan');
$price = $this->input->post('kapasitas');
$category = $this->input->post('jenis');
$data2 = array(
'product_name' => $product_name,
'price' => $price,
'category' => $category
);
$this->product_model->input_product($data, db_prefix() . 'product');
$data=$this->product_model->list_product($category);
echo json_encode($data);
}

这是我的模型

public function input_product($data2,$table)
{
$this->db->insert($table,$data2);
}
public function list_product($category){
$abc=$this->db->query("SELECT * FROM tblcategory WHERE category='$category'");
if($abc->num_rows()>0){
foreach ($hsl->result() as $data) {
$desc[]=array(
'product_name'           => $data->product_name,
'price'                  => $data->price,
);
}
}
return $desc;
}

谢谢

Answer 1

100% [ 已解决 ]

这是视图页面

<script type="text/javascript">
$('a[href="#myModal"]').on('click',function(){
var category= $(this).attr('data-value');
$('input[name="category"]').val(category);
//Save Data
$('#add_btn').on('click',function(){
var product_name=$('#product_name').val();
var price=$('#price').val();
var category=$('#category').val();
$.ajax({
type : "POST",
url  : "<?php echo admin_url(). 'product/add_product'; ?>",
data : {product_name:product_name, price:price, category:category},
success : function(data){
var data = JSON.parse(data);
var html = '';
var i;
for(i=0; i<data.length; i++){
html += '<tr>'+
'<td>'+data[i].product_name+'</td>'+
'<td>'+data[i].price+'</td>'+
'</tr>';
}
$('#show_product').html(html);
}
})
});
});
</script>
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h4 class="modal-title">Category Product</h4>
</div>
<div class="modal-body">
<form method="post" id="task-form">
<table class="table">
<tbody>
<tr>
<td><label for="product_name">Product Name</label></td>
<td></td>
<td><input type="text" class="form-control" name="product_name" id="product_name"></td>
</tr>
<tr>
<td><label for="price">Price</label></td>
<td></td>
<td><input type="text" class="form-control" name="price" id="price"></td>
</tr>
<tr>
<input type="hidden" id="category" name="category" value="">
</tr>
<tr>
<td></td>
<td></td>
<td><button type="button" class="btn-primary" value="Submit" id="add_btn">Add Product</button></td>
</tr>
</tbody>
</table>
</form>
</div>
<table class="table">
<thead>
<tr>
<th>Product Name</th>
<th>Price</th>
</tr>
</thead>
<tbody id="show_product">
</tbody>
</table>
</div>
</div>

这是控制器

public function add_product()
{
$product_name= $this->input->post('layanan');
$price = $this->input->post('kapasitas');
$category = $this->input->post('jenis');
$data2 = array(
'product_name' => $product_name,
'price' => $price,
'category' => $category
);
$this->product_model->input_product($data, db_prefix() . 'product');
$data=$this->product_model->list_product($category);
echo json_encode($data);
}

这是我的模型

public function input_product($data2,$table)
{
$this->db->insert($table,$data2);
}
public function list_product($category){
$abc=$this->db->query("SELECT * FROM tblcategory WHERE category='$category'");
if($abc->num_rows()>0){
foreach ($hsl->result() as $data) {
$desc[]=array(
'product_name'           => $data->product_name,
'price'                  => $data->price,
);
}
}
return $desc;
}

我希望它运作良好。

谢谢