Codeigniter：使用 jQuery ajax 提交表单数据而不刷新页面

Question

I have tried to submit a form data in codeigniter framework with ajax jQuery without page refreshing but it always pass to fail message.

I'm new to ajax, help me to solve this error.

Here is my Controller:

public function add_personal() {
    $id = $this->uri->segment(3);
    $jid = $this->Jsprofile->get_jsid($id)->jobseeker_id;
    $data = array(
        'js_personal_title' => $this->input->post('js_personal_title'),
        'js_personal_desc' => $this->input->post('js_personal_desc'),
        'tbl_jobseeker_jobseeker_id' => $jid,
        'tbl_jobseeker_tbl_user_u_id'=>$id
        );
   // echo json_encode($data);
    $this->load->database();
    $this->db->insert('tbl_js_personal',$data);  
}

Here is my view:

<form action="" method="POST" id="personal-info" class="form-group">
      <input class="form-control" type="text" name="js_personal_title">
      <input class="form-control" type="text" name="js_personal_desc">
      <input id="submit-p" class="form-control" type="submit" value="Add">
</form>

Here is js code :-

$(document).ready(function(){
    $("#personal-info").submit(function(e){
       e.preventDefault();
          var data= $("#personal-info").serializeArray();
           $.ajax({
              type: "POST",
              url: 'http://localhost/joblk.com/index.php/jobseeker/add_personal',
              data: data,
         success:function(data)  {
           alert('SUCCESS!!');
            },
 error: function (XHR, status, response) {
           alert('fail');
             }
            });
      });
  });

Model for get values:

    public function get_jsid($id) {
 $sql = "SELECT jobseeker_id FROM tbl_jobseeker WHERE tbl_user_u_id = ".$id.";";
            return  $this->db->query($sql)->row();
        }

Answer 1

In AJAX

<script>
    $(document).ready(function(){
        $("#personal-info").submit(function(e){
            e.preventDefault();
            var title = $("#js_personal_title").val();;
            var decs= $("#js_personal_desc").val();
            $.ajax({
                type: "POST",
                url: '<?php echo base_url() ?>index.php/jobseeker/add_personal',
                data: {title:title,decs:decs},
                success:function(data)
                {
                    alert('SUCCESS!!');
                },
                error:function()
                {
                    alert('fail');
                }
            });
        });
    });
</script>

in form (add id attribute)

<form action="" method="POST" id="personal-info" class="form-group">
    <input class="form-control" type="text" id="js_personal_title" name="js_personal_title">
    <input class="form-control" type="text" id="js_personal_desc" name="js_personal_desc">
    <input id="submit-p" class="form-control" type="submit" value="Add">
</form>

In controller

    function add_personal()
    {
        $id = $this->uri->segment(3);
        //im confusing this part
        $jid = $this->Jsprofile->get_jsid($id);

        $data = array(
            'js_personal_title' => $this->input->post('title'),
            'js_personal_desc' => $this->input->post('decs'),
            'tbl_jobseeker_jobseeker_id' => $jid[0]['jobseeker_id'],
            'tbl_jobseeker_tbl_user_u_id'=>$id
        );
        // echo json_encode($data);

        $this->db->insert('tbl_js_personal',$data);
    }

In model

function get_jsid($id)
{

    $query =  $this->db->query("SELECT jobseeker_id FROM tbl_jobseeker WHERE tbl_user_u_id = '$id'");
    $result = $query->result_array();
    return $result;
} 

in config/autoload.php

$autoload['libraries'] = array('database');

Answer 2

Try this :

View

<form action="" method="POST" id="personal-info" class="form-group">
      <input class="form-control"  id="uri_segment_id" type="hidden" value="<?php echo $this->uri->segment(3); ?>">
      <input class="form-control" type="text" name="js_personal_title">
      <input class="form-control" type="text" name="js_personal_desc">
      <input id="submit-p" class="form-control" type="submit" value="Add">
</form> 

JS

$(document).ready(function(){
    $("#personal-info").submit(function(e){
       e.preventDefault();
         var id = $('#uri_segment_id').val(); 
          var data= $("#personal-info").serializeArray();
               $.ajax({
                   type: "POST",
                    url: 'http://localhost/joblk.com/index.php/jobseeker/add_personal/'+id,
                   data: data,
                success:function(data)  {
                               alert('SUCCESS!!');
                },
                error: function (XHR, status, response) {
                                console.log(status+' --- '+' --- ' + response);
                }
            });
      });
  });

Answer 3

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
 <script  src="http://code.jquery.com/jquery-latest.min.js"></script>
 <script type="text/javascript" language="javascript">
      $(document).ready(function(){
        $("#submit-p").click(function(e){
            e.preventDefault();
            var title = $("#js_personal_title").val();;
            var decs= $("#js_personal_desc").val();
            $.ajax({
                type: "POST",
                url: '<?php echo base_url() ?>index.php/jobseeker/add_personal',
                data: {title:title,decs:decs},
                success:function(data)
                {
                    alert('SUCCESS!!');
                },
                error:function()
                {
                    alert('fail');
                }
            });
        });
    });

            </script>

Just try adding the above jquery scripts too.And also try to echo your result in the model or controller so that you can make sure no error on controller and model, and the return result whether any json issues?

in Controller

function add_personal()
    {
        $id = $this->uri->segment(3);
        //im confusing this part
        $jid = $this->Jsprofile->get_jsid($id);

        $data = array(
            'js_personal_title' => $this->input->post('title'),
            'js_personal_desc' => $this->input->post('decs'),
            'tbl_jobseeker_jobseeker_id' => $jid[0]['jobseeker_id'],
            'tbl_jobseeker_tbl_user_u_id'=>$id
        );
        // echo json_encode($data);

        $this->db->insert('tbl_js_personal',$data);
       echo  json_encode($data);
       exit;
    }