jQuery ajax call with Ajax() function doesn't work
Question
This is the code of index.php:
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
<script type="text/javascript">
jQuery(function () {
jQuery('#city').change(function() {
var city = jQuery('#city').val();
var data = "city=" + city;
jQuery.ajax({
url: 'page.php',
type: 'GET',
data: data,
success: function(data){ jQuery("#my_div").html(data); }
});
});
});
</script>
</head>
<body>
<select id='city'>
<option value='Paris'>Paris</option>
<option value='London'>London</option>
<option value='Rome'>Rome</option>
</select>
<div id='my_div'>
<?php require_once('page.php'); ?>
</div>
</body>
<html>
And page.php:
<?php if (isset($_GET['city'])) echo 'you selected '.$_GET['city']; ?>
Selected a city should display 'you selected ' then the name of the city. But it doesn't do anything..
2 answers
solution1
2 2013-03-14 14:18:18
you are not sending the data... data is undefined here... change your code var city = "city=" + city; to var data= "city=" + city; .. adn you are getting your response as data.. so replace
jQuery("#my_div").html(html);
with
jQuery("#my_div").html(data);
try this
jQuery('#city').change(function() {
var city = jQuery('#city').val();
var data= "city=" + city; //<--here
jQuery.ajax({
url: 'page.php',
type: 'GET',
data: data,
success: function(data){ jQuery("#my_div").html(data); } //<--here
});
});
solution2
1 2013-03-14 14:24:04
you could use shorthand... but the real issue here is two variables are "undefined". The html variable is not defined, nor was the data variable as previously mentioned.
Give this a shot
$('#city').change(function() {
var data= "city=" + $('#city').val();
$.ajax({
url: 'page.php',
type: 'GET',
data: data,
success: function(html){
$("#my_div").html(html);
}
});
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.