尝试在codeigniter中使用ajax提交表单

Posted

技术标签:

【中文标题】尝试在codeigniter中使用ajax提交表单【英文标题】:Trying to submit form using ajax in codeigniter 【发布时间】:2021-04-04 20:16:20 【问题描述】:

我正在尝试使用 ajax 提交表单,但它总是出错并且数据没有提交到数据库中。 请看一下我的代码。我对此进行了搜索,但没有得到任何解决方案,实际上我是 Codeigniter 的新手,对此并没有太多了解。我非常感谢有人帮我解决这个错误谢谢。

jQuery / AJAX 代码:

 <script>


    $(document).ready(function()
        $("#personal-info").submit(function(e)
            e.preventDefault();
            var fname = $("#fname").val();;
            var email_address= $("#email_address").val();
            var comment= $("#comment").val();
            $.ajax(
                type: "POST",
                url: '<?= site_url('Book/contact')?>',
                data: fname:fname,email_address:email_address,comment:comment,
                success:function(data)
                
                     Swal.fire(
                  position: 'top-end',
                  icon: 'success',
                  title: 'Message send successfuly',
                  showConfirmButton: false,
                  timer: 1500
                );
                ,
                error:function()
                
                    Swal.fire(
                  position: 'top-end',
                  icon: 'error',
                  title: 'Message Sending Fale Please try again',
                  showConfirmButton: false,
                  timer: 1500
                );
                
            );
        );
    );
</script>

查看:

<div class="row">
                    <div class="col-lg-5 offset-lg-6 col-md-12">
                        <div class="section-title v2">
                            <h2>Write to us</h2>
                        </div>
                        <form id="personal-info" action="" method="post">
                            <div class="form-control-wrap">
                                <div id="message" class="alert alert-danger alert-dismissible fade"></div>
                                <div class="form-group">
                                    <input type="text" class="form-control" id="fname" placeholder="Name*" name="fname" required>
                                </div>
                                <div class="form-group">
                                    <input type="email" class="form-control" id="email_address" placeholder="email*" name="email" required>
                                </div>
                                <div class="form-group">
                                    <textarea class="form-control" rows="8" name="comment" id="comment" placeholder="Your Message" required></textarea>
                                </div>
                                <div class="form-group">
                                    <button type="submit" id="send_form" class="btn v7">Send Message</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>

控制器:

 public function contact()
    
         $data = array(
            'name' => $this->input->post('fname'),
            'emall' => $this->input->post('email'),
            'message' => $this->input->post('message'),
          
        );
          $this->db->insert('contact',$data);
           echo json_encode($data);
    

【问题讨论】:

你能正确获取控制器中fnameemail_addresscomment的js值吗? 我不认为这就是发生此错误的原因。 【参考方案1】:

jQuery / AJAX 代码:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script type="text/javascript">

 $(document).ready(function()
        $("form#personal-info").submit(function(e)
            e.preventDefault();
            var fname = $("#fname").val();
            var email_address= $("#email_address").val();
            var comment= $("#comment").val();
            $.ajax(
                type: "POST",
                url: "<?php echo site_url('Book/contact')?>",   // Add echo.
                dataType : "JSON",
                data: fname:fname,email_address:email_address,comment:comment,
                success:function(data)
                
                     Swal.fire(
                  position: 'top-end',
                  icon: 'success',
                  title: 'Message send successfuly',
                  showConfirmButton: false,
                  timer: 1500
                );
                ,
                error:function()
                
                    Swal.fire(
                  position: 'top-end',
                  icon: 'error',
                  title: 'Message Sending Fale Please try again',
                  showConfirmButton: false,
                  timer: 1500
                );
                
            );
        );
    );
</script>

控制器:

public function contact()
    
         $data = array(
            'name' => $this->input->post('fname'),
            'emall' => $this->input->post('email'),
            'message' => $this->input->post('message'),
          
        );
         $insertData = $this->db->insert('contact',$data);
           echo json_encode($insertData);
    

【讨论】:

【参考方案2】:

您的 ajax 调用数据 email_address 与 php 的 $this-&gt;input-&gt;post('email') 不匹配。 您的 url 查询正在像 ...&amp;email_address=USER_INPUT 一样建立起来,它在接收端不匹配,即:...-&gt;post('email') 它应该是 ..-&gt;post('email_address') 并且 comment 字段作为 comment 发送,但作为 @987654328 接收@ 这也是不正确的。

【讨论】:

那么我该如何改变这个你能解释一下【参考方案3】:

这应该可以工作

 public function contact()

     $data = array(
        'name' => $this->input->post('fname'),
        'emall' => $this->input->post('email_address'),
        'message' => $this->input->post('comment'),
      
    );
      $this->db->insert('contact',$data);
       echo json_encode($data);

【讨论】:

以上是关于尝试在codeigniter中使用ajax提交表单的主要内容,如果未能解决你的问题,请参考以下文章

无法在 codeigniter 中提交数据

如何在codeigniter中使用ajax在mysql数据库中插入数据?

CodeIgniter:提交无效表单后如何保留值?

表单验证在使用 ajax 方法提交之前不起作用

bootstrap codeigniter 表单输入和提交按钮

CodeIgniter - AJAX 注册表单验证