jQuery.get()不是一个函数 - 正确加载jQuery并尝试noConflict()

时间:2016-06-17 22:57:54

标签: javascript jquery

作为一个学习网络开发技能的小项目,我正在本地网络上创建一个数据库,用于存储员工相互之间的赌注。我正在尝试使用jQuery get()和post()函数通过同一目录中的php文件访问数据库。我已经通过说

验证了正确加载了jQuery
console.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);
?>

1 个答案:

答案 0 :(得分:1)

Javascript函数区分大小写 - 而不是jQuery.GET(),您应该使用jQuery.get()

请注意,这也适用于其他方法(例如jQuery.post())。