2011-05-25 135 views
0

我想将我的网页转换为ajax,但我不能让它返回任何东西。无法让jQuery ajax工作

HTML

<!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" xml:lang="en"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
    <title>test page</title> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script> 
<script type="text/javascript"> 
<!-- 
$(document).ready(function(){ 
    // events 
$("#test").click(function(){ 
    var myData; 
    myData = makeDataVar(); 
    sendData(myData); 
});  
    // functions 
function makeDataVar(){ 
    return "name=joe&location=bostin"; 
} 
function sendData(myData){ 
    alert("start mydata function"); 
    $.ajax({ 
     type: "POST", 
     url: "http://www.mypage.com/submitMe.php", 
     dataType : "json", 
     data: myData, 
     success: function (msg) { 
      alert("Data saved: " + nameMsg); 
      alert("Data saved: " + locationMsg); 
      alert("data saved: " + error); 
     }, 
     error : function(XMLHttpRequest, textStatus, errorThrown) { 
      alert("error " + errorThrown); 
     } 
    }); 
    alert("end mydata function");   
} 
}); // end document.ready 
//--> 
</script>  
</head> 

<body> 

<button type="button" id="test" >Add New</button> 

</body> 
</html> 

PHP

<?php 
$myVar = $_POST['name']; 
$return['nameMsg'] = "thanks $myVar"; 
$myVar = $_POST['location']; 
$return['locationMsg'] = "from $myVar"; 
$return['error'] = false; 
echo json_encode($return); 
?> 

我让所有我的javascript警报除了那些阿贾克斯声明(无论成功或错误)内。这几乎就像我的脚本跳过那一个声明。我不确定我在这里错过了什么,但我花了几个小时试图弄清楚。任何帮助你可以提供将不胜感激。

+0

'type'应该是小写字母,尽管我不确定这是您的唯一问题。 – 2011-05-25 00:36:38

+0

成功回调仅在服务器返回成功的2xx代码时调用。你确定你的服务器没有抛出任何错误吗? – scurker 2011-05-25 00:39:36

+0

@scurker - 他会得到错误状态。我知道的唯一情况是他是否试图在没有jsonp的情况下跨域执行某些操作。 XHR在那时就消失了。 – 2011-05-25 00:43:41

回答

1

我的投票是你的变量里面的成功回调是未定义的,所以该方法不编译或执行。

alert("Data saved: " + nameMsg); 
alert("Data saved: " + locationMsg); 
alert("data saved: " + error); 

nameMsglocationMsgerror不会出现在任何地方定义。这似乎伪装成一种不被执行的方法,但Firebug或Chrome的开发人员工具应该会显示错误。

如果您不尝试使用它们,您的成功回调会执行吗?只要做一个

alert("foo"); 

看看是否有效。

+0

你是正确的,修复它。我需要使用msg.nameMsg,因为msg是我的传入参数。感谢有时候,我在处理了太长时间后忽略了一些事情。 – user052211 2011-05-25 01:01:10

+0

我很高兴我的101级JavaScript可以提供帮助。我看到我的回调无法执行很多次,因为这个! – 2011-05-25 01:02:56

0

应该

$.ajax({ 
    type: "POST", 
    .... 
}); 

使用类似Firebug的检查您的JS错误。

你还需要确保你是从同一个域调用它。

+0

我也投票支持javascript错误检查。您是否在页面中定义了'nameMsg','locationMsg'和'error'? – 2011-05-25 00:44:00

+0

用户上面说过他/她已经改变了类型,但无济于事:“我修复了错字并刷新了我的页面仍然没有结束。” – mc10 2011-05-25 00:59:14

+0

我明白了。在他们评论之前我有过这个答案。 – silent1mezzo 2011-05-25 03:47:24

1

你是从www.mypage.com打这个吗?如果你不是,XHR会被吃掉,没有回报(错误或成功)。

此外,你有一个错字...'类型'应该是较低的,但不应该导致你的问题。

+0

不,我只是将这个帖子的代码更改为mypage.com。我修复了错字,并刷新了我的页面仍然没有去。 – user052211 2011-05-25 00:42:36

+0

我的问题是...你是从同一个域(和子域)打你从AJAX调用的页面吗? – 2011-05-25 00:45:02

+0

是这两个文件都在同一个目录中 – user052211 2011-05-25 00:49:40

0

也有你的PHP脚本可能会抛出一个“通知”到输出,由于可变$return不被初始化,因此没有返回有效的JSON

尝试

$return = array(); 

使用前的可能性它

0

这就是你想要的?只需复制并粘贴到您的html文件并更改链接..

<!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" xml:lang="en"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
    <title>test page</title> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script> 
<script type="text/javascript"> 
<!-- 
$(document).ready(function(){ 
    // events 
$("#test").click(function(){ 
    var myData; 
    myData = makeDataVar(); 
    sendData(myData); 
});  
    // functions 
function makeDataVar(){ 
    return "name=joe&location=bostin"; 
} 
function sendData(myData){ 
    alert("start mydata function"); 
    $.ajax({ 
     type: "POST", 
     url: "http://www.mypage.com/submitMe.php", 
     dataType : "json", 
     data: myData, 
     success: function (msg) { 
    //function returns json object not variables 
      alert("Data saved: " + msg.nameMsg); 
      alert("Data saved: " + msg.locationMsg); 
      alert("data saved: " + msg.error); 
     }, 
     error : function(XMLHttpRequest, textStatus, errorThrown) { 
      alert("error " + errorThrown); 
     } 
    }); 
    alert("end mydata function");   
} 
}); // end document.ready 
//--> 
</script>  
</head> 

<body> 

<button type="button" id="test" >Add New</button> 

</body> 
</html>