【发布时间】：2021-01-28 22:47:58
【问题描述】：
好的，所以我有一个脚本，可以在整个过程中分层数据（在线测试，数据最多保留 50 个问题）。我最近发现我的 Ajax 和 jquery 代码并没有阻止所有用户获取一个辅助页面，该辅助页面旨在重新加载以代替页面上当前的 DIV。所有信息都通过 jquery 和 ajax 传递，效果很好，但有时在用户第一次访问和第一个问题时，它会加载仅用于当前替换 DIV 信息而不是可见的页面。
这是我的 Ajax 和 jquery 代码：
<script>
$("#quizForm").submit(function(event){
event.preventDefault(); //prevent default action
var post_url = $(this).attr("action"); //get form action url
var form_data = $(this).serialize(); //Encode form elements for submission
$.post( post_url, form_data, function( response ) {
$("#prntqst").html( response );
dataLayer.push({"event" : "formSubmitted", "formName" : "'.$this->quizID.'"});
});
});
</script>
这是 HTML：
<div id="prntqst"> <!-- this is DIV set to be reloaded -->
<font class="prntqst-text">Question Goes Here</font>
<form id="quizForm" action="ajax.php" method="post"> <!-- Script setup to handle submitted data -->
<input type="hidden" id="next_question" name="next_question" value="2">
<input type="hidden" id="quiz_type" name="quiz_type" value="learning">
<input type="hidden" id="quiz_name" name="quiz_name" value="knowledge-1">
<label class="container" for="a">Ans A
<input type="radio" name="answers[1]" id="a" value="a">
<span class="checkmark"></span>
</label>
<label class="container" for="b">Ans B
<input type="radio" name="answers[1]" id="b" value="b">
<span class="checkmark"></span>
</label>
<label class="container" for="c">Ans C
<input type="radio" name="answers[1]" id="c" value="c">
<span class="checkmark"></span>
</label>
<div class="subbtn_contain">
<div class="submitbtn">
<input id="submit" type="submit" class="button" value="Next Question">
</div>
</div></div>
</form>
<!-- currently this is the location of Ajax and jquery script -->
<div>
所以当表单提交时，它会通过 ajax.php 页面处理数据，然后页面将下一个问题重新加载到“prntqst”DIV，在第一个页面加载后，每个请求都发送到 ajax.php 位置，并且所有后续的重新加载都会携带测试正常工作所需的所有数据。但是我发现，如果我使用新计算机，或者清除缓存，第一个请求有时会导致用户被推送到 ajax.php 的位置，而不是他们停留在当前 URL 并重新加载 DIV。
我已经通过我的分析帐户验证了这个问题，99% 的时间用户仍然显示在正确的 URL 上，好像 ajax 正确地重新加载了 DIV，但有时它确实直接在 ajax.php 脚本中显示用户.
任何想法或 cmets 将不胜感激，
再次感谢！
【问题讨论】：
-
由于
processData: false;，您应该在控制台中至少有一个错误。类似于processData is undefined之类的解析错误，例如unexpected ":"...——我很惊讶它在 99% 的时间里都能正常工作。 -
我使用或不使用该行，所以我将删除它。在玩了一些之后，如果页面接近或一直加载，问题就不会发生。如果当页面第一次加载提交按钮时，它会加载凉亭栏中的 ajax.php 脚本。所以这似乎更像是一个加载问题。
-
我尝试将代码添加到页面的标题中，但完成后它根本不起作用。难道是代码只需要在代码中进一步移动吗？可能在提交按钮之前？
-
推送到“ajax.php”的位置意味着用户被重定向到特定的 PHP 页面，对吧？
-
还有一件事，你提供的Html，它准确吗？因为关闭表单标记似乎超出了“prntqst”div。当您在“prntqst”div 中覆盖 HTML 时，这可能会给您带来问题。
标签： javascript php html jquery ajax