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

Question

我试图在没有页面刷新的情况下使用 ajax jQuery 在 codeigniter 框架中提交表单数据，但它总是传递fail消息。

我是 ajax 的新手，请帮我解决这个错误。

这是我的控制器：

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

这是我的观点：

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

这是js代码：-

$(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');
             }
            });
      });
  });

获取值的模型：

    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

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

在表单中（添加id属性）

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

在控制器中

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

在模型中

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

在config/autoload.php

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

Answer 2

尝试这个 ：

看法

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

只需尝试添加上述jquery脚本。并尝试在模型或控制器中回显您的结果，以便您可以确保控制器和模型上没有错误，以及返回结果是否有任何json问题？

在控制器中

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