2016-06-17 9 views
1

ウェブ開発スキルを学ぶための小さなプロジェクトとして、私はローカルネットワーク上でデータベースをアクセス可能にしています彼らが作った賭けのための他のもの。私は同じディレクトリ内のPHPファイルを介してデータベースにアクセスするために、jQuery get()とpost()関数を使用しようとしています。jQuery.get()は関数ではありません - 正しく読み込まれ、noConflict()を試しました

console.log(jQuery.now()); 

と言って、jQueryが正しく読み込まれていることを確認しました。これにより、現在の時刻が正しく返されます。ブラウザが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()は機能しませんでした。ここで

は私のhtmlの全体です:

<!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); 
?> 
+3

JSでは大文字と小文字が区別されます。正しいメソッド名は小文字の 'get()'と 'post()'です。 –

+1

クライアント側の「Uncaught TypeError:jQuery.GETは関数ではない」というエラーを尋ねるときに、PHPをすべて表示する必要はありませんでした。 – nnnnnn

答えて

1

JavaScript関数は大文字と小文字が区別されます - むしろjQuery.GET()よりも、あなたはjQuery.get()を使用する必要があります。

これは他の方法についても同様であることに注意してください(例:jQuery.post())。

関連する問題