Question

我有一个基本上由三种形式组成的视图，都在他们自己的div中。

在页面加载时我希望显示第一个表单而隐藏其他两个表单，如果验证成功，那么我希望隐藏第一个表单并使第二个表单可见，依此类推。

我目前让他们都在不同的视图中工作，但我不希望页面刷新。

我想使用ajax做所有这些，以便页面不刷新，我之前没有使用过ajax，所以任何帮助，提示等都会很棒。非常感谢提前。

Answer 1

你可以采取两种方式：

a）将所有表格放在一个视图中。设置不需要显示的css样式：none;并且只显示一种形式。

b）创建控制器方法以显示各个视图。使用像JQuery这样的JavaScript框架来使用Ajax显示表单（例如使用load-function，调用控制器方法）。

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中：

您可以使用 $ this-＆gt; input-＆gt; 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.
}

使用ajax在codeigniter中加载视图

2 个答案: