连接ajax和php无法正常工作

问题描述：

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.

答

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

答

FTFY

<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,
                        //I believe your mistake was here
                        success: function(data){
                                $('#main-unit').html(data);
                         }
                    });
            });
        });
    </script>

连接ajax和php无法正常工作

相关推荐