0

送信ボタンが押されたときにjQueryとajaxを使用してメッセージをロードし、CodeIgniterで連絡先フォームを作成しようとしています。CodeIgniter from Scratch: Day 8 – AJAX from net.tutsplus.comのチュートリアルを実行しましたが、うまくいきません。送信ボタンを押すと、連絡先フォームの代わりに「ありがとう」というテキストが表示されます。これは別の php ファイルです (やり方がわかったら、同じページの単なるテキスト行にします)。それ）。送信ボタンを押しても何も起こりませんが、内部にアラートを書き込む$.ajax({})か、後にコンマを削除するとdata: form_dataビューは「ありがとう」ビューに変更されますが、「名前を入力しましたか」チェックは実行されません。私は Ajax を初めて使用し、なぜ機能しないのかわかりません。アラートを追加した場合、ビューの変更が機能するのに名前のチェックが機能しない理由を誰かが教えてくれたら、とてもうれしいです。またはコンマを削除します。(もちろん、これらのアクションは Chrome コンソールにエラー メッセージを表示します。そのようなことは想定されていないためです) 私はテンプレートを使用してヘッダー、フッター、および main_content を含めています。

要するに、次の ajax 呼び出しが機能しないのはなぜですか?

コントローラ：

    <?php
    class Contact extends CI_Controller{
        function index(){

        $data['main_content']='contact_form';
        $this->load->view('includes/template', $data);
    }

    function submit(){

        $name = $this->input->post('name');
        $is_ajax=$this->input->post('ajax');
        $data['main_content']='contact_form_thanks';

        if($is_ajax){
            $this->load->view($data['main_content']);
        }else{
            $this->load->view('includes/template', $data);
        }

    }
}

意見：

<div id="contact_form">
    <h2>Contact</h2>
        <?php
            echo form_open('contact/submit');
            echo form_input('name','Name', 'id="name"');
            echo form_input('email', 'Email', 'id="email"');
            $data = array(
                'name' => 'message', 
                'cols' => 30, 
                'rows' => 12
            );
            echo form_textarea($data, 'Message', 'id="message"');
            echo form_submit('submit', 'Send message', 'id="submit"');
            echo form_close();
        ?>
</div><!--end contact-form-->
<!--Dissable the submit function-->
<script type="text/javascript">
$('#submit').click(function(){
    var name = $('#name').val();
    if(!name || name == 'Name'){
        alert('Please enter your name');
        return false;
    }

    var form_data = {
        //csrf_token: $('input[name*="csrf_token"]').val(),
        name: $('#name').val(),
        email: $('#email').val(),
        message: $('#message').val(),
        ajax: '1'
    };
    //array
    $.ajax({
        url: "<?php echo site_url('contact/submit'); ?>",
        type: 'POST',
        data: form_data,
        success: function(msg){
            $('#main_content').html(msg);
        }
        //alert('bye'); //Why does it "work" when I write alert?


    });
    return false;
});
</script>

ヘッダ：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="sv-se" lang="sv-se">
        <head>
            <title></title>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
            <link rel="stylesheet" href="<?php echo base_url();?>css/style.css" type="text/css" media="screen" charset="utf-8">
            <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js" type="text/javascript" charset="utf-8"></script>
        </head>

        <body>
4

1 に答える 1

-1

エラー コールバックを追加します。

$.ajax({
    url: "<?php echo site_url('contact/submit'); ?>",
    type: 'POST',
    data: form_data,
    success: function(msg){
        $('#main_content').html(msg);
    },
    error: function (XHR, status, response) {
        alert('fail');
    }
});

そして正確なdataType

$.ajax({
    url: "<?php echo site_url('contact/submit'); ?>",
    type: 'POST',
    dataType: 'text',
    data: form_data
}).done(function (msg, status, XHR) {
    // Manage the server response here !
    $('#main_content').html(msg);
}).fail(function (XHR, status, response) {
    // an error has occured, probably the CSRF protection.
    // console.log(XHR, status, response); to get more informations.
    // the "network" tab of the Google Chrome console should helps you too, as zeliboba suggested !
});
于 2013-05-05T16:30:53.607 に答える