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

Question

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

我用来获取 val 的函数

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

我将跳过 crud.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 调用，在点击触发器内（不调用 函数），表格中填写了用户名。

1234563 “未定义”，但表单将填充该值。

我以这种方式遇到了问题：我首先在“click”事件中进行了 ajax 调用。然后我创建了 ajaxFetch 函数，因为会有几个调用。我为函数和“单击”事件添加了一个“警报”，因此我可以查看获取是否正常工作。 我注意到的第一件事是第一个警报（在 ajaxFetch 中）是空的，但单击事件中的警报显示了该值。

提前致谢。如有错误请见谅

编辑 - 工作方式（使用不需要的警报）

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);
});

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

最终编辑 - 工作 Ajax 请求

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 完成它的请求时被填充。不是真正的专业提示，但可能对其他初学者有所帮助。

Answer 1

在 $.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;
  });
}

}

Answer 2

答案是您在退货时使用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
});

Answer 3

您正在执行异步 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.

    });

Answer 4

请试试这个代码

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);
    }
);

由于是异步的，所以使用回调函数