xui - XUI Ajax 示例

Question

我不明白如何使用 XUI xhr (ajax) 调用。考虑以下代码：

x$('#left-panel').xhr('/panel', {
    async: true,
    callback: function() {
        alert("The response is " + this.responseText);
    },
   headers:{
       'Mobile':'true'
   }
});

那么这是否意味着当用户悬停在左侧面板上时，xui 将对 url 进行 ajax 调用/panel，并在成功时发出警报声明？但是，如果我将 ajax 调用改为执行 ONBLUR 怎么办？

Answer 1

xui.js api 文档指出 xhr 请求...

... 总是在元素集合上调用并使用 html 的行为。

因此，在您的 GET 请求中/panel，响应文本将出现在警报窗口中，因为这就是您的回调要执行的操作。但是，如果没有回调，它会将响应加载到#left-panel元素中，就像您使用过一样：

x$('#left-panel').xhr('/panel', {
   async: true,
   callback: function() {
       x$('#left-panel').html(this.responseText);
   },
   headers:{
       'Mobile':'true'
   }
});

也就是说，上面的代码应该产生与以下相同的效果：

x$('#left-panel').xhr('/panel', {
   async: true,
   headers:{
       'Mobile':'true'
   }
});

此外，xhr 请求的调用独立于目标元素事件。也就是说，它不一定由悬停（或模糊）触发。假设您想绑定到#left-panel元素的单击。然后你需要类似的东西：

x$('#left-panel').on('click', function(e){
    this.xhr('/panel', {
       async: true,
       callback: function() {
           alert("The response is " + this.responseText);
       },
       headers:{
           'Mobile':'true'
       }
    });
});