Question

我正在尝试将我的网页转换为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警报。这几乎就像我的脚本正在跳过那一个声明。我不确定我在这里缺少什么，但我花了几个小时试图解决这个问题。非常感谢您提供的任何帮助。

Answer 1

你是从www.mypage.com点击这个吗？如果你不是，那么XHR就会被吃掉，没有回报（错误或成功）。

此外，你有一个错字......“类型”应该是低级的，但这不应该导致你的问题。

Answer 2

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

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

nameMsg，locationMsg和error似乎没有在任何地方定义。这似乎伪装成一种有时无法执行的方法，但Firebug或Chrome的开发人员工具应该向您显示错误。

如果您不尝试使用它们，您的成功回调会被执行吗？做一个

alert("foo");

看看是否有效。

Answer 3

应该是

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

使用像Firebug这样的东西来检查你的JS是否有错误。

您还需要确保从同一个域中调用此内容。

Answer 4

由于变量$return没有被初始化，因此你的php脚本可能会在输出中抛出“通知”，从而无法返回有效的JSON

试

$return = array();

使用前

Answer 5

这是你想要的？只需将其复制并粘贴到您的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>

无法让jQuery ajax工作

5 个答案: