【问题标题】:How to handle multiple form submits on same page using Ajax and PHP?如何使用 Ajax 和 PHP 在同一页面上处理多个表单提交?
【发布时间】:2017-03-14 19:08:05
【问题描述】:

我正在尝试创建管理面板。 我在同一页面上创建了 2 个表单,我正在使用 Ajax 和 PHP 处理它们。

我已经编写了代码,但数据没有保存在数据库中。

Data_entry.php

这是我创建选项卡及其内容的前端代码文件。

<ul class="nav nav-tabs">
            <li class="active"><a data-toggle="tab" href="#course">Course Entry</a></li>
            <li><a data-toggle="tab" href="#exam">Exam Entry</a></li>
            <li><a data-toggle="tab" href="#topic">Topic/Section Entry</a></li>
          </ul>
          <br>
          <div class="tab-content">
            <!-- Course Entry -->
            <div id="course" class="tab-pane fade in active tab_wrapper">
              <h3>Course Entry:</h3><hr>
              <div id="message_course"></div>
              <div id="message_course_success"></div>
              <div class="form_entry">
                <form>
                 <div class="form-group">
                   <label for="course_name">Course Name:</label>
                   <input type="text" class="form-control" id="course_name">
                 </div>
                 <button type="submit" name="course_submit" id="course_submit" class="btn btn-primary">Submit</button>
                </form>
              </div>

            </div>
            <!-- Exam Entry -->
            <div id="exam" class="tab-pane fade in tab_wrapper">
              <h3>Exam Entry</h3><hr>
              <div id="message_exam"></div>
              <div id="message_exam_success"></div>
              <div class="form_entry">
                <form>
                 <div class="form-group">
                   <label for="course_name">Exam Name:</label>
                   <input type="text" class="form-control" id="exam_name">
                 </div>
                 <div class="form-group">
                   <label for="exam_course_name">Course Name:</label>
                   <input type="text" class="form-control" id="exam_course_name">
                 </div>
                 <button type="submit" name="exam_submit"  id="exam_submit" class="btn btn-primary">Submit</button>
                </form>
              </div>

            </div>
            <!-- Topic/Section Entry -->
            <div id="topic" class="tab-pane fade tab_wrapper">
              <h3>Topic Entry</h3>
              <p>Some content in menu 2.</p>
            </div>
          </div>

Data_entry.js

这里我写了 javascript/Ajax 部分来处理表单数据。

    $(document).ready(function(){

  $("#course_submit").click(function(){

    var cname = $("#course_name").val();

    $.ajax({
      type: "POST",
      url: "data_entry_backend.php",
      data: {coursename: cname, action: "course_submit"},
      success: function(result){
        if(result == 'true'){
          $("#message_course_success").html("Successfully entered the data.");
          $("#message_course").hide();
          $("#message_course_success").fadeIn(700);
        }else{
          $("#message_course").html(result);
          $("#message_course_success").hide();
          $("#message_course").fadeIn(700);
        }
      }
    });

    return false;
  });

  $("#exam_submit").click(function(){

    var ename = $("#exam_name").val();
    var ecname = $("#exam_course_name").val();

    $.ajax({
      type: "POST",
      url: "data_entry_backend.php",
      data: {examname: ename, examcoursename: ecname, action: "exam_submit"},
      success: function(result){
        if(result == 'true'){
          $("#message_exam_success").html("Successfully entered the data.");
          $("#message_exam").hide();
          $("#message_exam_success").fadeIn(700);
        }else{
          $("#message_exam").html(result);
          $("#message_exam_success").hide();
          $("#message_exam").fadeIn(700);
        }
      }
    });

    return false;
  });

});

data_entry_backend.php

这是我编写后端代码以将数据存储在数据库中的地方

    <?php

include 'core/init.php';
$con = $GLOBALS['con'];       //$GLOBALS NOT $GLOBAL

$errors = array();

