Codeigniter: 使用jQuery ajax提交表单数据并无需刷新页面

Question

我尝试通过ajax jQuery在codeigniter框架中提交表单数据，但总是无法避免页面刷新并且出现“失败”信息。

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

以下是JavaScript代码：

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

- Sahan Perera

---

您在ajax url url: 'http://localhost/joblk.com/index.php/jobseeker/add_personal'中没有传递jobseeker_id。 - Abdulla Nilam

@Abdulla，仍然出现错误。 - Sahan Perera

请使用console.log();检查您的错误，以在Firebug控制台或浏览器控制台中找到您的错误或响应。 - Rutunj sheladiya

将 console.log(data); 添加到成功和错误函数中以查看浏览器控制台，并按照Abdulla的建议更改错误函数。 - Sanjuktha

@sa-7 除了失败消息之外，没有任何内容显示。 - Sahan Perera

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

- Abdulla Nilam

---

MySQL列tbl_jobseeker_jobseeker_id的值，我用echo进行了检查。 - Sahan Perera

你检查过模型是否正常工作了吗？因为模型名称应该是 Jsprofile_model。 - Abdulla Nilam

好的，请展示与模型相关的 get_jsid 代码。请在您的问题上进行编辑。 - Abdulla Nilam

控制器和模型已经进行了一些更改，请进行修改。 - Abdulla Nilam

不可能，检查一下传递给 $id 的数据，使用 echo 命令输出并检查。 - Abdulla Nilam

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

- Mohan

---

不，URL 没有改变。 - Sahan Perera

你尝试过这样写吗？$("#submit-p").click(function(e) - Sanjuktha

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

- Sanjuktha

---

如果你找到了错误，请更新一下是什么错误，好奇知道问题出在哪里。 - Sanjuktha