当我提交一个名为functions_question2的输入表单时，我有以下PHP代码来更新mySql数据库：
$id = $_SESSION['id'];
if(isset($_POST['functions_question2'])){
if($id){
$res3 = $db->query("SELECT * FROM answers WHERE user_id=$id");
$data3 = $res3->fetch_array();
if(isset($_SESSION['functions_question2']) && $_POST['functions_question2']==$_SESSION['functions_question2']){
$db->query("UPDATE answers SET FunctionsScore = FunctionsScore+1 WHERE user_id=$id");
}
我还有以下AJAX代码在提交表单时运行JQuery函数：
<script type='text/javascript'>
$(document).ready(function () {
$('functions_question2').on('submit', function(e) {
e.preventDefault();
$.ajax({
url : $(this).attr('action') || window.location.pathname,
type: "POST",
data: $(this).serialize(),
success: function (data) {
$.ajax("ajax.php?module=user_FunctionsScore").success(function(result){
var color2 = result;
$("#div2").css("background-color", color2);
if ($('input[name=functions_question2]:checked').val() == 2) {
$(".correctanswermark").fadeIn('slow');
} else {
$(".correctanswermark").fadeIn('slow');
}
});
},
});
});
});
</script>
他们都在脚本的头部，而AJAX在PHP代码之下。每个都可以在没有其他的情况下工作，但是当它们都在文档中时，只运行PHP代码。当代码中存在两个页面并且我提交表单时，页面似乎刷新，这可能表明AJAX代码没有运行。
如果有人帮我弄清楚为什么PHP取代了AJAX代码，我将非常感激。谢谢！
<html>
<head>
<?php
include "inc/db.php";
session_start();
error_reporting(E_ALL);
//Identifying it the user is logged in or if it's a guest
//then if he is logged in, we will get it's ID
if(isset($_SESSION['id'])){
//the user is registered
$id = $_SESSION['id'];
echo 'Welcome, '.$_SESSION['name'].'!<br><br>';
}else{
//the user is a guest
$id = 0;
echo 'Welcome, guest! Click <a href="framework_account.php">here to login or register</a>!<br><br>';
if(isset($_COOKIE['guestdata'])) $cookiedata = json_decode($_COOKIE['guestdata']);
else{
//else, we just create a new array with the values
$cookiedata = array();
$cookiedata['score'] = $cookiedata['FunctionsConsistency'] = $cookiedata['FunctionsScore'] = $cookiedata['FunctionsPercent'] = $cookiedata['FunctionsLevel'] = 0;
}
}
//<!--//////////////////////////////////////////////////// UPDATING FUNCTIONSSCORE BY SUBMITTING functionsquestionform2 -->
//$id = $_SESSION['id'];
var_dump("SELECT * FROM answers WHERE user_id=$id");
//Now, the 2nd part... We will increase/decrease the score in the same file, so the user will submit the answer to the same file, and we will do this with php:
if(isset($_POST['functions_question2'])){
//|This if checks if there was a form submited - it will only run if the user submitted an answer
//now:
if($id){
//The user is logged in, so we make the queries on the database
$res3 = $db->query("SELECT * FROM answers WHERE user_id=$id");
$data3 = $res3->fetch_array();
$LevelColumnAdder=$_POST['LevelColumnAdder']; // Takes the value of the hidden input named "Level Column Adder" ...
if(isset($_SESSION['functions_question2']) && $_POST['functions_question2']==$_SESSION['functions_question2']){
$db->query("ALTER TABLE answers ADD $LevelColumnAdder VARCHAR( 255 ) NOT NULL"); // ...and creates a column named after "Level Column Adder"'s value
if($data3['FunctionsScore']<2 )$db->query("UPDATE answers SET FunctionsScore = FunctionsScore+1 WHERE user_id=$id");
if($data3['FunctionsScore']=2)$db->query("UPDATE answers SET FunctionsScore = FunctionsScore+0 WHERE user_id=$id");
if($data3['FunctionsPercent']<49)$db->query("UPDATE answers SET FunctionsPercent = FunctionsPercent+2 WHERE user_id=$id");
if($data3['FunctionsPercent']>50 && $data3['FunctionsPercent']<100)$db->query("UPDATE answers SET FunctionsPercent = 50 WHERE user_id=$id");
}else{
if($data3['FunctionsScore']>-2 )$db->query("UPDATE answers SET FunctionsScore = FunctionsScore-1 WHERE user_id=$id");
if($data3['FunctionsPercent']<49)$db->query("UPDATE answers SET FunctionsPercent = FunctionsPercent+2 WHERE user_id=$id");
if($data3['FunctionsPercent']>50 && $data3['FunctionsPercent']<100)$db->query("UPDATE answers SET FunctionsPercent = 50 WHERE user_id=$id");
$hiddeninput=$_POST['hiddeninput'];
$db->query("INSERT INTO answers (user_id, ProblemNameTest) VALUES ($id,'$hiddeninput')");
}
}else{
//The user is a guest
$data3 = (array)$cookiedata;
$cookiedata = $data3;
$cookie = json_encode($data3);
setcookie('guestdata', $cookie, time()+25920000);
}
}
if($id){
//if the user is logged in
$data = $db->query("SELECT * FROM answers WHERE user_id=$id")->fetch_array();
}else{
$data = (array)$cookiedata;
//the user is a guest;
}
$Percentpercent = $data['FunctionsPercent'];
$FunctionsScore= $data['FunctionsScore'];
$FunctionsLevelTEST = $data['FunctionsLevel'];
$FunctionsConsistencyTest = $data['FunctionsConsistency'];
?>
<?php
$data5 = $db->query("SELECT GROUP_CONCAT(DISTINCT ProblemNameTest ORDER BY rand()) as ProblemNameTest FROM (SELECT ProblemNameTest FROM answers WHERE user_id=$id AND ProblemNameTest LIKE 's%') AS ProblemNameTest")->fetch_assoc();
$selector= $data5['ProblemNameTest'];
$selectorfirst=str_word_count($selector, 1);
?>
<?php echo "|||THIS IS WHERE SELECTOR SHOULD SHOW UP:"; echo $selectorfirst[0]; ?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type='text/javascript'>
$(document).ready(function () {
$('functions_questions2').on('submit', function(e) {
e.preventDefault();
$.ajax({
url : $(this).attr('action') || window.location.pathname,
type: "POST",
data: $(this).serialize(),
success: function (data) {
//after the UPDATE request was made, we do the GET request to get the current user color, so:
$.ajax("ajax.php?module=user_FunctionsScore").success(function(result){
var color2 = result;
//getting the data sent by ajax
//and now updating the color with jquery
$("#div2").css("background-color", color2);
//once with this we will show the answer to the user
if ($('input[name=functions_question2]:checked').val() == 2) {
$(".correctanswermark").fadeIn('slow');
$(".incorrectanswermark").fadeIn('slow');
} else {
$(".correctanswermark").fadeIn('slow');
$(".incorrectanswermark").fadeIn('slow');
}
});
},
});
});
});
</script>
<script type='text/javascript'> /////THIS IS THE CODE THAT CAUSES CLICKING DIV WITH CLASS ".SUBMITTER" TO SUBMIT ITS PARENT FORM.
$(document).ready(function () {
$("div.submitter").click(function(){
$(this).parent().submit();
//$(this).find("button").click();
});
});
</script>
<!--////////////////////////////////////////////////////// THIS APPEARS TO BE USELESS FOR AUTOMATICALLY UPDATING COLOR BUT IT DOES AUTOMATICALLY SHOW CHECKMARKS-->
<style type="text/css">
.img-box
{
padding-top: 25px;
border-bottom: 5px solid #333;
}
</style>
<style>
label {
display: block;
}
</style>
</head>
<!--////////////////////////////////////////////////////// SCROLLBAR BASICS -->
<div id="alternatewrapper" class="wrapper">
<form>
<input type="hidden" name="SubmitToAddTestActiveClass" value="SubmitToAddTestActiveClassValue">
<div class="submitter" class="randomizereasyorhard" id="carouselbutton1" style="width:140px;height:140px;background-color:transparent;display:inline-block;text-align:center;line-height: 140px;border: 2px solid black;border-radius: 10px;"><font face="Courier New"><font face="Courier New">Question Set 1</font></font></div>
<div class="carouselbutton" id="carouselbutton2" style="width:140px;height:140px;background-color:transparent;display:inline-block;text-align:center;line-height: 140px;border: 2px solid black;border-radius: 10px;"><font face="Courier New">Question Set 2</font></div>
</form>
</div>
</div>
<!--//////////////////////////////////////////////////////WITHOUT THIS, DIV2 COLOR DISAPPEARS ON REFRESH -->
<?php
$color=getColor($data['score']);
$color2=getColor2($data['FunctionsScore']);
?>
<!--////////////////////////////////////////////////////// THE BELOW CODE SELECTS A VALUE FROM THE MYSQL ($db defined in one of the external files) -->
CHECKS VALUES
<?php echo "||| Functions Percent"; echo $Percentpercent; ?>
<?php echo "||| Functions Score"; echo $FunctionsScore; ?>
<?php echo "||| Functions Level"; echo $FunctionsLevelTEST; ?>
<?php echo "||| Functions Consistency"; echo $FunctionsConsistencyTest; ?>
<?php echo $scoreTest; ?>
FunctionsScore: <?php echo $data['FunctionsScore']; ?>
<div id="div2" style="width:80px;height:80px;background-color:<?php echo $color2; ?>;">Should immediately update when functionsquestionform2 submitted</div>
<br>
<div id="functionpanel" class="colortest" style="background-color:orange; color:black; border-style:solid; border-width:1px; padding:20px;">
<p style="margin:0;"><b></b></p>
<form class ="functionsquestionform2" id = "logoutForm' class = "classtest" action="frameworkplayground.php" method="POST">
<input type="hidden" name="hiddeninput" value="FirstProblem">
<input type="hidden" name="LevelColumnAdder" value="Simplifying_Fractions">
This is functionsquestionform2 Select the correct answer.
<div class="blahblah" id="questions">
<label>
<input type="radio" id="blah" name="functions_question2" value="2"> This is the correct answer. <span class="correctanswermark" style="color:green; display: none; font-size: 150%;">✓</span><span id="correctanswermarkwhengotwrong" style="color:black; display: none; font-size: 120%;">← Actually, this is the correct answer.</span></input>
</label>
<label>
<input type="radio" id="blah" class ="functionsquestionform2" name="functions_question2" value="1"> Wrong. <span class="incorrectanswermark" style="color:red; display: none; font-size: 120%;">✗</span></input>
</label>
<label>
<input type="radio" id="blah" class ="functionsquestionform2" name="functions_question2" value="3"> Wrong. <span class="incorrectanswermark" style="color:red; display: none; font-size: 120%;">✗</span></input>
</label>
</div>
<br/>
<br/>
<br/><br/>
<div class="submitter">Please Click Me</div>
<input type="submit" id="samplesubmitbutton" value="Click Me" style="width:300px;"> ///Don't Need this
</form>
THIS IS THE SECOND OF THE CLASS: Harbors SecondProblem
<form class = "classtest" action="frameworkplayground.php" method="POST">
<input type="hidden" name="hiddeninput" value="SecondProblem">
This is functionsquestionform2 Select the correct answer.
<div class="blahblah" id="questions">
<label>
<input type="radio" id="blah" name="functions_question2" value="2"> This is the correct answer. <span class="correctanswermark" style="color:green; display: none; font-size: 150%;">✓</span><span id="correctanswermarkwhengotwrong" style="color:black; display: none; font-size: 120%;">← Actually, this is the correct answer.</span></input>
</label>
<label>
<input type="radio" id="blah" name="functions_question2" value="1"> Wrong. <span class="incorrectanswermark" style="color:red; display: none; font-size: 120%;">✗</span></input>
</label>
<label>
<input type="radio" id="blah" name="functions_question2" value="3"> Wrong. <span class="incorrectanswermark" style="color:red; display: none; font-size: 120%;">✗</span></input>
</label>
</div>
<br/>
<br/>
<br/><br/>
<input type="submit" id="samplesubmitbutton" value="Click Me" style="width:300px;">
</form>
<?php
$_SESSION['functions_question2']=2;
?>
</div>
<script type='text/javascript'>
$(function(){
var selectorvar = "<?php echo $selectorfirst[0]; ?>"
var selectorvar1=selectorvar;
$('input[value="'+selectorvar1+'"]').closest("form").css("display", "none"); ///Use "display","block" to show
});
</script>
<!--////////////////////////////////////////////////////// PERCENTAGE OF SCROLLBARS THAT ARE COLORED -->
<script type='text/javascript'>
$(function(){
var carouselbutton1percentage = "<?php echo $Percentpercent; ?>"
var percentage=carouselbutton1percentage,
col1="#72CF2F",
col2="white";
var t=document.getElementById('carouselbutton1');
t.style.background = "-webkit-gradient(linear, left bottom,left top, color-stop("+percentage+"%,"+col1+"), color-stop("+percentage+"%,"+col2+"))";
t.style.background = "-moz-linear-gradient(bottom center,"+col1+" "+percentage+"%, "+col2+" "+percentage+"%)";
t.style.background = "-o-linear-gradient(bottom,"+col1+" "+percentage+"%, "+col2+" "+percentage+"%)";
t.style.background = "linear-gradient(to top,"+col1+" "+percentage+"%, "+col2+" "+percentage+"%)";
});
$(function(){
var carouselbutton2percentage=50
var percentage=carouselbutton2percentage,
col1="#F2F5A9",
col2="white";
var t=document.getElementById('carouselbutton2');
t.style.background = "-webkit-gradient(linear, left bottom,left top, color-stop("+percentage+"%,"+col1+"), color-stop("+percentage+"%,"+col2+"))";
t.style.background = "-moz-linear-gradient(bottom center,"+col1+" "+percentage+"%, "+col2+" "+percentage+"%)";
t.style.background = "-o-linear-gradient(bottom,"+col1+" "+percentage+"%, "+col2+" "+percentage+"%)";
t.style.background = "linear-gradient(to top,"+col1+" "+percentage+"%, "+col2+" "+percentage+"%)";
});
</script>
<!--////////////////////////////////////////////////////// USES PHP CONDITIONS TO CHANGE VISIBILITY OF DIV IN ANSWERS -->
<script type='text/javascript'>
$(function(){
leveldeterminant="<?php echo $FunctionsLevelTEST; ?>"
consistencydeterminant="<?php echo $FunctionsConsistencyTest; ?>"
scoredeterminant="<?php echo $scoreTest; ?>"
if (leveldeterminant == 0 && consistencydeterminant <3) {
$("#oneasystayeasy").fadeIn('fast');
} else if (leveldeterminant == 0 && consistencydeterminant == 3 && scoredeterminant == 2) {
$("#oneasygohard").fadeIn('fast');
} else if (leveldeterminant == 1 && scoredeterminant <0) {
$("#onhardgoeasy").fadeIn('fast');
} else if (leveldeterminant == 1 && scoredeterminant >-1) {
$("#onhardstayhard").fadeIn('fast');
}
});
function get_user_scores(){
//The function for retrieving the user's data from the ajax module
$.get("ajax.php?module=user_scores").done(function(data){
//after making the request and getting the JSON data, we parase it, and we save it into our variables
var data = JSON.parse(data);
leveldeterminant = data.FunctionsLevel;
consistencydeterminant = data.FunctionsConsistency;
scoredeterminant = data.score;
if(data.FunctionsLevel==0 && data.FunctionsConsistency < 3){
$("#easytohard").show();
}
});
}
</script>