无法使jQuery ajax正常工作

问题描述

| 我正在尝试将我的网页转换为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);
?>

除了ajax语句中的警报（无论成功还是错误），我都得到了所有的JavaScript警报。几乎就像我的脚本跳过了那一条语句。我不确定我在这里缺少什么，但是我花了几个小时试图弄清楚。您能提供的任何帮助将不胜感激。

解决方法

我的投票是，成功回调中的变量未定义，因此该方法不会编译或执行。

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

似乎没有在任何地方定义and3ѭ，ѭ4anywhere和error。这似乎伪装成有时无法执行的方法，但是Firebug或Chrome \的开发人员工具应该向您显示错误。如果您不尝试使用成功回调，是否会执行？只是做一个

alert(\"foo\");

看看是否可行。 ,您是从www.mypage.com上找到这个吗？如果您不是，那么XHR只会被吃掉，没有任何回报（错误或成功）。另外，您有一个拼写错误... \'type \'应该小写，但这不应该引起问题。 ,它应该是

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

使用Firebug之类的工具检查您的JS是否存在错误。您还需要确保从同一域调用此名称。 ,由于变量$return未初始化，因此您的php脚本可能还会在输出中抛出\“ notice \”，从而不会返回有效的JSON 尝试

$return = array();

使用之前 ,这就是你想要的吗？只需将其复制并粘贴到您的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>

ajax jquery 工作工作工作无法正常正常