如何在codeigniter中使用ajax從數據插入？

Question

控制器：test.php

public function signin()
{
    if($this->input->post('insert'))
    {
        $name = trim($this->input->post('name'));
        $email = trim($this->input->post('email'));
        $phone = trim($this->input->post('phone'));
        $message = trim($this->input->post('message'));
        $s_data = date('Y-m-d');

        $data = array(
                    'name' => $name,
                    'email' => $email,
                    'phone' => $phone,
                    'message' => $message,
                    's_date' => $s_date
                    ); 

        $recaptchaResponse = trim($this->input->post('g-recaptcha-response'));
        $userIp=$this->input->ip_address();
        $secret='****************************';
        $url="https://www.google.com/recaptcha/api/siteverify?secret=".$secret."&response;=".$recaptchaResponse."&remoteip;=".$userIp;
        $response = $this->curl->simple_get($url);
        $status= json_decode($response, true);

        $this->db->insert('contact',$data);
        if($status['success'])
        {     
            $this->session->set_flashdata('flashSuccess', 'successfull');
        }
        else
        {
            $this->session->set_flashdata('flashSuccess', 'Sorry Google Recaptcha Unsuccessful!!');
        }
    }
}

阿賈克斯代碼：

<script>
    $(document).ready(function(){
        $("#insert").click(function(){
            var name = $("#name").val();
            var email = $("#email").val();
            var phone = $("#phone").val();
            var message = $("#message").val();
            var dataString = 'name='+ name + '&email='+ email + '&phone='+ phone + '&message='+ message;
            if(name==''||email==''||phone==''||message=='')
            {
                alert("Please Fill All Fields");
            }
            else
            {
                // AJAX Code To Submit Form.
                $.ajax({
                    type: "POST",
                    url: "<?php echo base_url('index.php/'); ?>test/signin",
                    data: dataString,
                    cache: false,
                    success: function(result){
                        alert(result);
                    }
                });
            }
            return false;
        });
    });
</script>

Bootstrap 模態視圖代碼：-

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                 <h4 class="modal-title" id="myModalLabel">header</h4>
            </div>
            <div class="modal-body">
                <div class="error"><strong><?=$this->session->flashdata('flashSuccess')?></strong></div>
                <form method="post" enctype="multipart/form-data" id="form1">
                    <input type="text" class="form-control1" id="name" name="name" placeholder="Enter Your Name">
                
                    <input type="text" class="form-control1" id="email" name="email" placeholder="Enter Your Email Id">
            
                    <input type="text" class="form-control1" id="phone" name="phone" placeholder="Enter Your Phone">
            
                    <textarea class="form-control1" name="message" id="message"  placeholder="Enter Your Message"></textarea>

                    <div class="g-recaptcha" data-sitekey="****************************"></div>                   
                    </br>
                    <input type="submit" name="insert" id="insert" value="Submit">
                </form>
                
            </div>
            <div class="modal-footer" style="background: #2874f0;padding: 25px;">
                <p>footer</p>
            </div>
        </div>
    </div>
</div>

在這段代碼中，我創建了一個bootstrap modal ，它在頁面加載時打開，在模態體內部我使用 Google recaptch 創建了一個簡單的查詢。 現在，我想在將值插入數據庫后使用 ajax 插入表單數據而不加載頁面，它顯示成功消息。

那么，我該怎么做？請幫幫我。

謝謝

Answer 1

步驟 1) 在 test.php 加載數據庫

public function __construct()
{
    parent::__construct();
    $this->load->database();
}

步驟2）修改

$this->db->insert('contact',$data);
  if($status['success'])
  {
    // code
  }

到

if($this->db->insert('contact',$data))
{
  //rest of code
}

它應該工作

Answer 2

控制器變更

注意：請閱讀注釋行以獲得更好的理解

public function signin()
{
    if($this->input->post('insert'))
    {
        $name = trim($this->input->post('name'));
        $email = trim($this->input->post('email'));
        $phone = trim($this->input->post('phone'));
        $message = trim($this->input->post('message'));
        $s_data = date('Y-m-d');

        $data = array(
                    'name' => $name,
                    'email' => $email,
                    'phone' => $phone,
                    'message' => $message,
                    's_date' => $s_date
                    ); 

        $recaptchaResponse = trim($this->input->post('g-recaptcha-response'));
        $userIp=$this->input->ip_address();
        $secret='****************************';
        $url="https://www.google.com/recaptcha/api/siteverify?secret=".$secret."&response;=".$recaptchaResponse."&remoteip;=".$userIp;
        $response = $this->curl->simple_get($url);
        $status= json_decode($response, true);


        if($status['success'])
        {  
          //insert data when get success in google recaptcha
          $this->db->insert('contact',$data);   
          $res['msg']="successfull";
          //no need to set flash session in CI for ajax
            //$this->session->set_flashdata('flashSuccess', 'successfull');
        }
        else
        {
            //$this->session->set_flashdata('flashSuccess', 'Sorry Google Recaptcha Unsuccessful!!');
            $res['msg']="Sorry Google Recaptcha Unsuccessful!!";
        }
        //set page header as json format
        $this->output
        ->set_content_type('application/json')
        ->set_output(json_encode($res));
    }
}

改變你的腳本

<script>
    $(document).ready(function(){
        $("#insert").click(function(){
            var name = $("#name").val();
            var email = $("#email").val();
            var phone = $("#phone").val();
            var message = $("#message").val();
            //pass object in post
            var dataString = {'name': name , 'email': email , 'phone': phone , 'message': message};
            if(name==''||email==''||phone==''||message=='')
            {
                alert("Please Fill All Fields");
            }
            else
            {
                // AJAX Code To Submit Form.
                $.ajax({
                    type: "POST",
                    url: "<?php echo base_url('index.php/'); ?>test/signin",
                    data: dataString,
                    dataType: 'json',
                    cache: false,
                    success: function(result){
                        alert(result.msg);
                    }
                });
            }
            return false;
        });
    });
</script>

謝謝