Need a way to send URL variable to PHP with jQuery

Question

So I'm trying to make a basic mockup shoe store for one of my classes, but I've been looking for a way to take a variable in the url and send it to my PHP...

This is my php:

<?php
// This block allows our program to access the MySQL database.
// Stores your login information in PHP variables
require_once 'studentdb.php';
// Accesses the login information to connect to the MySQL server using your credentials and database
$db_server = mysql_connect($host, $username, $password);
// This provides the error message that will appear if your credentials or database are invalid
if (!$db_server) die("Unable to connect to MySQL: " . mysql_error());
mysql_select_db($dbname)
 or die("Unable to select database: " . mysql_error());
if(isset($_GET['model_id']) && is_generic($_GET['model_id'])) {
 $model_id = $_GET['model_id'];
 $result = mysql_query('CALL shoes(`'.$model_id.'`);');
 $row=mysql_fetch_array($result);
 echo $row['size'];
}
?>

and I was trying to get it to work with JavaScript/jQuery/ajax, but I couldn't find a method to get model_id (which is in the form of a setup) and pass it back to the PHP.

<script>
 $("a").click(function(e) {
 e.preventDefault;
 var shoePrice = $(this).attr('href');
 history.pushState({}, '', $(this).attr("href"));
 $("a").attr('data-title', shoePrice);
 return false;
 });
</script>

Example of my tag:

<a href="?model_id=1" data-largesrc="images/shoe1.jpg" data-title="Test" data-description="Shoe description here" data-price="Price here"><img src="images/thumbs/shoe1.jpg" alt="img01"/>

PS: This is all in the same file..

EDIT:

Old PHP loop -

$model_id = isset($_GET['model_id']) ? $_GET['model_id'] : 0;
if($_GET["model_id"] === "") echo "model_id is an empty string \n";
if($_GET["model_id"] === false) echo "model_id is false \n";
if($_GET["model_id"] === null) echo "model_id is null \n";
if(isset($_GET["model_id"])) echo "model_id is set \n";
if(!empty($_GET["model_id"])) echo "model_id is not empty \n";
if(isset($model_id)) {
 $query = 'SELECT size, price, style FROM shoes WHERE model_id='.$model_id;
 $search1 = 'SELECT * FROM shoes WHERE model_id='.$model_id;
 $abc = mysql_query($search1);
 $result = mysql_query($query);
 // The mysql_num_rows function returns an integer representation of number of rows for the table passed as an argument
 $number_of_requests = mysql_num_rows($result);
 if(! $result) {
 die('Could not get data: ' . mysql_error());
 }
 while($row = mysql_fetch_array($result, MYSQL_ASSOC)) {
 echo "Shoe ID: {$row['model_id']} <br>".
 "Shoes Size: {$row['size']}<br>".
 "Shoe Price: {$row['price']}<br>".
 "Shoes Style: {$row['style']}<br>";
 }
 while($row = mysql_fetch_assoc($abc)) {
 $size = $row['size'];
 }
}

• charlietfl: is the full search query already in the href? If not what is being sent as value? ...show html for <a>
• liquidsystem: @charlietfl sorry about that, I'll update the code with it.
• steve klein: What is the format of the URL? You do know you can use ` parse_str($_SERVER['QUERY_STRING']);` to extract query string parameters in PHP?
• charlietfl: @steveklein why go to the extra effort?
• steve klein: As long as the jQuery works it is immaterial, but the (one line) PHP I gave is a very common way to extract query string parameters in PHP. Just wanted to make sure the OP understood that.

Answer 1

Assuming you are sending request to same page as the href shows all you need is a $.get in the click handler

$("a").click(function(e) {
 e.preventDefault;
 var shoePrice = $(this).attr('href');
 history.pushState({}, '', $(this).attr("href"));
 $("a").attr('data-title', shoePrice);
 $.get(shoePrice , function(serverResponse){
 // do something here with response
 })
});

,ドルget is a shorthand method for $.ajax.

If you are receiving json can replace $.get with $.getJSON

• liquidsystem: Okay, well we were just given some default PHP that didn't really do much, and we haven't learned functions with PHP, is it the same thing?
• charlietfl: This would retrive what you show in the php, although I suspect you need an href that points at that file, otherwise request will go to the current page
• liquidsystem: The PHP/JS/HTML are all in the same file, called "test.php"
• charlietfl: php code shown doesn't show output of anything other than the echo $row['size']; which is fine if that's what you are needing from the ajax. I don't see where it outputs the full page
• liquidsystem: That's all that's there... I removed the while loop from before.... I can add it in a comment

Answer 2

Here is what I've actually come up with, this is the final version that works... Thank you for your help, but I had to dig deeper to figure it out.

<script>
 function parseData(html) {
 var json = {};
 $.each(document.getElementsByTagName("div"), function(index, value) {
 json[value.id] = value.innerHTML;
 });
 return json;
 };
 $("a").click(function(e) {
 e.preventDefault();
 var href = $(this).attr("href");
 history.pushState({}, '', $(this).attr("href"));
 $.get("/~huntcki3/test.php"+$(this).attr("href"), function(data) {
 var info = JSON.parse(data);
 console.log(info);
 console.log(href);
 $("div.og-details h3")[0].innerHTML = info.name;
 $("div.og-details p")[0].innerHTML = info.style+'<br>' + 'Size: ' + info.size+'<br>' + '$' + info.price+' USD';
 });
 });
 </script>