不刷新页面如何使用ajax / jQuery显示数据库中的值 [英] Without refresh the page how to display the values from database using ajax/jQuery
本文介绍了不刷新页面如何使用ajax / jQuery显示数据库中的值的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
在通过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}，
成功：函数（数据）
{
alert（'SUCCESS !!'）;
}，
错误：function（）
{
alert （'失败'）;
}
}）;
}）;
}）;
< / 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-> （'suppid'），
'product_id'=> $ this-> input-> post（'proid'），
'Customer_id'=> $ this- >输入 - >后（'custid'），
'From'=> $ result3，
）;
$ this-> Profile_model-> buyer_insert（$ data4）;
重定向（'welcome / buyermessageview？id ='。$ product_id）;
型号：
函数buyer_insert（$ data4）{
$ this-> db-> insert（'communication'，$ data4）;
return（$ this-> db-> affected_rows（）！= 1）？假：真;
表格：
< form class =form-horizontalmethod =POSTid =personal-inforole =formaction =＃>
< div class =panel-footer>
< div class =input-group>
< input type =hiddenname =suppidid =suppidvalue =<？php echo $ row-> supplier_id;？> class =form-control/>
< input type =hiddenname =proidid =proidvalue =<？php echo $ row-> product_id;？> class =form-control/>
< input type =hiddenname =custidid =custidvalue =<？php echo $ row-> Customer_id;？> class =form-control/>
< span class =input-group-btn>
< button class =btn btn-primary btn-smid =submit-pname =submit-p>发送< / button>
<！ - < input type =submitname =submit-pid =submit-pvalue =sendclass =btn btn-primary btn-sm> - - >
< / span>
< / div>
< / div>
< / form>
解决方案
@Maruthi Prasad这里是代码.. [IN
使用jquery脚本的HTML视图代码
views \profile_view.php
<！DOCTYPE html>
< html lang =en>
< head>
< title>引导程序示例< / title>
< meta charset =utf-8>
< meta name =viewportcontent =width = device-width，initial-scale = 1>
< link rel =stylesheethref =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 =postid =personal-info>
< button type =submitclass =btn btn-primary btn-smid =submit-pname =submit-p>发送< / button>
< / form>
< / div>
< / div>
< / div>
< script>
$（document）.ready（function（）{
loaddata（）;
data_submit（）;
}）;
函数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）;
}
}）;
$ b $ 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>
控制器代码：
controllers\Profile_cntrl.php
<？php
defined（'BASEPATH'）or exit（'No direct script access allowed'）;
header（'Access-Control-Allow-Origin：*'）;
class Profile_cntrl扩展了CI_Controller {
函数__construct（）{
parent :: __ construct（）;
$ this-> load-> model（'profile_model'）;
$ this-> load-> helper（array（'url'，'html'，'form'））;
$ b 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（'消息'）
）;
$ 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 =无法插入数据;
$ reponse = array（
'Status'=>'false'，
'report'=> $ op
）;
echo json_encode（$ reponse）;
}
}
}
？>
型号代码：
models\Profile_model.php
<？php
defined（'BASEPATH'）or exit（'No direct script access allowed'）;
$ b $ class Profile_model extends CI_model {
public function buyer_communication（）{
$ sql = $ this-> db-> get（'communication'）;
$ sql = $ sql-> result_array（）;
返回$ sql;
公共函数buyer_insert（$ arr）{
return $ query = $ this-> db-> insert（'communication'，$ arr）;
}
}
？>
随意提问
After inserting data into the database through jQuery/ajax, while fetching values from database without refresh the page how to display the database values using codeigniter?
This is my code:
Script:
<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>
Controller:
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);
}
Model:
function buyer_insert($data4) {
$this->db->insert('communication', $data4);
return ($this->db->affected_rows() != 1) ? false : true;
}
Form:
<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>
解决方案
@Maruthi Prasad here is the code.. [IN CODE IGNITER]
HTML view code with jquery script views\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>
CONTROLLER CODE: controllers\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);
}
}
}
?>
Model code: models\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);
}
}
?>
Feel free to ask questions
这篇关于不刷新页面如何使用ajax / jQuery显示数据库中的值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
