使用ajax加載codeigniter中的視圖

Question

我有一個視圖，它基本上由三種形式組成，都在它們自己的div內。

在頁面加載我想要顯示的第一個窗體，其他兩個隱藏，如果驗證成功，那麼我希望第一個窗體隱藏並讓第二個窗體可見，等等。

我目前有他們在單獨的意見工作，但我不想頁面刷新。

我想使用ajax來完成所有這一切，這樣頁面就不會刷新，我之前沒有使用過ajax，所以任何幫助，提示等都會很棒。提前謝謝了。

Answer 1

兩種方法，你可以這樣做：

一）把所有形式的一個觀點。設置你不需要顯示的CSS樣式：無;並只顯示一種形式。

b）創建控制器方法來顯示各個視圖。使用像JQuery這樣的JavaScript框架用Ajax顯示你的表單（例如使用load函數，調用你的控制器方法）。

Answer 2

Ajax非常友好，特別是使用jQuery。閱讀更多關於它的地方：jQuery.post()

您不需要爲每個控制器功能創建視圖，並且可以利用它並對控制器進行ajax調用。

有這樣做的明顯不同的方法，但爲了簡單起見，我在這裏寫了一個例子：

HTML：

<div id="form1"> 
    <form> 
     <input type="text" name="form1_input1" id="form1_input1" /> 
     <input type="text" name="form1_input2" id="form1_input2" /> 
     <input type="button" value="Next" name="form1_next" id="form1_next" /> 
    </form> 
</div> 

<div id="form2"> 
    <form> 
     <input type="text" name="form2_input1" id="form2_input1" /> 
     <input type="text" name="form2_input2" id="form2_input2" /> 
     <input type="button" value="Next" name="form2_next" id="form2_next" /> 
    </form> 
</div> 

<div id="form3"> 
    <form> 
     <input type="text" name="form3_input1" id="form3_input1" /> 
     <input type="text" name="form3_input2" id="form3_input2" /> 
     <input type="button" value="Next" name="form3_next" id="form3_next" /> 
    </form> 
</div> 

JQuery的：

$(document).ready(function() { 
    $("#form2").hide(); // hides form2 and form3 elements on document load 
    $("#form3").hide(); 

    $("#form1_next").click(function() { 
     var form1_input1 = $("#form1_input1").val(); // retrieve values from input 
     var form1_input2 = $("#form1_input2").val(); 
      $.post("LINK-TO-CONTROLLER", { form1_input1: form1_input1, form1_input2: form1_input2 }, 
       function(data){ 
        $("#form1").hide(); 
        $("#form2").show(); // shows form 2, hides form 1 
      }); 
    }); 

    $("#form2_next").click(function() { 
     var form2_input1 = $("#form2_input1").val(); // retrieve values from input 
     var form2_input2 = $("#form2_input2").val(); 
      $.post("LINK-TO-CONTROLLER", { form2_input1: form2_input1, form2_input2: form2_input2 }, 
       function(data){ 
        $("#form2").hide(); 
        $("#form3").show(); // shows form 2, hides form 1 
      }); 
    }); 

    $("#form3_next").click(function() { 
     var form3_input1 = $("#form3_input1").val(); // retrieve values from input 
     var form3_input2 = $("#form3_input2").val(); 
      $.post("LINK-TO-CONTROLLER", { form3_input1: form3_input1, form3_input2: form3_input2 }, 
       function(data){ 
        $("#form3").hide(); // finish 
        alert("COMPLETE!"); 
      }); 
    }); 
}); 

在PHP CodeIgniter中： 012你可以使用$ this-> input-> post（「form1_input1」）來檢索帖子變量。等...你不需要返回意見。

function my_controller_form_one() { 
    $input_one = $this->input->post("form1_input1"); 
    $input_two = $this->input->post("form1_input2"); 
    $this->my_model->doSomething($input_one, $input_two); 
    return true; // need not return anything, really. Unless you are doing server-side validation stuff. 
}