我有一个基于我从AJAX调用收到的JSON数据填充的JsTree。这是AJAX调用。
function sendQuery(){
$.ajax({
context: this,
url: 'http://localhost:8080/testMain',
type: 'GET',
dataType: 'text',
success: function(data) {
// ^^^^ Need for sendQuery() to return DATA
},
error: function (xhr, ajaxOptions, thrownError){
alert('Error xhr : ' + xhr.status);
alert('Error thrown error: ' + thrownError);
}
});
}
我知道这里存在范围问题。在JavaScript中,变量是根据声明函数定义的。我只是不知道如何从sendQuery()返回,然后我将其用作另一个函数的参数,该函数将解析JSON,这是另一个为树的阶段的参数。有点在发条中对这件作品感到沮丧,并没有像我在Java中习惯的那样简单。非常感谢你的帮助,如果它有效,那么病态肯定会接受。干杯
编辑#1:好的,基于答案,我相信如果我以这种方式更改我的代码,它将允许数据退出.ajax函数。还有一个问题是如何让它回到程序流程中。
function sendQuery(){
$.ajax({
context: this,
url: 'http://localhost:8080/testMain',
type: 'GET',
dataType: 'text',
success: getJson,
error: function (xhr, ajaxOptions, thrownError){
alert('Error xhr : ' + xhr.status);
alert('Error thrown error: ' + thrownError);
}
});
}
function getJson(data){
alert("Transmission Success.");
alert(data);
var obj = $.parseJSON(data);
alert("Parsing JSON Success.");
var apples = obj.apples;
alert(apples);
return apples;
}
好的,现在我如何将APPLES变量放入调用链中,该调用链将为树的数据进行分级?
我需要将APPLES变量提供给将处理数据的函数。
编辑#2使用回调:
我花了一秒钟的时间来回避一个回调的想法。这就是我能用它做的事情。
这是我的原始树代码,它调用一系列函数来执行不同的操作,但最终以树将接受的形式获取数据。
$(function () {
$("#client_tree").jstree({
"json_data": {"data": attachTree(stageTreeData(getJson(sendQuery())))},
"plugins" : [ "themes", "json_data", "ui" ]
}).bind("select_node.jstree", function (e, data) {
var msg = data.rslt.obj.attr("id");
alert(msg);
});
});
我目前正在尝试通过Ajax获取数据,在sendQuery()方法中然后从数据等返回...]
我稍微改了一下,现在我不调用sendQuery(),jQuery调用它。
$(function (){
$.ajax({
context: this,
url: 'http://localhost:8080/testMain',
type: 'GET',
dataType: 'text',
success: loadTree,
error: function (xhr, ajaxOptions, thrownError){
alert('Error xhr : ' + xhr.status);
alert('Error thrown error: ' + thrownError);
}
});
});
还改变了我的树加载代码......
function loadTree(data){
$("#client_tree").jstree({
"json_data": {"data": attachTree(stageTreeData(getJson(data)))},
"plugins" : [ "themes", "json_data", "ui" ]
}).bind("select_node.jstree", function (e, data) {
var msg = data.rslt.obj.attr("id");
alert(msg);
});
}
我没有错误,没有例外,树已填充。
谢谢大家的帮助!
编辑#3修复一些小问题:
已移至Alert() call in jQuery not displaying, called from within a JsTree
答案 0 :(得分:3)
不,你不需要那个。
您需要的是使用数据。
但是你不能从sendQuery返回它们,因为调用是异步的,这意味着数据只有在sendQuery返回后才可用。
解决方案是为您的sendQuery
函数提供一个回调函数,该函数将在数据可用时执行您想要执行的操作:
function sendQuery(callback){
...
success: callback,
...
}
...
sendQuery(function(data){
// do things with data
});
答案 1 :(得分:2)
您尝试做的问题是ajax调用是异步的。在您从服务器获得响应之前,sendQuery函数将返回,控制流将继续。
使用它的方法是使用回调。当您从服务器获得响应时,您传递给success()
的函数将被调用。基本上,您需要该功能来从中断处获取处理管道。您希望该函数将响应解析为json,“树的阶段”等等。
您需要将调用此函数的函数分离为调用之前发生的函数,然后将调用之后发生的“其他所有内容”分开。 “其他一切”就是你在成功回调中想要的东西。
示例(对谁调用此函数做出一些假设)
function doQueryAndParseData(){ //This is the function that calls doQuery
prepare_something();
//You pass this in as a callback, since it can only happen once you have data
sendQuery(function(data){
parsed_data = JSON.parse(data); //This is where you do your work
//Put parsed data into dom somehow
}
return; //This function will return before the data gets back, but when the server responds the data will get parsed and put into the tree
}
function sendQuery(callback){
$.ajax({
context: this,
url: 'http://localhost:8080/testMain',
type: 'GET',
dataType: 'text',
success: callback,
error: function (xhr, ajaxOptions, thrownError){
alert('Error xhr : ' + xhr.status);
alert('Error thrown error: ' + thrownError);
}
});
}
答案 2 :(得分:1)
您需要在AJAX成功中使用数据。可以使用另一个函数,因为此代码显示
function sendQuery(){
$.ajax({
context: this,
url: 'http://localhost:8080/testMain',
type: 'GET',
dataType: 'text',
success: loadTree,
error: function (xhr, ajaxOptions, thrownError){
alert('Error xhr : ' + xhr.status);
alert('Error thrown error: ' + thrownError);
}
});
}
function loadTree( data){
/* do something with data returned from ajax*/
}
答案 3 :(得分:-2)
function sendQuery(){
var val;
$.ajax({
context: this,
url: 'http://localhost:8080/testMain',
type: 'GET',
async: false,
dataType: 'text',
success: function(data) {
val = data;
},
error: function (xhr, ajaxOptions, thrownError){
alert('Error xhr : ' + xhr.status);
alert('Error thrown error: ' + thrownError);
}
});
return val;
}