AJAX不工作的JQuery/PHP调用

我一直在试图得到这个使用AJAX与JQuery和PHP一起工作没有运气（here's the page for the sample）的非常简单的例子。我已经看了不少有类似dispost的帖子，但都没有帮助...AJAX不工作的JQuery/PHP调用

我已经复制了代码，但我的功能应该在成功上运行，永远不会被调用。作为一个实验，在$ .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 ...这是萤火虫的截图 - 任何人有更多的想法？：

Screenshot 1 - firebug console

Screenshot 2 - firebug watch window

screen grab of firefox console screen grab of watch on error function

感谢所有帮助迄今为止的方式，真的很感激。

来源

2011-11-16 james lewis

您是否在PHP的早期尝试了echoing或var_dumping，然后退出以查看您的发布后调用是否将其发送到适当的位置（ajax.php）？ – csjohn

@csjohn我会给你一个去吧，让你知道发生了什么... –

你的代码中你有ajax.php - 这是读取值？如果不是，请告诉我们真正的价值是什么？ – ManseUK

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

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

我的第一个步骤将是确保该KEYUP被解雇：

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

来源

2011-11-16 16:09:51

干杯 - 我可以确认keyup是否有效，并且调用了sendValue函数。然而，$ .post函数的成功函数并没有被调用 - 我想我需要检查我的PHP ...遵循从JQuery到PHP的数据流并返回的最佳方式是什么？我可以在firebug中观看AJAX消息吗？ - 对不起，如果这是一个愚蠢的问题，我从来不会偏离我的.Net阵营！我的IDE在哪里？ –

是的，你可以戴夫。看到Firebug的ajax。尝试在tmr = null之后放置另一个警报（'tmr = null'之后）;我认为当你尝试访问$（'＃txt'）的.val（）方法时，你会得到一个错误，因为你发布的$（'＃txt'）代码不存在，实际的ID输入字段是txtValue，你可能需要将它改为$（'＃txtValue'）。val（） –

我认为你误解了它 - 我肯定使用$（'＃txtValue'），然后我使用$ （this）.val（）在keyup函数中......有趣的是我只是重写了我的post调用，看起来像这样，并且成功触发函数，但data.returnValue的值是“undefined”： –

-1

试试这个

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

来源

2011-11-16 15:33:43 run

行 - 试过这个，仍然没有快乐... –

反正它没有帮助。它在功能上等同于你的例子，但没有额外的函数调用，并引入了一个未定义的字符串'str'，而不是使用你的文本框中的值。 –

没有看到您的更多不同的元素输出什么，我不认为我可以告诉你解决什么，但这个例子与你相似（虽然它是一个全如您的示例中所示），而不是两个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>

来源

2011-11-16 15:58:09

要人谁得到这里寻找对于类似问题的回答：

我尝试了几件事情来弄清楚发生了什么，调试消息e TC和一切看起来不错。然后，我将代码部署到运行apache的虚拟框和我的Web服务器，以查看它是否是环境问题。我的代码在我的Web服务器和虚拟盒子上工作。然后我意识到我在开发系统上安装了两个相互矛盾的PHP。我不确定为什么，但是这是造成这个问题的原因，但是将它们都回滚并重新安装在开发系统上的WAMP也有诀窍。

来源

2011-11-26 20:17:54

AJAX不工作的JQuery/PHP调用

回答

相关问题