2016-09-05 9 views
0

Ajaxレスポンスを受信しようとしましたが、レスポンスはnullです。このCodeigniterのビューでajaxを介してポスト値を取得する方法

<form method="post" action="<?php $_SERVER['PHP_SELF'] ?>"> 
     <select class="form-control" class="form-control" id="choose_country"> 
          <option value="">Select a prefered language</option> 
          <option value="en">EN</option> 
          <option value="fr">FR</option> 
          <option value="de">DE</option> 
          <option value="nl">NL</option> 
         </select> 
         </form> 


<div id="table_load"></div> <!-- loads search table --> 

マイJavascriptが私のコントローラは、私が選択ボックスの値を渡したいこの

public function search(){ 

      $choose_language = $this->input->post('choose_country');  

      $this->load->view('admin/manage_article/search'); 

     } 
    } 

のように見えるこの

<script> 
    $('#table_load').load('<?php echo base_url(); ?>admin/manage_article/search'); 

      $("#choose_country").change(function(){ 
      var choose_country = $("#choose_country").val(); 
      $.ajax({ 
      url: "<?php echo base_url(); ?>admin/manage_article/search", 
      type: "post", 
      data: {choose_country: choose_country}, 
      dataType: 'json', 
      async: false, 
      success: function (response) { 
       if(response.success == true){ 
alert('success'); 
      $('#table_load').load('<?php echo base_url(); ?>admin/manage_article/search'); 
       }else{ 
        alert('fail'); 
        } 
      }, 
      }); 
      }); 
    </script> 

のように見えるように

は私のHTMLが見えます$ this-> load-> view( 'admin/manage_arti')ページで選択した値を返します。 cle/search ');

私は上記のコードを試しましたが、応答は "失敗"と警告しています。

私はajaxを初めて使っていますので、コーディングに間違いがあれば教えてください。

答えて

0

<script type="text/javascript"> 
    $(document).ready(function() { 
     $("#choose_country").change(function() { 
      var choose_country = $("#choose_country").val(); 
      $.ajax({ 
       url: "<?php echo base_url(); ?>admin/manage_article/search", 
       type: "post", 
       data: { 
        choose_country: choose_country 
       }, 
       dataType: 'json', 
       async: false, 
       success: function(response) { 
        if (response.result) { 
         alert('success'); 
         $('#table_load').html(response.choose_country); 
        } else { 
         alert('fail'); 
        } 
       }, 
      }); 
     }); 
    }); 
</script> 

の下に、私はあなたがAJAXを使用している理由は、あなたがコントローラでビジネスロジックを持っているかもしれません知っている、これを使用していけないと、あなたのコントローラに

public function search() { 
    $choose_language = $this->input->post('choose_country'); 
    $result = ($choose_language) ? true : false; 
    $this->output->set_content_type('application/json')->set_output(json_encode(array('choose_country' => $choose_language, 'result' => $result))); 
} 

あなたのjQueryのだろう、これを試してみてください示されていない。そうでなければ、以下のように、単にtable_loadにchoose_countryの値をロードすることができます。一度AJAX呼び出しのために、その後、再びHTMLをロードするために -

<script type="text/javascript"> 
    $(document).ready(function() { 
     $("#choose_country").change(function() { 
      var choose_country = $("#choose_country").val(); 
      $('#table_load').text(choose_country); 
     }); 
    }); 
</script> 
0

があり、サーバーへの2本の電話をかけることがない理由はありません。

返信してAJAX経由でブラウザにHTMLをロードするには、javascriptでこれを行います。投稿VARを使用する場合それは何である場合は、(あなたが欲しいものを言語固有のHTMLを受けることができないので、私は、表示されていない以外あなたのコントローラが問題にあなたがそれを示してように動作します

$("#choose_country").change(function() { 
    var choose_country = $("#choose_country").val(); 
    $.ajax({ 
     url: "<?php echo base_url('admin/manage_article/search'); ?>", 
     type: "post", 
     data: {choose_country: choose_country}, 
     dataType: 'html', 
     // Forcing synchronous strongly discouraged, 
     // as it can cause the browser to become unresponsive. 
     //async: false, 
     success: function (response) { 
      $('#table_load').html(response); 
     }, 
     error: function(xhr, textStatus, errorThrown){ 
      console.log(textStatus, errorThrown); 
     } 
    }); 
}); 

やろうとしている)。

resultというプロパティを含む返品を必要と感じている場合は、if (response.result) {...を使用して確認できます。質問に対するparthの回答のバリエーションが必要です。コントローラでこれを使って、返されたjsonにhtmlを追加することができます。

public function search() 
{ 
    //What do you do with this? 
    //You don't show how this is used so I'm mostly going to ignore it. 
    $choose_language = $this->input->post('choose_country'); 

    $result = !empty($choose_language) ? true : false; 

    ///get the view file as a string of html markup 
    $html = $this->load->view('admin/manage_article/search', NULL, TRUE); 
    $out = array('result' => $result, 'html' => $html); 
    $this->output 
     ->set_content_type('application/json') 
     ->set_status_header('200') 
     ->set_output(json_encode($out)); 
} 

次に、あなたのsuccess機能は、この

success: function(response) { 
    if (response.result === true) { 
     alert('success'); 
     $('#table_load').html(response.html); 
    } else { 
     alert('fail'); 
ようになります