使用 AJAX 的 JQuery / PHP 调用不起作用答案

【问题标题】：JQuery / PHP call with AJAX not working使用 AJAX 的 JQuery / PHP 调用不起作用
【发布时间】：2011-11-16 15:24:39
【问题描述】：

我一直在尝试获取这个非常简单的示例，该示例将 AJAX 与 JQuery 和 PHP 一起使用，但没有成功 (here's the page for the sample)。我看过很多类似描述的帖子，但没有一个有帮助......

我已经完全复制了代码，但是我应该在成功时运行的函数从未被调用过。作为一个实验，在对 $.post 的调用中，我注释掉了数据部分 ({sendValue:str}) 和 JSON 部分，并在成功函数的主体中添加了一个警报，以查看它是否被调用了。所以我猜我创建数据的方式有问题吗？我还尝试在警报中显示从 AJAX 调用返回的数据，结果显示为“未声明”（data.returnValue）。

这是我的代码的副本，您可以通过上面的链接查看完整示例，也可以在此处查看教程作者的工作示例：http://www.devirtuoso.com/Examples/jQuery-Ajax/

jQuery:

        $(document).ready(function(){
            $('#txtValue').keyup(function(){
                sendValue($(this).val());
            });
        });

        function sendValue(str){
            $.post("ajax.php",
                   { sendValue: str },
                   function(data){
                       $('#display').html(data.returnValue);
                   },
                    "json"
            );
        }

PHP：

<?php

//Get Post Variables. The name is the same as
//what was in the object that was sent in the jQuery
if (isset($_POST['sendValue'])){
    $value = $_POST['sendValue'];  
}else{
    $value = "";
}

//Because we want to use json, we have to place things in an array and encode it for json.
//This will give us a nice javascript object on the front side.
echo json_encode(array("returnValue"=>"This is returned from PHP : ".$value));

?>

HTML：

    <body>

    <p>On keyup this text box sends a request to PHP and a value is returned.</p>

    <label for="txtValue">Enter a value : </label><input type="text" name="txtValue" value="" id="txtValue">

    <div id="display"></div>

</body>

谢谢！

编辑：我将我的 $.post 重写为一个带有错误函数的 $.ajax。我肯定会遇到错误函数，错误是解析错误 - 我猜它来自我的 PHP 脚本，当我调用 json_encode 时......这是来自 firebug 的屏幕截图 - 有人有更多想法吗？：

Screenshot 1 - firebug console

Screenshot 2 - firebug watch window

顺便说一句，感谢您提供的所有帮助，非常感谢。

【问题讨论】：

您是否尝试过在 PHP 中尽早回显或 var_dumping，然后退出以查看您的 post 调用是否到达正确的位置 (ajax.php)？
@csjohn 我现在就试一试，让你知道会发生什么......
在您的代码中有 ajax.php - 这是读取值吗？如果不能，请告诉我们真正的价值是什么？
@ManseUK 是的，这是真正的价值。我只是将 $.post 调用重写为“POST”类型的 $.ajax 调用，并给它一个成功函数和一个错误函数——我添加到成功函数的警报被击中。然后我尝试输出 data.returnValue ，它应该给了我从 PHP 文件返回的字符串，但它显示为“未定义”。认为我需要坐下来与萤火虫一起完成所有事情 - 我会更新我的进度。干杯

标签： php jquery html ajax json

【解决方案1】：

我注意到var str = $('#txt').val(); 会给你一个错误，因为$('#txt') 不存在，它应该是$('#txtValue')。

查看您的代码后，一切看起来都应该如此，我下一步将尝试通过在 JavaScript 中使用一些 console.debug() 和在 PHP 中使用一些 echo 来调试您的代码。我建议你为 Chrome/Firefox 获取 Firebug，如果使用 IE 升级到 IE9 并使用他们的开发者工具。使用上述工具可以让您更好地了解代码的执行方式。

我的第一步是确保按键启动：

 $(document).ready(function(){
        $('#txtValue').keyup(function(){
            alert('keyUp');
            sendValue($(this).val());
        });
 });

第二步是确保 sendValue 正在触发：

function sendValue() {
    alert('sendValue');
    var str = $('#txt').val();
    tmr = null;


    $.post(
        'test.php', 
        { sendValue: str }, 
        function(data) { 
            alert('inside post');
            $('#output').html(data.returnValue); 
        }, 
        'json'
    );
}

【讨论】：

干杯 - 我可以确认 keyup 有效并且调用了 sendValue 函数。然而，$.post 函数的成功函数没有被调用——我想我需要检查我的 PHP ......跟踪从 JQuery 到 PHP 的数据流并返回的最佳方法是什么？我可以在 firebug 中观看 AJAX 消息吗？ - 抱歉，如果这是一个愚蠢的问题，我通常从不离开我的 .Net 阵营！我的 IDE 呢！！？？
是的，你可以解决。请参阅 Firebug 的 ajax。尝试在 tmr = null 之后放置另一个警报（'after tmr = null'）；我认为当您尝试访问 $('#txt') 的 .val() 方法时出现错误，因为从您发布的代码中 $('#txt') 不存在，实际的 id输入字段为 txtValue，您可能需要将其更改为 $('#txtValue').val()
我认为你误读了它 - 我肯定使用 $('#txtValue') 然后我在 keyup 函数中使用 $(this).val() ......有趣的是我只是重写了我的帖子调用，看起来像这样，成功的函数会触发，但 data.returnValue 的值是“未定义”：
function sendValue(str) { $.ajax({ type: 'POST', url: 'ajax.php', datatype: 'json', data: { sendValue: str }, 成功: function (data) { alert(data.returnValue); }, error: function(){ alert("SOME ERROR"); } }); }
尝试在success函数里面做：for(prop in data){ alert(data[prop]); } 也试试 data[0].returnValue

【解决方案2】：

没有看到更多各种元素输出的内容，我想我不能告诉你要修复什么，但这个例子与你的相似（尽管它是一个多合一的 PHP 文件而不是两个，因为在你的例子中）。我还添加了一个 350 毫秒的超时时间，以允许用户在不让页面每次击键时都执行 AJAX 请求的情况下进行输入。一旦他们暂停，它就会获取数据。

来源test.php

<?php

if(isset($_POST['sendValue']))
{
    echo json_encode(
        array('returnValue' => 
              'Returned: ' . $_POST['sendValue']));
    exit();
}

?>
<!DOCTYPE html 
    PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>AJAX Sample</title>
</head>
<body>

<input type="text" id="txt" />
<div id="output"></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" 
    type="text/javascript"></script>
<script type="text/javascript">

var tmr = null;

$(function () {
    $('#txt').keyup(function() {
        if(tmr != null)
            clearTimeout(tmr);
        tmr = setTimeout("sendValue()", 350);
    });
});

function sendValue() {
    var str = $('#txt').val();
    tmr = null;

    $.post(
        'test.php', 
        { sendValue: str }, 
        function(data) { 
            $('#output').html(data.returnValue); 
        }, 
        'json'
    );
}
</script>
</body>
</html>

【讨论】：

【解决方案3】：

致所有来到这里寻找类似问题答案的人：

我尝试了一些事情来弄清楚发生了什么，调试消息等，一切看起来都很好。然后我将我的代码部署到一个运行 apache 的虚拟机和我的网络服务器上，看看它是否是一个环境问题。我的代码在我的网络服务器和虚拟盒子上运行。然后我意识到我的开发系统上有两个相互冲突的 PHP 安装。我不知道为什么，但这是导致问题的原因，但将它们都回滚并在开发系统上重新安装 WAMP 就可以解决问题。

【讨论】：

【解决方案4】：

试试这个

$(document).ready(function(){ 
    $('#txtValue').keyup(function(){ 
        $.post("ajax.php",{ sendValue: str },   function(data){ 
        $('#display').html(data.returnValue); 
    }, 
    "json" 
    ); 
}); 
});

【讨论】：

反正也没用。它在功能上与您的示例等效，但没有额外的函数调用，并引入了未定义的字符串 str 而不是使用文本框中的值。