Ajax设置变量在不同范围内不起作用

Ajax setting variable not working in different scopes

本文关键字：范围内 不起作用 设置 变量 Ajax      更新时间：2023-09-26

我正在尝试使用ajax调用设置js变量。然后将var值输入到表单元素中。它工作得很好，直到我尝试使用var的方式如下所示。

我用来获取val 的函数

function ajaxFetch(query) {
  var val;
  $.post( "/ajax/crud.php",{mode:"fetch",query:query},function(data) {
    val=data;
  });
  return val;
}

我将跳过crude .php代码，因为它可以为其他脚本工作，并且它只查询MySQL，并回显值。

然后我调用ajaxFetch函数触发点击

$(document).on("click",".btnCall",function(){
  id=$(this).data("id")//gets an id from a data tag
  q1 = "SELECT NAME FROM user WHERE ID="+id;
  userName = ajaxFetch(q1);
  $("#form_userName").val(userName);
});

我不明白，但我猜这是一个范围的问题，是以下

  1. 如果我按照所示的方式操作，表单仍然为空

  2. 如果我做一个直接的ajax调用，在点击触发(不调用函数)，则用用户名填充表单。

  3. 如果我做的事情如上所示，但我添加一个"alert(val)"到ajaxFetch函数(我用它来测试函数)，警报将是

我遇到了这样的问题:我首先在"click"事件中进行ajax调用。然后我创建了ajaxFetch函数，因为会有几个调用。我在函数和"点击"事件中都添加了一个"警报"，这样我就可以看到获取是否正常工作。我注意到的第一件事是，第一个警报(在ajaxFetch内部)是空的，但点击事件内部的警报显示的值。

提前感谢。抱歉有任何错误

EDIT -工作方式(使用不需要的警报)

function ajaxFetch(query) {
  var val;
  $.post( "/ajax/crud.php",{mode:"fetch",query:query},function(data) {
    val=data;
    alert(data);
  });
  return val;
}
$(document).on("click",".btnCall",function(){
  id=$(this).data("id")//gets an id from a data tag
  q1 = "SELECT NAME FROM user WHERE ID="+id;
  userName = ajaxFetch(q1);
  alert(userName)
  $("#form_userName").val(userName);
});

这样表单值将被归档。第一个警报将显示一个空字符串，第二个警报将显示正确的值。

FINAL EDIT - working Ajax request

function ajaxFetch(query) {
  var r;
  $.ajax({
    type:'POST',
    url:'/ajax/crud.php',
    async:false,
    data:{mode:"fetch",query:query},
     success: function(response){
       r=response;
     }
  });
  return r;
}

这样(添加选项"async:false")var将只在ajax完成它的请求时被填充。这不是一个专业的技巧，但可能对其他初学者有帮助。

返回$.post函数中的val 

function ajaxFetch(query) {
  var val;
  $.post( "/ajax/crud.php",{mode:"fetch",query:query},function(data) {
    val=data;
    //return statement should be here and not out side the ajax function
    return val;
  });
}

}

答案是，你使用val是undefined在那一刻，当你返回它。你应该在回调函数中执行所有使用val的逻辑，在其他情况下，你只是不知道请求何时完成。我建议你这样使用:

function ajaxFetch(query) {
  return $.post( "/ajax/crud.php",{mode:"fetch",query:query});
}
//and where you call ajaxFetch()
ajaxFetch().then(function(data) {
  val=data;
  //do something with val here
});

您正在执行异步Ajax调用。因此，您必须对代码进行如下修改:

function ajaxFetch(query) {
    var val;
    $.post( "/ajax/crud.php",{mode:"fetch",query:query},function(data) {
            val=data;
            $("#form_userName").val(val); //set the value right in success handler of Ajax
     });
  }
    $(document).on("click",".btnCall",function(){
      id=$(this).data("id")//gets an id from a data tag
      q1 = "SELECT NAME FROM user WHERE ID="+id;
      ajaxFetch(q1); //just call the function; you don't know how much time Ajax will take to get back the result.
    });

请尝试此代码

var val,id,q1,userName;
function returnData(param)
{
   $("#form_userName").val(param);
}
function ajaxFetch(query, callback)
{
  var x = $.post( "/ajax/crud.php",{mode:"fetch",query:query},function(data) {
    callback(data);
  })
}
$(document).on("click",".btnCall",
    function(){
        id=$(this).data("id")//gets an id from a data tag
        q1 = "SELECT NAME FROM user WHERE ID="+id;
        ajaxFetch(q1,returnData);
    }
);

因为是异步的，所以使用回调函数

相关文章：