CodeIgniter和AJAX表單提交

Question

我正在嘗試將從表單提交的數據保存到我的mysql數據庫中，然后更新div元素，其中最后一個已發布的項目前置於div中的列表。

現在我只想回復一個回復，我並不擔心此刻格式正確。

我的問題是表單不會用e.preventDefault();提交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提交此表單？

Answer 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."); }
   });

});

Answer 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 Part之后只需輸入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);
}

Answer 3

您不必使用preventDefault(); 你可以使用return false; 在函數submit()但我懷疑這是問題所在。

你還應該在$('.feed-input').val()上使用url編碼$('.feed-input').val()使用encodeURIComponent 。

您還應該檢查控制台中是否有錯誤。

要確定是否阻止了默認操作，可以使用e.isDefaultPrevented() 。 默認情況下，在這種情況下，操作是指使用id feedInput提交表單的操作。

您沒有在數據中命名您的參數。 檢查jquery ajax示例 。

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