jquery ajax async没有相应的工作

时间:2014-04-30 14:17:41

标签: javascript php jquery ajax

这是我的javascript代码:

function getData(param1,param2) {
    $.ajaxSetup({async:false});
    var request = $.ajax({
        url: "http://someurl.com/xyz.php?p1="+param1+"&p2="+param2,
        type: "POST",
        async: false,
        success: function(imageurl){
            return imageurl;
        }
    });
}

这里是PHP页面,我在调用这个函数:

<html>
<head>
     <script src="jquery-1.9.1.js"></script>
        <script src="http://myjsdomain.com/myjs.js"></script>
        <script>

            function callMyFunction(box) {
                alert(box);
                box.value = "Waiting....";
                var data = getData('param1', 'param2'); 
                box.value = data;
                alert(data);    //here I am getting "Undefined"
            }
        </script>
</head>
<body>
        <?=$_SERVER["REMOTE_ADDR"]?><br />
        <input type="button" onclick="callMyFunction(this)" value="Click Here" />
</body>
</html>

现在当我在My php页面中调用此getData()函数时,它将返回"Undefined"

当我在JavaScript代码中提醒数据时,它会在PHP页面中提醒正确的值但仍为"undefined"

这是一个Ajax ASYNC问题,但即使设置了false,我仍然面临这个问题。

我用firebug调试了它,我可以看到URL(从我使用ajax获取数据的地方)返回正确的值,但它没有在我调用此函数的PHP页面上接收。
< / p>

任何使这项工作的建议

2 个答案:

答案 0 :(得分:4)

你必须从函数getData返回结果,在success函数返回是不够的 - 它在不同的范围内

function getData(param1,param2) {
  var result;
  var request = $.ajax({
    url: "http://someurl.com/xyz.php?p1="+param1+"&p2="+param2,
    type: "GET",
    async: false,
    success: function(imageurl){
      result = imageurl;
    }
  });
  return result;
}

或者您可以通过这种方式异步执行:

function changeValue(box, param1, param2) {
  box.value = "Waiting....";
  var request = $.ajax({
    url: "http://someurl.com/xyz.php?p1="+param1+"&p2="+param2,
    type: "GET",
    async: true,
    success: function(imageurl){
      box.value = imageurl;
    }
  });
  return result;
}
function callMyFunction(box) {
  alert(box);
  changeValue(box, 'param1', 'param2')
}

答案 1 :(得分:1)

作为已接受答案的替代方案,以下是如何使用promises以异步方式正确完成此操作。有关详细说明,请参阅重复的问题How do I return the response from an asynchronous call?

function getData(param1, param2) {
    return $.ajax({
        url: "http://someurl.com/xyz.php",
        data: {p1:param1, p2:param2},
        type: "GET" // I think this is fine since you didn't send any data
    });
}
function callMyFunction(box) {
    alert(box);
    box.value = "Waiting....";
    getData('param1', 'param2').then(function(imageurl) { 
        box.value = imageurl;
        alert(imageurl);
    });
}