使用AJAX在CodeIgniter中传递表单输入

Question

我是CodeIgniter的新手，我正在尝试将视图中的表单输入传递给控制器​​。我能够通过它，并能够将其插入数据库。但是，我想使用Ajax，因此当我按下提交按钮时，整个页面将不会重新加载。我已经观看并尝试了这个youtube教程：https://www.youtube.com/watch?v=IURutxKvukA，但它对我不起作用。 :(谢谢你提前！

这是我的控制器，Teacher.php

public function insert_quiz($quiztitle, $quizdescription, $value="") 
 {
     $data = $this->input->post();
     $numData = count($data);

     $response = array();
    $stringChoices = "";
     if($numData > 1) 
     {

        for ($i=4; $i < $numData; $i++)
         {
             $num = $i-3;
            $offset = "inputChoice$num";

            if ($i == 4)
            {
                $stringChoices = $data[$offset];
            }
            else if ($i != 4)
            {
                $stringChoices = $stringChoices . "," . $data[$offset];

            }

         }
    }

    $quizitems = array('Question' => $data['inputQuestion'], 'Choices' => $stringChoices, 'Correct' => $data['correctanswer'], 'NumSequence' => $data['questionnumber']);

    $quizitemid = $this->Teacher_model->insertQuizItemOnQuizItems($quizitems);

    if (count($quizitemid) == 1)
            {
                $quizdeedid = $this->Teacher_model->getQuizDeedId($quiztitle);

                $quizdatasetitem = array('QuizSet' => $data['quizsetnumber'], 'QuizItemID' => $quizitemid, 'QuizDeedID' => $quizdeedid);

                 $quizdatasetid = $this->Teacher_model->insertQuizOnQuizDataSet($quizdatasetitem);

                 if(count($quizdatasetid) == 1)
                 {
                     $response = array(
                         'status' => "success"
                     );

                     echo json_encode($response);
                 }

            }
 }

这是我的测验表格，在quizView.php

中

<div class="container-fluid container-cards-pf container-pf-nav-pf-vertical
     nav-pf-persistent-secondary">
<div class="row row-cards-pf">
      <!-- Important:  if you need to nest additional .row within a .row.row-cards-pf, do *not* use .row-cards-pf on the nested .row  -->
        <div class="col-xs-12 col-sm-12 col-md-12">
<div class="card-pf">
  <div class="card-pf-heading">
    <h1 align="center">
      <strong><?php echo str_replace("%20", " ", $quizTitle); ?></strong>
    </h1>
    <h2 class="card-pf-title" align="center">
    <label><?php echo str_replace("%20", " ", $quizDescription); ?></label>
    </h2>
    </div>
  <div class="card-pf-body" id="divquizset" style="height: 50px">
          <div class="col-sm-2">
          </div>
          <div class="col-sm-9" id="divquizset">
           <div class="col-sm-3">
              <p align="right"> QUIZ SET: </p>
            </div>
            <div class="col-sm-4">
              <input align="center" type="text" id="quizset" class="form-control"></input>
            </div>
              <button class="btn btn-default col-sm-2" align="left" onclick="saveQuizSet()">Save</button>
          </div>
          <div class="col-sm-1">
          </div>
  </div>

  </div>
  </div>
</div>
</div>


<div class="row">
  <div class="container">
    <div class="col-sm-12">
      <div id="status">

      </div>
    </div>
  </div>
</div>

<div class="container-fluid container-cards-pf container-pf-nav-pf-vertical
     nav-pf-persistent-secondary" id="list1" style="padding-top: 0px">

<!-- LIST VIEW PART 1 -->
<div id = "div1" style="padding-top: 0px">

