代码之家 › 专栏 › 技术社区 › A. M.

Opera和Google Chrome中的jQuery Ajax问题

opera google-chrome ajax jquery javascript

A. M. · 技术社区 · 15 年前

我有一个页面需要在其中向某些元素添加拖放功能。当Drop事件发生时,它对一个php函数进行Ajax调用,然后刷新一个Div的内容。我使用jquery和jqueryui进行拖放,并将cakephp作为一个php框架(不确定这是否相关)。

在firefox、safari甚至ie中,一切都很正常,但是在opera或chrome中,DIV的内容没有刷新(尽管执行了来自php函数的操作)。

所以,代码如下:

jQuery('#lists div').
    filter(function() {return this.id.match(/item[\d]+_[\d]+/);}).
    each(function() { jQuery(this).draggable( {axis: 'y'}); });

jQuery('#lists div').
    filter(function() {
        return this.id.match(/list[\d]+/);}).
               each(function() { 
                   jQuery(this).droppable({
                      drop: function(event, ui) {
                            dropID = jQuery(event.target).attr('id');
                            dragID = jQuery(ui.draggable).attr('id');

                            itemID = dragID.substr(dragID.lastIndexOf('_') + 1);
                            oldListID = dragID.substr(4).replace(/_[\d]+/g, '');
                            newListID = drop.substr(4);

                            jQuery.ajax({
                                url:  "/lists/itemToList/"+itemID+"/"+oldListID+
                                      "/"+newListID,
                                type: "POST",
                                success: function (data) {
                                     jQuery('#lists').html(data);}
                            });
                         }
                 });
    });

基本上,没有执行success函数,但是如果我试图看到抛出的错误(在错误事件上),它是“未定义的”

4 回复 | 直到 14 年前

Krzysiek DróÅ¼dÅ¼ 15 年前

尝试如下操作:

jQuery.ajax({
   url:  "/lists/itemToList/"+itemID+"/"+oldListID+
      "/"+newListID,
   type: "POST",
   success: function (data) {
      jQuery('#lists').html(data);
   }
   error: function (XMLHttpRequest, textStatus, errorThrown) {
      alert(XMLHttpRequest.status);
      alert(XMLHttpRequest.responseText);
   }
});

它将向您显示请求的HTTP响应。我以前也遇到过同样的问题。我的脚本在firefox和chrome中运行得很好,但在opera和ie中没有任何作用。我检查了它,问题是PHP后端返回404(我仍然不知道它在chrome和ff下是如何工作的)。

A. M. 14 年前

我知道我发布这个问题已经有很长时间了,但这里是我发现的解决方案,以防其他人需要它:问题不是在javascript中而是在cakephp中:成功添加的HTML包含一个Ajax表单(使用$ajax->form()呈现)。$ajax->form()需要控制器中的$data变量作为数组,但由于某种原因,它不是数组,这破坏了表单的呈现,而opera和chrome不喜欢这样。所以解决方案是简单地添加

$this->data = array();

到我的控制器中的itemtolist()函数。

Ryan Lynch 15 年前

我在代码中没有看到任何可能导致跨浏览器问题的内容。我的感觉是,问题不在于代码,而在于在chrome和opera中呈现DIV和/或其内容(即CSS问题或沿着这些行的某些内容,其中 innerHTML DIV的更新,但由于样式或位置的原因,您无法获得所需的视觉效果)。

您是否使用dragonfly或其他开发人员工具进行了检查,以验证成功请求后目标元素的内容实际上是不变的?沿着这些线,您是否尝试过在有问题的浏览器中单步执行代码?您也可以尝试添加 error 处理程序到 JQuery.ajax 查看请求本身是否存在问题的选项,尽管我不认为这就是问题所在。

编辑:我没有看到代码块下面的最后一位。因此,您已经验证了没有执行成功处理程序。您说您确实尝试了为请求实现一个错误处理程序,并得到了一些未定义的结果,但代码中没有看到它。您可以发布错误处理程序的代码并描述错误中未定义的内容吗?

Krzysiek DróÅ¼dÅ¼ 15 年前

我想他是说,警报(出错)显示“未定义”。