使用Ajax()函数调用jQuery ajax不起作用

时间:2013-03-14 14:15:25

标签: php ajax jquery

这是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>

和page.php:

<?php if (isset($_GET['city'])) echo 'you selected '.$_GET['city']; ?>

选择的城市应显示“您选择”,然后显示城市名称。但它没有做任何事情......

2 个答案:

答案 0 :(得分:2)

您没有发送数据...此处的数据未定义...将您的代码var city = "city=" + city;更改为var data= "city=" + city; ..并且您将获得响应作为数据..所以替换

jQuery("#my_div").html(html);

jQuery("#my_div").html(data);

试试这个

 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
            });             
        });

答案 1 :(得分:1)

你可以使用速记......但这里真正的问题是两个变量是“未定义”。 未定义html变量,也没有如前所述的数据变量。

试一试

   $('#city').change(function() {
        var data= "city=" + $('#city').val();
        $.ajax({
            url: 'page.php', 
            type: 'GET',
            data: data,
            success: function(html){ 
                $("#my_div").html(html); 
            }
        });             
    });