使用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. 
}