CodeIgniter 和 AJAX 表单提交答案

【问题标题】：CodeIgniter and AJAX form submitCodeIgniter 和 AJAX 表单提交
【发布时间】：2013-07-08 11:43:16
【问题描述】：

我正在尝试将从表单提交的数据保存到我的 mysql 数据库中，然后更新 div 元素，并将最后发布的项目附加到 div 中的列表中。

现在我只是想得到回复，我现在并不担心格式是否正确。

我的问题是表单不会在e.preventDefault(); 就位的情况下提交，但是没有它，表单会按照正常的方法发布到数据库然后刷新页面。

这是我的 AJAX 调用：

$(document).ready(function() {

    $('form#feedInput').submit(function(e) {

        e.preventDefault();

        $.ajax({
            type: "POST",
            url: "<?php echo site_url('dashboard/post_feed_item'); ?>",
            data: $('.feed-input').val(),
            dataType: "html",
            success: function(data){
                debugger;
                $('#feed-container').prepend(data);
            },
            error: function() { alert("Error posting feed."); }
       });

    });
});

我认为没有必要发布我的控制器代码，因为我的问题是表单无法通过 e.preventDefault(); 函数。

如果e.preventDefault() 函数在到达$.ajax() 函数之前将其停止，我怎样才能让此表单通过 AJAX 提交？

【问题讨论】：

控制台报错？
它并没有阻止它阻止你的站点状态，在firebug控制台中检查你的代码，这个调试器是什么；
控制台中没有任何记录

标签： php javascript mysql ajax codeigniter

【解决方案1】：

ajax 调用的data 属性无效。它应该是 JSON 格式 { key: $('.feed-input').val() } 或查询格式 'key='+$('.feed-input').val()。在success方法中还有一个不必要的debugger变量。

工作代码可能是：

$('form#feedInput').submit(function(e) {

    var form = $(this);

    e.preventDefault();

    $.ajax({
        type: "POST",
        url: "<?php echo site_url('dashboard/post_feed_item'); ?>",
        data: form.serialize(), // <--- THIS IS THE CHANGE
        dataType: "html",
        success: function(data){
            $('#feed-container').prepend(data);
        },
        error: function() { alert("Error posting feed."); }
   });

});

【讨论】：

好的，现在它已提交到数据库，但没有使用响应更新 div...
检查返回的内容。 console.log(data) 或 alert(data)
我什么也没得到。警报窗口为空白。这是否意味着错误在我的 php 中？
太棒了。非常感谢。我可以从这里拿走。我只是不太擅长 javascript。

【解决方案2】：

视图中的 HTML 部分

<form id="comment" method="post">
    <h2>Enter Your Details</h2>
    <center><div id="result"></div></center>

    <div class="form_fld">
        <label>Name</label>
        <input type="text" placeholder="Enter Your Full Name" name="name" required=""> 
    </div>
    <div class="form_fld">
        <label>Email ID</label>
        <input type="text" placeholder="Enter Email ID" name="email" required="">
    </div>
    <div class="form_fld">
        <label>Contact Number</label>
        <input type="text" placeholder="Enter Contact Number" name="contact" required="">
    </div>
    <div class="form_fld">
        <label>Developer</label>
        <select name="developer">
            <option>Lotus</option>
            <option>Ekta</option>
            <option>Proviso</option>
            <option>Dosti</option>
            <option>All</option>
        </select>
    </div>
    <div class="form_fld">
        <button type="submit" id="send">Submit</button>
    </div>
</form>

Html部分后放ajax请求

<script type="text/javascript" src="<?php echo base_url('assets/'); ?>js/jquery.js"></script>
<script>
$(function(){
    $("#comment").submit(function(){
        dataString = $("#comment").serialize();

        $.ajax({
            type: "POST",
            url: "home/contact",
            data: dataString,
            success: function(data){
                // alert('Successful!');
                $("#result").html('Successfully updated record!'); 
                $("#result").addClass("alert alert-success");
            }

        });

        return false;  //stop the actual form post !important!

    });
});
</script>

在控制器内

public function contact()
{
    $ip = $_SERVER['REMOTE_ADDR'];
    $data = array('name' => $this->input->post('name'),
                  'email' => $this->input->post('email'),
                  'number' => $this->input->post('contact'),
                  'developer' => $this->input->post('developer'),
                  'ip' => $ip,
                  'date' =>  date("d/m/Y"));
    $result = $this->User_model->contact($data);
    print_r($result);
}

【讨论】：

【解决方案3】：

您不必使用preventDefault();，您可以在函数submit() 的末尾使用return false;，但我怀疑这是问题所在。

您还应该在 $('.feed-input').val() 上使用 url 编码，为此使用 encodeURIComponent。

您还应该检查控制台中是否有错误。

要确定是否阻止默认操作，您可以使用e.isDefaultPrevented()。在这种情况下，默认操作是指使用 id feedInput 提交表单的操作。

您没有在数据中命名您的参数。检查jquery ajax examples。

【讨论】：

【解决方案4】：

您可能会收到一个错误 e.preventDefault(); 没有停止 ajax。

$.ajax({
    type: "POST",
    url: "<?php echo site_url('dashboard/post_feed_item'); ?>",
    data: $("#form").serializeArray(),
    success: function(resp){
        $('#container').html(resp);
    },
    error: function(resp) { alert(JSON.stringify(resp)); }
});

【讨论】：