当通过HTML文件包含在PHP中时，AJAX不再工作了

Question

在我的许多php文件中，我附加了html和javascript部分，它们修改并增强了表中显示的数据。由于html和js/jquery部分总是相同的，所以我想创建一个全局头文件，我应该在我的php文件中包括这样的文件：

include("parts/head.html");

Head.html包含几个jquery文件、css文件和我自己的js，这些jquery调用jquery并将其应用于主表中的某些ids或类：

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/styles.css">
<script type="text/javascript" src="js/defaulttable.js"></script>
<link rel="icon" href="images/favicon.ico">
<body>test test
</body>
</html>

现在，除了一个函数--一个通过一个小文本框将注释插入到DB中的函数，一切都工作得很好。从我的.js文件中提取：

 //function to insert textarea
  function insertTextarea() {
      if ($(this).parents("tr").find("td:eq(0)").text() == 1) {
          var boardInfo = $("<form id='boardComment'><textarea placeholder='Notizen? Fragen? Kommentare?' rows='2' cols='27'></textarea>Privat:<input type='checkbox' name='privatecheckbox' id='privatecheckbox'/>Reminder:<input type='checkbox' name='remindercheckbox' id='remindercheckbox' checked/><input type='submit' value='Submit'><input type='reset' value='Cancel'></form>");
      } else {
          var boardInfo = $("<form id='boardComment'><textarea placeholder='Notizen? Fragen? Kommentare?' rows='2' cols='27'></textarea>Privat:<input type='checkbox' name='privatecheckbox' id='privatecheckbox'/>Reminder:<input type='checkbox' name='remindercheckbox' id='remindercheckbox'/><input type='submit' value='Submit'><input type='reset' value='Cancel'></form>");
      }

      console.log('this', $(this).parents("tr").find("td:eq(0)").text());


      $(this).parent().append(boardInfo);
      $("tbody img").hide();
      $("textarea").focus();

      $("#boardComment").on("submit", function(event) {
          event.preventDefault();
          var change_id = {};
          change_id['id'] = $(this).parent().attr("id");

          change_id['comment'] = $(this).find("textarea").val();

          change_id['privatecheckbox'] = $("input[name='privatecheckbox']", this).is(':checked') ? 1 : 0;
          // get remindercheckbox
          change_id['remindercheckbox'] = $("input[name='remindercheckbox']", this).is(':checked') ? 1 : 0;

          $.ajax({
              type: "POST",
              url: "boardinfo2private.php",
              cache: false,
              data: change_id,
              success: function(response2) {
                  alert("Your comment has been saved!");
                  $("tbody img").show();
                  $("#" + change_id['id']).find("form").remove();

                  if (change_id['remindercheckbox'] == 1) {
                      console.log("rem checkbox 1");
                      $("#" + change_id['id']).parent().addClass("Reminds");
                      $("#" + change_id['id']).parent().find("td:eq(0)").html(1);

                  } else if ($("#" + change_id['id']).parent().hasClass("Reminds")) {
                      $("#" + change_id['id']).parent().removeClass("Reminds");
                      $("#" + change_id['id']).parent().find("td:eq(0)").html(0);

                  }
              }
       });

      return false;
       });

当我将所有内容都放在一个php文件( html、script和php )中时，变量change_id已经定义得足够早了，并且工作得很好。所发生的情况是，当我点击submit时，页面完全重新加载，变量被存储在URL中，而没有插入到DB中。

我在js文件中执行的其他函数调用也是在外部php文件上发布AJAX，它们运行良好。他们不会在DB中插入任何新的内容。

如果有人能帮我做这件事，我会无限感激。我非常想改进我的编码，并认为全局文件是一个好的开始，所以我不需要改变每一个文件，如果我想要添加一些东西到JS。

Answer 1

据我所知，您的问题是，当表单提交时，页面正在重新加载，您只是希望它异步发生。如果这是问题所在，我将在return false函数的末尾添加一个("submit", function(event) {。希望这能回答你的问题。

Answer 2

你想要全球进步不是个好主意..。因为全局事物总是有问题，所以您应该将这个函数调用为

$(document).ready(function(){

  call it here 
})

另外，在头中包含javascript也不是个好主意

Answer 3

我在php中使用类似的函数，而不是使用post函数重新加载页面，而是拦截表单、提交请求，然后使用jquery或load函数完成相同的任务，而无需刷新或重新加载页面。

$( "#formsubmit" ).click(function(e) 
{
    //stop grid submission from reloading page or going anywhere
        e.preventDefault();
    //get variables
        var passVar = encodeURIComponent($("#var").val());

    //pass to insert to db page, get response
        $.get('adddata.php?var=' + passVar,
            function(data) 
            { 
                var getResult = data;
                //do something, including update page if incessary
            }
        );      
});