无需刷新页面如何使用 ajax/jQuery 显示数据库中的值
Posted
技术标签:
【中文标题】无需刷新页面如何使用 ajax/jQuery 显示数据库中的值【英文标题】：Without refresh the page how to display the values from database using ajax/jQuery 【发布时间】：2017-11-02 16:31:48 【问题描述】：通过jQuery/ajax将数据插入数据库后，在不刷新页面的情况下从数据库中获取值如何使用codeigniter显示数据库值？
这是我的代码：
脚本：
<script>
$(document).ready(function()
$("#personal-info").submit(function(e)
e.preventDefault();
var suppid = $("#suppid").val();
var proid = $("#proid").val();
var custid = $("#custid").val();
var message = $("#message").val();
$.ajax(
type: "POST",
url: "<?php echo base_url(); ?>index.php/Profile_cntrl/buyer_communication",
data: suppid:suppid,proid:proid,custid:custid,message:message,
success:function(data)
alert('SUCCESS!!');
,
error:function()
alert('fail');
);
);
);
</script>
控制器：
public function buyer_communication()
$result1 = $this->Profile_model->fetch_Data($product_id);
$Userid = $this->session->userdata('id');
$result3 = $this->session->userdata('tt');
$data4 = array(
'message' => $this->input->post('message'),
'supplier_id' => $this->input->post('suppid'),
'product_id' => $this->input->post('proid'),
'Customer_id' => $this->input->post('custid'),
'From' => $result3,
);
$this->Profile_model->buyer_insert($data4);
redirect('welcome/buyermessageview?id=' . $product_id);
型号：
function buyer_insert($data4)
$this->db->insert('communication', $data4);
return ($this->db->affected_rows() != 1) ? false : true;
表格：
<form class="form-horizontal" method="POST" id="personal-info" role="form" action="#">
<div class="panel-footer">
<div class="input-group">
<input type ="hidden" name="suppid" id="suppid" value="<?php echo $row->supplier_id; ?>" class="form-control" />
<input type ="hidden" name="proid" id="proid" value="<?php echo $row->product_id; ?>" class="form-control" />
<input type ="hidden" name="custid" id="custid" value="<?php echo $row->Customer_id; ?>" class="form-control" />
<input id="message" name="message" type="text" class="form-control input-sm chat_input" placeholder="Write your message here..." />
<span class="input-group-btn">
<button class="btn btn-primary btn-sm" id="submit-p" name="submit-p">Send</button>
<!--<input type="submit" name="submit-p" id="submit-p" value="send" class="btn btn-primary btn-sm" >-->
</span>
</div>
</div>
</form>
【问题讨论】：
***.com/questions/44305553/… 你们两个在做同一件事吗？最好在同一问题上保留一个问题。并且请您的朋友接受另一个答案，因为它解决了原来的问题。无论如何，您没有正确描述这一点。你的代码出了什么问题？它在什么时候失败？你有什么错误，如果有的话？什么行为是错误的？ P.S.为什么，在 ajax 中，当您可以序列化整个表单时，您要手动从表单字段中提取值？data: $(this).serialize() 应该可以代替所有那些重复的变量声明。 api.jquery.com/serialize
在将值插入数据库同时从数据库中获取值而不刷新页面值后应显示在表单中。
表单代码我也只添加了一次参考并建议我
让我们continue this discussion in chat。
【参考方案1】：
@Maruthi Prasad 这是代码.. [IN CODE IGNITER]
带有 jquery 脚本的 html 视图代码 视图\profile_view.php
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6">
<div id="load_data">
</div>
<form method="post" id="personal-info">
<input id="message" name="message" type="text" class="form-control input-sm chat_input" placeholder="Write your message here..." />
<button type="submit" class="btn btn-primary btn-sm" id="submit-p" name="submit-p">Send</button>
</form>
</div>
</div>
</div>
<script>
$(document).ready(function()
loaddata();
data_submit();
);
function loaddata()
$.getJSON('<?php echo base_url();?>'+'index.php/Profile_cntrl/get_data',function(data)
for(var i in data)
var show = '<div>';
show += '<h5 style="background:#ccc;padding:10px;border-radius:10px;">'+data[i].message+'</h5>';
show += '</div>';
$("#load_data").append(show);
);
function data_submit()
$("#personal-info").submit(function(e)
e.preventDefault();
var formdata = $(this).serialize();
$.ajax(
type:'POST',
url:'<?php echo base_url();?>'+'index.php/Profile_cntrl/insert_data',
data:formdata,
success:function(data)
var res = JSON.parse(data);
if(res.Status == 'true')
//console.log(res.report);
$("#load_data").empty();
loaddata()
else
alert(res.report);
);
);
</script>
</body>
</html>
控制器代码： 控制器\Profile_cntrl.php
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
header('Access-Control-Allow-Origin: *');
class Profile_cntrl extends CI_Controller
function __construct()
parent::__construct();
$this->load->model('profile_model');
$this->load->helper(array('url','html','form'));
public function index()
$this->load->view('profile_view');
public function get_data()
$query = $this->profile_model->buyer_communication();
echo json_encode($query);
public function insert_data()
$arr = array(
'message'=>$this->input->post('message')
);
$sql = $this->profile_model->buyer_insert($arr);
$op = "data insert id :".$this->db->insert_id();
if($sql == true)
$reponse = array(
'Status'=>'true',
'report'=>$op
);
echo json_encode($reponse);
else
$op = "Failed to insert data";
$reponse = array(
'Status'=>'false',
'report'=>$op
);
echo json_encode($reponse);
?>
型号代码： 模型\Profile_model.php
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class Profile_model extends CI_model
public function buyer_communication()
$sql = $this->db->get('communication');
$sql = $sql->result_array();
return $sql;
public function buyer_insert($arr)
return $query = $this->db->insert('communication',$arr);
?>
欢迎提问
【讨论】：
以上是关于无需刷新页面如何使用 ajax/jQuery 显示数据库中的值的主要内容，如果未能解决你的问题，请参考以下文章
如何使用 Django、Ajax、jQuery 在不刷新页面的情况下提交表单？
登录表单电子邮件 ID 将使用 ajax 成功功能以密码重置表单显示，无需刷新页面