jQuery，JavaScript - 网络错误？

Question

I am working on building a Javascript/jQuery and AJAX website. However, while testing I am encountering the following error:

Timestamp: 6/11/2016 10:13:45 AM
Error: NetworkError: A network error occurred.

To me, the most obvious culprit would be the AJAX call made in my script; however, I tried commenting it out and still received the same error. When the website is first loaded it displays three alert boxes (selection=category&detail=test, and so on), but then the error appears and changing the selection does not trigger the alert.

Here is my main page:

<?php
include('header.php');
?>

<div id='mainContent'>

<?php /* if(!$_SESSION['admin']) {
echo "<p>You do not have permission to view this page!</p>";
} else { */
echo "<form method='post' action='addItem.php'> 

<div class='form-group'>
<label>Category</label>
<select id='categorySelection' name='categorySelection'>
<option value=1>Playstation</option>
<option value=2>Wii</option>
<option value=3>Gamecube</option>
<option value=4>N64</option>
<option value=5>Other Console</option>
<option value=6>DS</option>
<option value=7>Game Boy</option>
<option value=8>Other Handheld</option>
<option value=9>DVD</option>
</select>
</div>

<div class='form-group'>
<label>Item</label>
<select id='itemSelection' name='itemSelection'>
</select>
</div>

<div class='form-group'>
<label>Condition:</label>
<select id='conditionSelection' name='conditionSelection'>
<option value=1>Acceptable</option>
<option value=2>Good</option>
<option value=3>Very Good</option>
<option value=4>New</option>
</select>
</div>

<div class='form-group'>
<label>Price: </label>
<input id='itemPrice' type='text' name='itemPrice' />
</div>

<div class='form-group'>
<label>Description: </label>
<textarea id='itemDescription' name='itemDescription'></textarea>
</div>
</form>";
 // }
?>

</div>
<script>

function selectionHandler(selectedAction, selectedValue) {
var gameData = "selection=" + selectedAction + "&detail=" + selectedValue;

alert(gameData);


 $.ajax({
type: 'POST',
url: 'filter.php',
data: gameData,
success: function(returnData) {

if(selectedAction == 'category') {
$('#itemSelection').html(returnData);
} if(selectedAction == 'game') {
$('#itemPrice').val(returnData)
} else {
$('itemDescription').val(returnData);
} 

} // end return
});   // end ajax 
} // end handler

$(document).ready(function() {
$("#categorySelection").on("change", selectionHandler('category', "test" ) ) ;
$("#itemSelection").on('change', selectionHandler('game',  "test" ) );
$("#conditionSelection").on('change', selectionHandler('condition',  "test" ) );

}); // end ready
</script>
<?php

include('footer.php');
?>

and my PHP

<?php
include("header.php");
$db = new pdoAccess("localhost","root","");

$selection = $_POST['selection']; // either game, category, or condition

$detail = $_POST['detail'] // either categoryID or ISBN/Item ID
if($selection == 'category') {
$products = $db->filterByCategory($detail);
$html = "";
foreach($products as $product) {
$html += "<option value={$product->upc)}>$product->title</option>";
}
return $html;
} elseif ($selection = 'game') {
return $db->getProductPrice($detail);
} else {
return $db->getCategoryDescription($detail);
}

?>

Thanks!

EDIT: It should be noted that I also tried other events such as focusout and select. Same issue.

Answer 1

In php string cocatinating is by dot . and use quotes also change here like this

 $html .= "<option value='{$product->upc)}'>{$product->title}</option>";

Also use double == to compare here

 } else if ($selection == 'game') {

Use echo in ajax instead of return