使用 jQuery 和 AJAX 时页面未加载

Question

When this function is ran, results.php does not get loaded.运行此 function 时，未加载results.php 。 I have tested to see if the function itself is even called, and it is (as "hello1" gets alerted).我已经测试过是否甚至调用了 function 本身，并且它是（因为“hello1”被警告）。 However, for some reason, the contents of results.php are not getting loaded into the correct section.但是，由于某种原因，results.php 的内容没有被加载到正确的部分。

<script src="https://code.jquery.com/jquery-1.12.4.min.js" type="text/javascript"></script>
<script type="text/javascript">
function loadTable(){
    alert("hello1");
    $("#results_page").load("results.php");
}
</script>
<div id="results_page"></div>

Here are the contents of results.php .这是results.php的内容。 (I used an alert("Hello2") to check if it gets loaded, and hello2 does not get alerted so I am assuming the page does not get loaded. （我使用了一个alert("Hello2")来检查它是否被加载，并且 hello2 没有收到警报，所以我假设页面没有被加载。

<html>
<script type="text/javascript">
alert("hello2");
</script>
</html>

It thus seems the issue lies with the following statement in wedding.php (the original document)因此，问题似乎在于婚礼中的以下声明wedding.php （原始文件）

$("#results_page").load("results.php");

Any ideas?有任何想法吗？

EDIT:编辑：

loadTable() gets called in a seperate function which too is loaded. loadTable()在单独的 function 中被调用，它也被加载。 Here is a more detailed version of what the main program ( wedding.php ) looks like.这是主程序（ wedding.php ）的更详细版本。

<script src="https://code.jquery.com/jquery-1.12.4.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
    $("#form_details").load('form.php');
});
function loadTable(){
    alert($("#results_page").length);
    $("#results_page").load("results.php");
}

</script>
<div id="form_details"></div>
<div id="results_page"></div>

So upon execution, form.php gets loaded.所以在执行时， form.php被加载。 This file contains a form which gets filled in. Once the form is submitted, a function called load() gets called which calls loadTable().该文件包含一个需要填写的表单。提交表单后，调用load()的 function 会调用loadTable(). Here is what form.php looks like.这是form.php的样子。

<script src="https://code.jquery.com/jquery-1.12.4.min.js" type="text/javascript"></script>
<script type="text/javascript">
function load(){
    alert("hello");
    loadTable();
}

form.php also contains a form, however to keep things concise I have not included it. form.php也包含一个表单，但是为了简洁起见，我没有包含它。

When testing, hello gets alerted, and therefore i believe load() is correctly executed.测试时， hello 会收到警报，因此我相信load()已正确执行。 Hello1 also gets alerted, and therefore i believe loadTable() is correctly executed Hello1 也会收到警报，因此我相信loadTable()已正确执行

Answer 1

add run of function loadTable() like this:添加运行 function loadTable() 像这样：

<script src="https://code.jquery.com/jquery-1.12.4.min.js" type="text/javascript"></script>
<script type="text/javascript">
  function loadTable(){
     alert("hello1");
     $("#results_page").load("results.php");
  }
</script>
<div id="results_page"></div>
<script type="text/javascript">
  loadTable();
</script>

EDIT:编辑：

file: index.php:文件：索引.php：

!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>title</title>
    <script src="https://code.jquery.com/jquery-1.12.4.min.js" type="text/javascript"></script>
    <script type="text/javascript">
      function loadTable(){
         alert("hello1");
         $("#results_page").load("results.php");
      }

      $(document).ready(function(){
         loadTable();
      });        
    </script>
  </head>
  <body>
    <div id="results_page"></div>
 </body>
</html>

file results.php:文件结果.php：

<html>
<script type="text/javascript">
alert("hello2");
</script>
</html>

All worked fine.一切正常。

alert("hell1") -> alerted警报（“hell1”）-> 警报

alert("hello2") -> alerted警报（“hello2”）-> 警报

Answer 2

EDIT: Try #2.编辑：尝试#2。

I have created what I think is a replica.我创造了我认为是复制品的东西。 Three html pages.三个 html 页。

main.html - On page load, loads form.html main.html - 在页面加载时，加载表单。html

form.html - Click the button and it calls main.html function loadResult() form.html - 单击按钮，它会调用 main.html function loadResult()

result.html - has the result info result.html - 有结果信息

main.html main.html

<html>
<head>

<script src="https://code.jquery.com/jquery-1.12.4.min.js" type="text/javascript"></script>
<script type="text/javascript">
    function loadResult(){
        console.log("loading result");
        $("#resultPage").load("result.html");
    }

    function loadForm(){
        console.log("loading form");
        $("#formPage").load("form.html");
    }

    $(document).ready(function () {
        loadForm();
    });
</script>

</head>
<body>

<h1>MAIN PAGE</h1>

<div id="formPage"></div>

<div id="resultPage"></div>

</body>
</html>

form.html表格.html

<html>
<head>

<script type="text/javascript">
    function submitForm() {
        console.log("calling loadResult on main page");
        loadResult();
    }
</script>

</head>
<body>

<h1>FORM PAGE</h1>

<form onsubmit="submitForm(); return false;">
<input type="submit"/>
</form>

</body>
</html>

result.html结果.html

<html>
<head>
<script type="text/javascript">
console.log("inside result page");
</script>
</head>

<body>
<h1>RESULT PAGE</h1>
<i>The Result</i>
</body>
</html>

使用 jQuery 和 AJAX 时页面未加载

问题描述

2 个解决方案

解决方案1
0 2020-05-06 15:32:55

解决方案2
0 已采纳 2020-05-06 15:58:22

使用 jQuery 和 AJAX 时页面未加载

问题描述

2 个解决方案

解决方案1 0 2020-05-06 15:32:55

解决方案2 0 已采纳 2020-05-06 15:58:22

解决方案1
0 2020-05-06 15:32:55

解决方案2
0 已采纳 2020-05-06 15:58:22