PHP AJAX更新不起作用
想法 用户将从下拉列表中选择检查日期,下拉列表中填充了数据库中的数据。 选择日期后,系统将根据所选日期显示考官名单。 用户现在可以对每个学生的成绩进行编码。 编码等级后,用户将单击“保存”按钮,系统将保存到数据库中。多次更新 这是用户选择考试日期的代码PHP AJAX更新不起作用,php,jquery,ajax,database,sql-update,Php,Jquery,Ajax,Database,Sql Update,想法 用户将从下拉列表中选择检查日期,下拉列表中填充了数据库中的数据。 选择日期后,系统将根据所选日期显示考官名单。 用户现在可以对每个学生的成绩进行编码。 编码等级后,用户将单击“保存”按钮,系统将保存到数据库中。多次更新 这是用户选择考试日期的代码 <?php include '../configuration.php'; $queryselect = mysql_query("SELECT examdateno, examdate from tbl_examdate ORDER B
<?php
include '../configuration.php';
$queryselect = mysql_query("SELECT examdateno, examdate from tbl_examdate ORDER BY examdate DESC");
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>SPORT Qualifying Exam System</title>
<link rel="stylesheet" type="text/css" href="../css/style.css">
<link rel="stylesheet" type="text/css" href="../css/component.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script>
function showUser(str) {
if (str == "") {
document.getElementById("txtHint").innerHTML = "";
return;
} else {
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("txtHint").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("GET", "encodeinterviewajax.php?q=" + str, true);
xmlhttp.send();
}
}
</script>
</head>
<body>
<header>
<img src="../images/qes_logob.png" alt="logo">
<button class="hamburger">☰</button>
<button class="cross">˟</button>
</header>
<div class="menu">
<ul>
<a href="encodeinterview.php">
<li>Encode Grades</li>
</a>
<a href="viewinterview.php">
<li>View Grades</li>
</a>
<a href="../index.php">
<li>Logout</li>
</a>
</ul>
</div>
<script>
$(".cross").hide();
$(".menu").hide();
$(".hamburger").click(function () {
$(".menu").slideToggle("slow", function () {
$(".hamburger").hide();
$(".cross").show();
});
});
$(".cross").click(function () {
$(".menu").slideToggle("slow", function () {
$(".cross").hide();
$(".hamburger").show();
});
});
</script>
<div id="content">
<form>
<h1>Exam Dates</>
<select name="examdate" id="examDate" onchange="showUser(this.value)">
<option>Select Exam Date</option>
<?php
while ($row = mysql_fetch_array($queryselect)) {
echo "<option value={$row['examdateno']}>{$row['examdate']}</option>\n";
}
?>
</select>
</form>
</div>
<div id="txtHint">Examinees will be listed here</div>
</body>
</html>
这是显示和更新应该发生的地方
<?php
include '../configuration.php';
?>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="../css/component.css" />
<link rel="stylesheet" type="text/css" href="../css/style.css">
<link rel="stylesheet" type="text/css" href="../css/grid.css">
</head>
<body>
<?php
$q = intval($_GET['q']);
$sql = mysql_query("select s.sno, s.fname, s.lname, s.examdate, s.interviewgrade, s.gwa from student s inner join tbl_examdate e on s.examdate=e.examdate where e.examdateno=$q");
?>
<div class="as_wrapper">
<div class="as_grid_container">
<div class="as_gridder" id="as_gridder"></div> <!-- GRID LOADER -->
<form method="post" action="">
<table class="as_gridder_table">
<tr class="grid_header">
<td><div class="grid_heading">Student No.</div></td>
<td><div class="grid_heading">First Name</div></td>
<td><div class="grid_heading">Last Name</div></td>
<td><div class="grid_heading">Exam Date</div></td>
<td><div class="grid_heading">Interview Grade</div></td>
<td><div class="grid_heading">GWA</div></td>
</tr>
<?php
while ($row = mysql_fetch_array($sql)) {
?>
<tr class="<?php
$i+=1;
if ($i % 2 == 0) {
echo 'even';
} else {
echo 'odd';
}
?>">
<td><?php $sno[]=$row['sno'];echo $row['sno']; ?></td>
<td><?php $fname[]=$row['fname']; echo $row['fname']; ?></td>
<td><?php $lname[]=$row['lname'];echo $row['lname']; ?></td>
<td><?php echo $row['examdate']; ?></td>
<td><input type="text" size="3" maxlength="3" name="interview[]"></td>
<td><input type="text" size="3" maxlength="3" name="gwa[]"></td>
</tr>
<?php
}
?>
<tr>
<td colspan="6"><button id="btnUpdate">Save</button>
</tr>
</table>
</form>
<?php
if (isset($_POST['btnUpdate'])){
for($i=0;$i<sizeof($sno);$i++){
$interview = $_POST['interview'][$i];
$gwa = $_POST['gwa'][$i];
$sql1= mysql_query("UPDATE student SET gwa='$gwa', interviewgrade='$interview' where fname='$fname[$i]' AND lname='$lname[$i]' ");
header('Location: encodeinterview.php');
}
}
?>
</div>
</div>
</body>
正如我在评论中提到的,我不确定到底什么对你不起作用,但我可以在我猜是你的家庭作业项目中帮你做几件事 首先,在document.ready函数中,始终包装影响DOM元素的所有jQuery操作,或向DOM元素添加EventListener。当页面的所有HTML都已加载到DOM时,会触发此函数。在将事件侦听器加载到DOM之前添加事件侦听器或尝试隐藏和元素将失败。调用document.ready函数还有很长的路要走:
$(document).ready(function(){
.... Code to manipulate the DOM goes here ...
});
和做完全相同事情的速记函数调用:
$(function(){
.... Code to manipulate the DOM goes here ...
});
如果您需要等待所有附加资源(如图像)加载完毕,您可以使用:
$(window).load(function(){
.... Your code goes here ....
});
加载所有资源时会触发此功能。因此,如果要获取包含图像的元素的位置或大小,最好等到图像加载完毕。否则,一旦加载图像,位置或大小可能会发生变化
因此,jQuery块需要像这样包装:
<script>
$(function(){
$(".cross").hide();
$(".menu").hide();
$(".hamburger").click(function () {
$(".menu").slideToggle("slow", function () {
$(".hamburger").hide();
$(".cross").show();
});
});
$(".cross").click(function () {
$(".menu").slideToggle("slow", function () {
$(".cross").hide();
$(".hamburger").show();
});
});
});
</script>
那么到底是什么东西不起作用呢。您的PHP ajax调用失败了吗?它是否工作正常,但没有达到您的预期?它是否返回预期的内容,但不显示在输出div中?我知道隐藏和显示菜单的jQuery无法正常工作,但您没有提到这一点。如果您正在使用jQuery,为什么不在ajax调用中使用它呢。那么你就不必担心为不同版本的IE编码了。反正你也不必担心。IE5和IE6都死了。没有人再支持他们了。微软将在一月份放弃对IE8的支持。实际上更新数据库中的记录是不起作用的。
function showUser(str) {
if (str == "") {
$("#txtHint").html("");
return;
} else {
$.ajax({
url: "encodeinterviewajax.php?q=" + str,
type: 'GET',
success: function(data){
$('#txtHint').html(data);
},
error: function(jqXHR, textStatus, errorThrown){
console.log("Status = " + textStatus);
console.log("Error = " + errorThrown);
}
});
}