<?php echo form_open("Teacher/insert_quiz/$quizTitle/$quizDescription", "id='myForm'", $hidden= array()); ?>
<div>
     <div class="list-group list-view-pf list-view-pf-view">
  <div class="list-group-item">
    <div class="list-group-item-header" id="div2">
      <div class="list-view-pf-expand">
        <span class="fa fa-angle-right"></span>
      </div>
      <div class="list-view-pf-checkbox">
         <input type="text" name="questionnumber" id="inputquestionnumber1" class="form-control">
         <!--   <b id="questionnumber" name="questionlabel" for="inputQuestion">Question 1: </b> -->
         <input type="hidden" name="quizsetnumber" id="quizsetnum" class="form-control" value="">
      </div>
      <div class="list-view-pf-actions">
      <?php echo form_submit('submit', 'Save', $attributes=array("class" => "btn btn-default")); ?>
       <!-- <button class="btn btn-default" style="width: 100px">Save</button> -->
        <button class="btn btn-default" style="width: 100px">Edit</button>
        <button class="btn btn-default" style="width: 100px">Delete</button>
      </div>
      <div class="list-view-pf-main-info">
        <div class="list-view-pf-body">
          <div class="list-view-pf-description">
            <div class="list-group-item-text form-group">
              <input type="text" name="inputQuestion" id="input1" class="form-control">
            </div>
          </div>

        </div>
      </div>
    </div>
    <div class="list-group-item-container container-fluid hidden" id="containerDiv">
      <div class="close">
        <span class="pficon pficon-close"></span>
      </div>
      <div class="row">

<!-- LIST VIEW SUB VIEW -->
        <div class="col-md-12">
            <form class="form-horizontal" style="padding-left: 100px">
                <div class="form-group">
                    <div class="col-sm-7" align="center">
                    <dt> CHOICES </dt>
                    </div>
                    <div class="col-sm-5" align="center">
                    <dt> CORRECT ANSWER </dt>
                    </div>
                    <div class="col-sm-7">
                        <div id="divCorrect" style="padding-top: 10px">
                            <input type="text" name="correctanswer" id="inputcorrectanswer1" class="form-control">
                        </div>
                    </div>
                    <div class="col-sm-5" id="divChoiceContainer1">
                        <div id="divChoice" style="padding-top: 10px">
                            <input type="text" name="inputChoice1" id="inpChoice1" class="form-control">
                        </div>
                    </div>
                    <div class="col-sm-7" id="otherDivChoiceContainer1">
                    </div>
                    <div class="col-sm-7" align="center" style="padding-top: 20px">
                        <button type="button" class="btn btn-primary btn-lg btn-block col-xs-9" id = "1" align="center" onclick="addChoiceFunction(this.id)" >Add Choices</button>
                    </div>
                </div>

            </form>


        </div>
      </div>
    </div>
  </div>
</div>
 <?= form_close() ?>
</form>
</div>
</div>
</div>


<div class="col-sm-3 container-fluid container-cards-pf container-pf-nav-pf-vertical nav-pf-persistent-secondary">
<button type="button" class="btn btn-primary btn-lg btn-block col-md-9" align="center" onclick="addQuestionFunction()">Add Question</button>
</div>

这些是我使用的脚本，它们也在quizView.php中：

<script>

  jQuery(document).ready(function($) {

     $('#myForm').ajaxForm({
      beforeSubmit: function(formData, jqForm, options){
        $("div#status").html('');
      },
      success: function(response){
        var result = $.parseJSON(response);

        $("div#status").html('<div class="alert alert-' + result.status + '" role="alert"> HI </div>'); 

      }
    });
  });

</script>

<script>
  $(document).ready(function () {

   // click the list-view heading then expand a row
   $(".list-group-item-header").click(function(event){
    if(!$(event.target).is("button, a, input, .fa-ellipsis-v")){
      $(this).find(".fa-angle-right").toggleClass("fa-angle-down")
        .end().parent().toggleClass("list-view-pf-expand-active")
          .find(".list-group-item-container").toggleClass("hidden");
    } else {
    }
  })

  // click the close button, hide the expand row and remove the active status
  $(".list-group-item-container .close").on("click", function (){
    $(this).parent().addClass("hidden")
      .parent().removeClass("list-view-pf-expand-active")
        .find(".fa-angle-right").removeClass("fa-angle-down");
  })

  });
