如何将 jquery ajax 绑定到父级
How to Bind Jquery Ajax to Parent
我在大家的帮助下让它工作。 我将"context:"从"this.parentNode"更改为"this"。 我仍然对"这个"上下文感到困惑。 通过有限的测试,它似乎已经解决了我运行多个实例的问题。 感谢您的帮助。 新代码如下所示。
我是jQuery和Javascript的新手。我正在创建一个通用对象来导航数据库表 (NavDb)。如果我创建 1 个实例,它可以完美运行。当我运行多个实例时,它会失败。我将问题追溯到我如何使用"这个"。 初始化/处理 ajax 请求的一个例程失败。 表单可以有任意数量的选择器(自动完成或下拉列表)。例程递归执行 ajax 请求,直到初始化所有选择器。 "this"变量在输入"success:"函数时引用ajax对象。 我需要对父对象的引用,所以我在第 2 行创建了一个$this。 问题是它创建了一个闭包并搞砸了第二个实例(我相信这就是正在发生的事情)。 如何在成功函数中获取对父对象的引用? 是否可以将 ajax 请求绑定到父对象? 我需要这样的东西:
var $this = this.parent;
希望我能清楚地解释这一点。
新代码
NavDb.prototype.getSelData = function () {
if (this.curSelector >= this.selectors.length) {
return;
}
else {
var sql = this.selectors[this.curSelector].sql;
$.ajax({
url: 'php/select.php',
type: 'POST',
context: this, // Only needed 'this' not this.parentNode.
dataType: 'json',
data: {
'sql': sql
}
}).done(function (data) {
if (data.success) {
if (data.v.length > 0) {
this.selectors[this.curSelector].data = data;
if (this.selectors[this.curSelector].type == "autoComp") {
this.initAC();
};
if (this.selectors[this.curSelector].type == "dropDown") {
this.initDD();
};
}
}
this.curSelector++;
this.getSelData();
}).fail(function (XHR, textStatus, errorThrown) {
$("#status").html(getErrorText(XHR.responseText));
});
};
};
旧代码
NavDb.prototype.ajaxSelData = function () {
var $this = this;
if (this.curSelector >= this.selectors.length) {
$this = null;
return;
}
else {
var sql = $this.selectors[$this.curSelector].sql;
$.ajax({
url: 'php/select.php',
type: 'POST',
dataType: 'json',
data: {
'sql': sql
},
success: function (data) {
if (data.success) {
if (data.v.length > 0) {
$this.selectors[$this.curSelector].data = data;
if ($this.selectors[$this.curSelector].type == "autoComp") {
$this.initAC();
};
if ($this.selectors[$this.curSelector].type == "dropDown") {
$this.initDD();
};
}
} else {
alert(data.error);
}
$this.curSelector++;
$this.ajaxSelData();
}
});
};
};
有关正确的上下文范围,请参阅此答案。
您可以通过多种方式确保正确的上下文:
-
使用上下文
$.ajax({ url: 'php/select.php', type: 'POST', context: this.parentNode, dataType: 'json', data: { sql: sql }, success: function (data) { // 'this' is parentNode } })
-
使用闭合
var parentNode = this.parentNode; success: function (data) { //you can now use 'parentNode' }
-
使用 $.proxy
$.proxy(function(data){ // 'this' is parentNode }, this.parentNode);
你的代码创建的闭包对于每个实例都是唯一的(它为每个实例创建一个单独的闭包),所以你关于闭包搞砸了第二个实例的理论是不正确的。
因此,像您所做的那样创建单独的变量:
var $this = this;
是一件非常好的事情,不会引起问题。
但是,如果你想要父节点,那么也许你应该这样做:
var parent = this.parent;
然后引用 ajax 函数中的 parent
变量。
您也可以将 context
参数传递给 ajax 调用,这将在成功处理程序回调中根据需要设置 this
参数。
$.ajax({
url: 'php/select.php',
type: 'POST',
dataType: 'json',
context: this.parent, // add this line
data: {
'sql': sql
},
success: function (data) {
// now the this pointer is set as desired in your callback here
if (data.success) {
相关文章:
- 如何将事件绑定到从AJAX请求注入的HTML
- 如何在AJAX驱动的应用程序中优化元素绑定
- jQuery Ajax 元素的后期绑定不起作用
- 使用ajax/jquery绑定Json数据
- 将类方法绑定到类外绑定的事件处理程序内的AJAX成功回调
- AJAX请求导致更改函数解除绑定
- 如何在ajax请求周期性自动刷新时使用knockout.js数据绑定
- 结构化和绑定(ajax响应)
- 当通过Ajax成功回调更新可观察数组时,启用绑定中断
- 在表单提交将DOM的一部分替换为分部之后,我应该将ajax成功绑定到什么来使我的javascript工作
- jQuery绑定了没有DOM元素的AJAX事件
- 将函数绑定到Twitter Bootstrap Modal Ajax Complete
- 重新绑定分配给ajax链接的操作
- jQuery绑定ajax:成功地不在rails3app中为新创建的(ajax)项工作
- 通过数组的角度绑定 ajax 数据
- 当尝试绑定ajax和控制器动作时,下拉菜单没有填充
- JQuery绑定ajax HTML并获取类实例值
- 在angular.js中绑定ajax页面
- 用Angular表达式绑定Ajax调用的无限循环
- 如何在EmberJs中绑定Ajax请求的响应到模型