无需刷新页面如何使用 ajax/jQuery 显示数据库中的值答案

【问题标题】：Without refresh the page how to display the values from database using ajax/jQuery无需刷新页面如何使用 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>

【问题讨论】：

stackoverflow.com/questions/44305553/… 你们两个在做同一件事吗？最好在同一问题上保留一个问题。并且请您的朋友接受另一个答案，因为它解决了原来的问题。无论如何，您没有正确描述这一点。你的代码出了什么问题？它在什么时候失败？你有什么错误，如果有的话？什么行为是错误的？
P.S.为什么，在 ajax 中，当您可以序列化整个表单时，您要手动从表单字段中提取值？ data: $(this).serialize() 应该可以代替所有那些重复的变量声明。 api.jquery.com/serialize
在将值插入数据库同时从数据库中获取值而不刷新页面值后应显示在表单中。
表单代码我也只添加了一次参考并建议我
让我们continue this discussion in chat。

标签： php jquery html ajax codeigniter

【解决方案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);
    }
}
?>

欢迎提问

【讨论】：