作为一个学习网络开发技能的小项目,我正在本地网络上创建一个数据库,用于存储员工相互之间的赌注。我正在尝试使用jQuery get()和post()函数通过同一目录中的php文件访问数据库。我已经通过说
验证了正确加载了jQueryconsole.log(jQuery.now());
,这会正确返回当前时间。但是,当浏览器尝试执行jQuery.GET()时,我在控制台中收到一条错误消息
Uncaught TypeError: jQuery.GET is not a function
一位同事和我一直在四处寻找,在这一点上对于可能造成这种情况的原因感到非常难过,特别是因为我尝试过这样做
noconf = jQuery.noConflict();
console.log(noconf.now()); //this worked and again printed out the time in the console
但是noconf.GET()没有用。
以下是我的全部内容:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="Office bet database">
<link rel="icon" href="favicon.ico">
<title>Payback</title>
<!-- Bootstrap core CSS -->
<link href="bootstrap-3.3.6/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="starter-template.css" rel="stylesheet">
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
function updateBoard(htmlData) {
var board = document.getElementById('boardDiv');
board.innerHTML = htmlData;
}
function initializeBoard() {
jQuery.GET('retrieve.php',null,function (data) {
updateBoard(data);
});
}
jQuery(document).ready(function () {
jQuery('form[name=debtForm]').submit(function(event) {
var winnerInput = document.getElementById("winnerEntry").value;
var loserInput = document.getElementById("loserEntry").value;
var itemInput = document.getElementById("itemEntry").value;
var quantityInput = document.getElementById("quantityEntry").value;
var descriptionInput = document.getElementById("descriptionEntry").value;
event.preventDefault(); //prevents the default form submission routine
jQuery.POST('retrieve.php',{
winner: winnerInput,
loser: loserInput,
item: itemInput,
quantity: quantityInput,
description: descriptionInput
},
function (data) {
updateBoard(data)
});
});
});
</script>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"/>
<span class="icon-bar"/>
<span class="icon-bar"/>
</button>
<a class="navbar-brand" href="#">Payback Board</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">
<a href="#">Home</a>
</li>
<li>
<a href="#about">About</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="starter-template">
<h1>Payback Board</h1>
<p class="lead">Keep track of what co-workers owe you.</p>
<p>
<button class="btn btn-primary btn-lg" type="button" data-toggle="collapse" data-target="#collapseForm" aria-expanded="false" aria-controls="collapseForm">
Upload a Debt
</button>
<div class="collapse" id="collapseForm">
<div class="well">
<form name='debtForm'>
<div class="form-group">
<div class="row">
<div class="col-md-2">
<label for="winnerEntry">Winner</label>
<input type="text" class="form-control" name="winner" id="winnerEntry">
</div>
<div class="col-md-2">
<label for="loserEntry">Loser</label>
<input type="text" class="form-control" name="loser" id="loserEntry">
</div>
<div class="col-md-2">
<label for="itemEntry">Item Owed</label>
<input type="text" class="form-control" name="item" id="itemEntry">
</div>
<div class="col-md-1">
<label for="quantityEntry">Quantity</label>
<input type="text" class="form-control" name="quantity" id="quantityEntry">
</div>
<div class="col-md-5">
<label for="descriptionEntry">Description</label>
<input type="text" class="form-control" name="description" id="descriptionEntry">
</div>
</div>
<br><button type="submit" class="btn btn-primary">Submit</button><!--data-toggle="collapse" data-target="#collapseForm"-->
</div>
</form>
</div>
</div>
</p>
<div id='boardDiv'>Loading Current Board...</div>
<script>initializeBoard()</script>
<p>some stuff to go below table</p>
</div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
<script src="bootstrap-3.3.6/dist/js/bootstrap.min.js"></script>
</body>
</html>
这是我的retrieve.php文件:
<?php
$dbconn = pg_connect("host=localhost dbname=payback user=postgres password=pingpong")
or die('Could not connect: ' . pg_last_error());
if ($_POST) {
$winner=$_POST['winner'];
$loser=$_POST['loser'];
$item=$_POST['item'];
$quantity=$_POST['quantity'];
$description=$_POST['description'];
$query = "INSERT INTO debts VALUES (NOW(),'$winner','$loser','$item','$quantity','$description')";
$result = pg_query($query) or die('Query failed: ' . pg_last_error());
pg_free_result($result);
}
$query = 'SELECT * FROM DEBTS';
$result = pg_query($query) or die('Query failed: ' . pg_last_error());
echo "<table class='table'>",
"<thead>\n",
"<tr><th>Date</th><th>Winner</th><th>Loser</th><th>Item</th><th>Quantity</th><th>Description</th>\n</tr>",
"\n<thead>",
"\n<tbody>";
while ($line = pg_fetch_array($result, null, PGSQL_ASSOC)) {
echo "\t<tr>\n";
$col_num = 0;
foreach ($line as $col_value) {
if ($col_num == 0) {
$year = substr($col_value,0,4);
$date = substr($col_value,5);
$timestamp = $date + "-" + $year;
echo "\t\t<td>$date-$year</td>\n";
}
else {
echo "\t\t<td>$col_value</td>\n";
}
$col_num++;
}
echo "\t</tr>\n";
}
echo "</tbody>\n</table>\n";
pg_free_result($result);
pg_close($dbconn);
?>
答案 0 :(得分:1)
Javascript函数区分大小写 - 而不是jQuery.GET()
,您应该使用jQuery.get()
。
请注意,这也适用于其他方法(例如jQuery.post()
)。