3

フォームから送信されたデータを 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()ですか?

4

4 に答える 4

6

dataajax 呼び出しの属性が無効です。JSON 形式{ key: $('.feed-input').val() }またはクエリ形式のいずれかである必要があります'key='+$('.feed-input').val()。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."); }
   });

});
于 2013-07-10T13:55:38.037 に答える
4

ビュー内の 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);
}
于 2017-12-28T13:01:21.913 に答える
0

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)); }
});
于 2013-07-10T14:01:02.330 に答える
0

関数の最後でpreventDefault();使用できる使用する必要はありませんが、これが問題であるとは思えません。return false;submit()

これには、使用時にurl エンコーディングも使用する必要があり$('.feed-input').val()ますencodeURIComponent。

コンソールにエラーがあるかどうかも確認する必要があります。

デフォルト アクションが防止されているかどうかを判断するには、 を使用できますe.isDefaultPrevented()。この場合のデフォルト アクションとは、id が feedInput のフォームの送信アクションを意味します。

データでパラメーターに名前を付けませんでした。jquery ajax の例を確認してください。

于 2013-07-10T13:59:26.667 に答える