连接ajax和php无法正常工作

Question

what is the problem of this code? it is menu and page change by ajax with out refreshing the page, but its not working it is my ajax code

<script>
        $(document).ready(function() {
            $('.news').click(function give(id){
                $('#main-unit').text('Please Wait...');
                    var place= id;
                    $.ajax({
                        url:'pages/news.php',
                        type:'POST',
                        data:'where='+place,
                        statusCode:{
                            success: function(data){
                                $('#main-unit').html(data);
                            }
                        }
                    });
            });
        });
    </script>

this is my html tags

<ul>
   <li><a class="news" onclick=\"give('news')\" href="#">news</a></li>
</ul>

and php code

mysql_connect("localhost", "root", "")
    or die(mysql_error()); 
    mysql_select_db("basi")
    or die(mysql_error()); 
    if($_POST['where']=='news'){
        $result = mysql_query("SELECT * FROM contents WHERE type = 0");
        while ($row = mysql_fetch_array($result)){
            $title = $row['title'];
            $text = $row['text'];
            echo"
            <div class='title'><span>$title</span></div>
            <div class='content'>
            $text
            </div>
            ";
        }
    }

the information read from DB but dont return to html file.

Answer 1

The problem is with your JavaScript. You're waiting for document ready and (incorrectly) binding a click event listener that isn't being used! Try:

<a class="news" onclick="give('news')" href="#">news</a>

with the JavaScript:

<script>
    function give(id) {
        $('#main-unit').text('Please Wait...');
        var place = id;
        $.ajax({
            url:'pages/news.php',
            type:'POST',
            data:'where='+place,
            statusCode:{
                success: function(data){
                    $('#main-unit').html(data);
                }
            }
        });
    }
</script>

A better solution would be to separate HTML from JavaScript - remove the onclick attribute from your menu link, and use pure jQuery to select it and bind an event that calls give() when it is clicked:

$(document).ready(function() {
    $('.news').click(function(e) {
        give('news');
    });
});