php - 我的 jQuery .ajax 脚本没有将 html 放在 div 中

Question

我遇到问题，当我单击“.page”按钮时，news.php 脚本的内容没有出现在“#newsdiv”中。 Firebug 并没有说有一些错误，当我在浏览器中运行 news.php 时，它很容易从 MySQL 中提供数据，所以这是 js 错误，我找不到哪里出错了，有人可以帮助我吗？

刚刚写了一些代码:

$(document).ready( function() {
        $('a.page').click(function() {
            var value = $(this).text();
            var result = null; 
            var scriptURL = "/ajax.executable.files/news.php?page=" + value; //url for ajax
            $.ajax({
                url: scriptURL,
                type: 'get',
                dataType: 'html',
                async: true,
                success: function(data) {
                        $('#newsdiv').html(data);   
                } 
            });
        });
});

PHP:

<?php
    mysql_connect('xxx', 'xxx', 'xxx');
    mysql_select_db('xxx');
    mysql_query('SET NAMES \'utf8\'');
    mysql_query("SET NAMES utf8");
    mysql_query("SET CHARACTER SET utf8");
    mysql_query("SET collation_connection = utf8_polish_ci");
    
    if(isset($_GET['page'])){
        $page = mysql_real_escape_string($_GET['page']);
    }
    else{
        $page = 1;
    }
    
    $page = $page - 1;
    $ile = 2;
    
    $od = $page * $ile;
    
    $sql = "SELECT * FROM xxx LIMIT $od, $ile";
    $sql = mysql_query($sql) or die(mysql_error());
    
    while($row = mysql_fetch_array($sql)){
        ?>
        <div class="newsholder">
                <div class="newsheader">
                    <h1><?php echo $row['title']; ?></h1>
                    <h2><?php echo $row['subtitle']; ?></h2>
                </div>
                <div class="newscontent">
                    <div class="<?php $result = $id % 2; if($result != 0){ echo("rightsideimg"); } else{ echo("leftsideimg"); } ?>">
                        <img src="<?php echo $row['image']; ?>" />
                    </div>
                    <div class="<?php $result = $id % 2; if($result != 0){ echo("leftsidesontent"); } else{ echo("rightsidecontent"); } ?>">
                        <?php echo $row['content']; ?>
                    </div>
                    <div class="clearfix"></div>
                </div>

                <div class="newsfooter">
                    <div class="newsgooterright">
                        <div class="button">
                            Czytaj wiecej
                        </div>
                    </div>
                    <div class="newsgooterleft">
                        <small>napisal <b><?php echo $row['author']; ?></b> dnia 26-11</small>
                    </div>
                </div>
            </div>
        <?php
    }
    
    
    
    
    

?>

以及用于制作按钮的 php

<?php
                    $offset = ceil($count / $ile);
                    for($i = 1; $i <= $offset; $i++){
                        echo("<a class=\"page\" href=\"javascript:void(0);\"><div class=\"page\">" . $i . "</div></a>");
                    }
                ?>

所有文件的放置方式如下:

root/index.php 包含要单击的元素

root/ajax.executable.files/news.php 与 php 脚本

root/jscripts/news.js 以及用于使用 news.php 的 js

脚本正在使用的所有文件

Answer 1

你必须return false;在单击事件内，否则单击会向上传播层次结构，并且如果存在任何 HREF 值(或者即使为空)，最终将重新加载页面。

所以，在$.ajax({...});之后做一个return false;事情应该没问题。

编辑:

将上面的脚本更改为以下内容并查看:

$(document).ready( function() {
    $('a.page').click(function() {
        var value = $(this).text();
        var scriptURL = "/ajax.executable.files/news.php?page=" + encodeURIComponent(value); //url for ajax
        $.ajax({
            url: scriptURL,
            type: 'get',
            dataType: 'html',
            async: true,
            success: function(data) {
                    $('#newsdiv').html(data);   
            } 
        });
        return false;
    });
});

另一个编辑:

既然你有 <div>里面a标签，value = $(this).text()实际上会返回值 <div>1</div>而不是 1。因此，删除 <div>标记以及最后一个代码部分如下:

for($i = 1; $i <= $offset; $i++) {
    echo("<a href=\"\" class=\"page\" onclick=\"return false;\">".$i."</a>");
}

这应该确保 ajax url 是 ..../news.php?page=$i .