不刷新页面如何使用ajax / jQuery显示数据库中的值

时间:2017-06-01 13:33:19

标签: php jquery html ajax codeigniter

通过jQuery / ajax将数据插入数据库后,从数据库中获取值而不刷新页面如何使用codeigniter显示数据库值?

display form

这是我的代码:

脚本:

 <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>

1 个答案:

答案 0 :(得分:3)

@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);
    }
}
?>

随意提问