使用jQuery的ajax获取带参数的请求，返回页面内容

Posted 2021-04-25

我正在尝试使用jQuery的get函数来调用我的php脚本。 php脚本返回一个变量，其中包含我页面主要内容的构建模板减去我的静态页眉/页脚。

我想使用返回的内容替换“旧”页面内容而不重新加载页面。任何人都可以指出我正确的方向，我在哪里错了吗？我的代码如下......

jQuery的：

function getData(time, type) {
     $.ajax({
            type: "GET",
            url: "getData.php",
            data: "time=" + time + "&type=" + type,
            success: function(data){
               $('#pageContent').fadeOut("slow");
               $('#pageContent').html(data);
               $('#pageContent').fadeIn("slow");
     }
    });
    return false;
}

访问getdata.php（转述）：

    ....

    $time = empty($_GET['time']) ? '' : $_GET['time'];
    $type = empty($_GET['type']) ? '' : $_GET['type'];
    echo getData($time, $type);

    function getData($time, $type)
    ......
        .....
            $tmpl = new Template();
            $tmpl->time= $time;
            $tmpl->type = $type;
            $builtpage = $tmpl->build('index.tmpl');
            return $builtpage;
        .....
    ......

jQuery函数调用：

<a href="#" onclick="getData('<?php print $tmpl->time; ?>', 'Orange')">Orange</a>
<a href="#" onclick="getData('<?php print $tmpl->time; ?>', 'Apple')">Apple</a>
<a href="#" onclick="getData('<?php print $tmpl->time; ?>', 'Banana')">Banana</a>

当我点击任何链接时，ajax似乎运行正常，页面确实拒绝重新加载，但内容仍然保持不变......任何人都知道是什么了？

答案

首先在success函数中，检查以确保您正在接收您要查找的内容：

success: function(data){
  alert(data);
}

同样在php文件中，尝试将其置于脚本之上：

header("Content-Type: text/html");

并尝试修改您的代码，如：

success: function(data){
  $('#pageContent').html(''); // remove what was before
  $('#pageContent').fadeOut("slow");
  $('#pageContent').html(data);
  $('#pageContent').fadeIn("slow");
}

另一答案

Ajax运行不正常：

<a href="#" onclick="getData("<?php print $tmpl->time; ?>", "Orange")">Orange</a>
                             ^
                             End of attribute value here

使用validator并正确嵌套引号（通过在"和'之间切换或使用实体）。