</script>
<script>

function addQuestionFunction() {


  $num = $('div .list-view-pf-view').length + 1;
  $divId = "#" + $num;

    $toClone = $('#div1').clone(true).find("input").val("").end();
    $($toClone).find("#containerDiv").addClass("hidden").end();
    $($toClone).find("#otherDivChoiceContainer1").attr("id", "otherDivChoiceContainer"+ $num);
    $($toClone).find("#otherDivChoiceContainer" + $num).find("#divChoice").remove().end();
    $($toClone).find("#1").attr("id", $num);
     $($toClone).find("#questionnumber").text("Question " + $num + ": ");
    if($($toClone).find("span").hasClass("fa-angle-down")) {
      $($toClone).find(".fa-angle-right").removeClass("fa-angle-down").end();
    }

    $('#list1').append($toClone);
}

function addChoiceFunction(clicked_id) {

  $num = parseInt(clicked_id);
  $divId = "#otherDivChoiceContainer" + $num;  
  $numChoice = $($divId + " input").length + 2;

  $toClone = $('#divChoice').clone(true).find("input").val("").end();
  $toClone.find("#inpChoice1").attr("id", "inpChoice" + $numChoice).attr("name", "inputChoice" + $numChoice);
 // $toClone.find("#inpChoice" + $num).attr("name", $("#inpChoice"+$num).attr("name").replace(/\\[\d+\\]/,"inputChoice" + $num));

//alert($numChoice);
  $($divId).append($($toClone));
}

function saveQuizSet() {
  $('#quizsetnum').val($('#quizset').val());  

  $quizsetval = $('#quizset').val();
  $('#divquizset').empty();
  $('#divquizset').append(' <p align="center"> QUIZ SET: '+ $quizsetval + '</p>');

 // $('#divquizset').append(" <p align="center"> QUIZ SET: A </p>");


}
</script>

对于我的脚本来源，我使用了这些：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="http://malsup.github.io/jquery.form.js"></script>
  <script src="http://www.patternfly.org/components/jquery/dist/jquery.min.js"></script>
  <script src="http://www.patternfly.org/components/bootstrap/dist/js/bootstrap.min.js"></script>
  <script src="http://www.patternfly.org/components/patternfly-bootstrap-combobox/js/bootstrap-combobox.js"></script>
  <script src="http://www.patternfly.org/components/bootstrap-datepicker/dist/js/bootstrap-datepicker.js"></script>
  <script src="http://www.patternfly.org/components/bootstrap-select/dist/js/bootstrap-select.min.js"></script>

  <script src="http://www.patternfly.org/components/d3/d3.min.js"></script>
  <script src="http://www.patternfly.org/components/c3/c3.min.js"></script>
  <script src="http://www.patternfly.org/components/datatables/media/js/jquery.dataTables.js"></script>
  <script src="http://www.patternfly.org/components/google-code-prettify/bin/prettify.min.js"></script>
  <script src="http://www.patternfly.org/components/clipboard/dist/clipboard.min.js"></script>
  <script src="http://www.patternfly.org/components/patternfly/dist/js/patternfly.min.js"></script>
  <script src="http://www.patternfly.org/components/jquery-match-height/dist/jquery.matchHeight-min.js"></script>
  <script src="http://www.patternfly.org/assets/js/patternfly-site.min.js"></script>
  <link rel="canonical" href="http://www.patternfly.org/pattern-library/navigation/vertical-navigation/vertical-navigation.html">

这就是我的表格 quizviewform

这就是它的回归

returnpage

它正在我的数据库中插入，但它不会在页面上返回，并且ajax不起作用。 :(我希望有人可以帮助我。谢谢！