$ not defined ajax request in javascript

Question

I am trying to send a php file some values using ajax but in the call for ajax I am getting the following error

Uncaught ReferenceError: $ is not defined 

at the beginning line for the ajax request as follows:

$.ajax({
  type: "POST",
  url: 'program3.php',
  data: {
    player1name: player1name.value,
    player2name: player2name.value,
    playtopoints: playtopoints.value,
    delay: delay.value,
    numgames: numgames.value,
    gamesplayed: gamesplayed.value,
    p1turn: p1turn.value,
    p2turn: p2turn.value,
    p1total: p1total.value,
    p2total: p2total.value
  },
  success: function (data) {
    rolling = data;
  }
});            

I first thought that it might need the refrence to ajax so i added the following line before the javascript on the html page:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

but i am still getting the erro can anyone offer any insight?

Also i have the data variables all defined as follow:

var player1name = document.JForm.p1name.innerHTML;

is that the correct way to assign them?

Answer 1

The src on your script tag is invalid—at least if you're not running this from http or https . Replace

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

with

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

Answer 2

You are probably accessing the file locally, which won't work with a protocol-relative script tag.

<!-- access from http resolves to this -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<!-- local access resolves to this -->
<script src="file://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

The file wouldn't have existed locally, and the script would've never been loaded. Therefore, the variable $ would then be undefined.