if(isset($_POST) === true && empty($_POST) === false){

  if(isset($_POST['action']) && $_POST['action'] === "course_submit"){

    $coursename = strtolower(sanitize($_POST['coursename']));

    if(course_exists($coursename) === true){
      echo "Course already exists!";
    }
    if(empty($coursename) === false){
      echo "Please enter a value!";
    }

      $count_err = count($errors);

      if(!empty($errors)){                  // if there are errors then return them one by one to login.js and print them
          for($i=0;$i<$count_err;$i++){     // else set the session by crosschecking username and password with database
            echo $errors[$i].'<br>';
          }
      }
      else{

        mysqli_query($con,"INSERT INTO `courses` (`course_name`) VALUES('$coursename')");
        $query_run = mysqli_query($con,"SELECT `course_id` FROM `courses` WHERE `course_name` = '$coursename'");
        $query_result = mysqli_num_rows($query_run);

        if($query_result == 1){
          echo 'true';
        }else{
          echo 'Could not enter the data';
        }

      }

  }

  else if(isset($_POST['action']) && $_POST['action'] === "exam_submit"){

      $examname = strtolower(sanitize($_POST['examname']));
      $examcoursename = strtolower(sanitize($_POST['examcoursename']));

      if(exam_exists($examname) === true){
        $errors[] = "Course already exists!";
      }

        $count_err = count($errors);

        if(!empty($errors)){                  // if there are errors then return them one by one to login.js and print them
            for($i=0;$i<$count_err;$i++){     // else set the session by crosschecking username and password with database
              echo $errors[$i].'<br>';
            }
        }
        else{

          $result = mysqli_fetch_assoc(mysqli_query($con,"SELECT `course_id` FROM `courses` WHERE `course_name` = '$examcoursename'"));
          $course_id =$result['course_id']

          mysqli_query($con,"INSERT INTO `exams` (`exam_name`,`course_id`) VALUES('$coursename','$course_id')");
          $query_run = mysqli_query($con,"SELECT `exam_id` FROM `exams` WHERE `exam_name` = '$examname'");
          $query_result = mysqli_num_rows($query_run);

          if($query_result == 1){
            echo 'true';
          }else{
            echo 'Could not enter the data';
          }

        }
    }

}

?>

【问题讨论】:

标签: php jquery ajax forms


【解决方案1】:

试试这样:

  1. 删除&lt;form&gt; Wrap,你不需要它,因为你是通过 jquery 和 ajax 发送的。
  2. 将按钮类型从 submit 更改为 button
  3. 确保在底部结束 &lt;/body&gt; 标记之前包含您的脚本。

现在服务器最终将收到 ajax 请求并可以处理它。现在您必须检查您的data_entry_backend.php 是否可以使用。

Data_entry.php

<ul class="nav nav-tabs">
            <li class="active"><a data-toggle="tab" href="#course">Course Entry</a></li>
            <li><a data-toggle="tab" href="#exam">Exam Entry</a></li>
            <li><a data-toggle="tab" href="#topic">Topic/Section Entry</a></li>
          </ul>
          <br>
          <div class="tab-content">
            <!-- Course Entry -->
            <div id="course" class="tab-pane fade in active tab_wrapper">
              <h3>Course Entry:</h3><hr>
              <div id="message_course"></div>
              <div id="message_course_success"></div>
              <div class="form_entry">

                 <div class="form-group">
                   <label for="course_name">Course Name:</label>
                   <input type="text" class="form-control" id="course_name">
                 </div>
                 <button type="button" name="course_submit" id="course_submit" class="btn btn-primary">Submit</button>

              </div>

            </div>
            <!-- Exam Entry -->
            <div id="exam" class="tab-pane fade in tab_wrapper">
              <h3>Exam Entry</h3><hr>
              <div id="message_exam"></div>
              <div id="message_exam_success"></div>
              <div class="form_entry">

                 <div class="form-group">
                   <label for="course_name">Exam Name:</label>
                   <input type="text" class="form-control" id="exam_name">
                 </div>
                 <div class="form-group">
                   <label for="exam_course_name">Course Name:</label>
                   <input type="text" class="form-control" id="exam_course_name">
                 </div>
                 <button type="button" name="exam_submit"  id="exam_submit" class="btn btn-primary">Submit</button>

              </div>

            </div>
            <!-- Topic/Section Entry -->
            <div id="topic" class="tab-pane fade tab_wrapper">
              <h3>Topic Entry</h3>
              <p>Some content in menu 2.</p>
            </div>
          </div>

<script src="jquery-3.1.1.min.js"></script>
<script src="Data_entry.js"></script>

data_entry_backend.php

您还缺少第 63 行的分号

$course_id = $result['course_id']

【讨论】:

  • 它仍然无法正常工作....数据将进入 data_entry_backend.php 但查询未通过。
  • 但现在我们终于将数据发送到服务器了。您可以检查数据是否成功到达?如果你回显动作,你会得到什么输出,例如echo $_POST['action']; 或者尝试像这里一样输出您的帖子进行调试:stackoverflow.com/a/7093446/4684797
  • 数据成功到达...如果您在 data_entry_backed.php 中 echo $coursename 则它成功地回显了课程名称值
  • 如果您使用任何if 中的echo $_POST['action'],它会成功输出course_submit 和exam_submit。
  • 好吧,非常感谢你为这个黑色......我认为这是错误......它奏效了。
猜你喜欢
  • 2023-03-20
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2017-09-14
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多