使用AJAX的jQuery / PHP调用不起作用
[英]JQuery / PHP call with AJAX not working
问题描述
我一直在尝试获得这个非常简单的示例，该示例将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。 我肯定是在点击错误函数，错误是一个解析错误-我猜这是我调用json_encode时来自我的PHP脚本的...这是萤火虫的屏幕截图-任何人还有其他想法吗？：
到目前为止，感谢您提供的所有帮助，非常感谢。
4 个解决方案
解决方案1
1 已采纳 2011-11-16 16:09:51
我注意到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'
);
}
解决方案2
0 2011-11-16 15:58:09
在看不到您的各种元素输出的更多信息的情况下，我认为无法告诉您要解决的问题，但是此示例与您的示例相似（尽管它是一个多合一的PHP文件，而不是您的示例中的两个文件） ）。 我还添加了一个350ms的超时时间，以允许用户键入内容而无需页面在每次击键时都进行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
0 2011-11-26 20:17:54
对于来到这里寻找类似问题答案的任何人：
我尝试了一些事情来弄清楚发生了什么，调试消息等，一切看起来都很好。 然后，我将代码部署到运行apache的虚拟盒子和Web服务器上，以查看是否属于环境问题。 我的代码可以在我的Web服务器和虚拟机上使用。 然后，我意识到在开发系统上有两个相互矛盾的PHP安装。 我不知道为什么，但是这是导致问题的原因，但是将它们回滚并在开发系统上重新安装WAMP可以解决问题。
解决方案4
-1 2011-11-16 15:33:43
尝试这个
$(document).ready(function(){
$('#txtValue').keyup(function(){
$.post("ajax.php",{ sendValue: str }, function(data){
$('#display').html(data.returnValue);
},
"json"
);
});
});
PHP，jQuery Ajax调用不起作用
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.