Android：触发 AJAX 功能不起作用答案

【问题标题】：Android: Trigger AJAX function not workingAndroid：触发 AJAX 功能不起作用
【发布时间】：2012-09-24 16:26:50
【问题描述】：

我正在构建一个 AJAX 函数，它调用 scroll 或 click/touchtstart 以将一些内容附加到我的 HTML。在桌面环境中，一切对我来说都很好，无论是点击还是滚动事件。然而，它们都不适用于我的 Android 2.3.7 HTC EVO 或我的 Android 4.1.1 上的 Nexus 7。

这是我的 click JavaScript 事件处理程序：

$('.loadMore').each(function() {

  //Set URL and start on the first page
  var self = this;
  var path2root = ".";
  var loc = window.location.origin;
  var url = loc + "/process.php";
  var subcategoryId = $(this).parent().attr('data-subcategoryId');
  var page = 1;

  // Build the updated URL
  $(self).bind('touchstart', function(e) {
    e.preventDefault();

    page++;

    // AJAX function for processing JSON
    $.ajax({
      url: url + "?subcategoryId=" + subcategoryId + "&page=" + page,
      type: "GET",
      contentType: "application/json; charset=utf-8",
      dataType: "json",
      async: false,
      success: function (data) {
        var i = 0;
        for(i = 0 ; i < data.length; i++) {
          var articleId = data[i].articleResult.articleId;
          var title = data[i].articleResult.title;
          var subhead = data[i].articleResult.subhead;
          var image = data[i].articleResult.image;
          var response = "<td><div class='articleResult'><a href='" + path2root + "/article/article.php?articleId=" + articleId + "'><img src='" + image + "' width='120'/></a><br><h3><a href='" + path2root + "/article/article.php?articleId=" + articleId + "'>" + title.substring(0,25) + "</a></h3></div></td>";
          $("table tr td:nth-last-child(2)").after(response);
        };
      }
    });
  });
});

我的滚动功能非常相似，只是我将事件绑定到不同的元素，并在滚动：

// Collecting scroll info
    $('.overthrow').each(function() {

     // SAME VARIABLES

      $(this).scroll(function () { 
        if ($(self).scrollLeft() >= parseInt($(document).width() - 50)) {    
            if (finished == 1) {
              page++;
              finished = 0;

              // SAME AJAX FUNCTION

            };
          };
      });
    });

请记住，这是一个针对移动设备优化的网页，而不是原生的 PhoneGap 应用，而且我使用的是常规 jQuery 1.8.0，而不是 jQuery Mobile 或 PhoneGap。

我在 Google 代码上发现了关于 Android 2.3 没有非常有效地接收 touchstart 事件的THIS 问题，这导致我开始构建 on scroll 功能。

【问题讨论】：

您是否打算在滚动期间或单击/触摸 $('.loadMore') 元素时自动填充内容？
好吧，我最初构建它是为了在触摸/点击时填充，但是当它无法在我的 Android 设备上运行时，我开始构建一个滚动功能。我包含了这两个脚本，因为它们都可以在桌面 Chrome/Ffox 等上完美运行，但不能在我的任何 Android 浏览器上运行。
看看我的回答；它应该可以解决您的问题...如果您打算仅绑定到单击/触摸事件，请记住删除滚动事件。

标签： android ajax jquery

【解决方案1】：

根据您来自Google Code 的链接，修复方法是在您的touchstart 事件的开头包含一个e.preventDefault()，如下所示：

$(self).bind('touchstart', function(e) { // include e as a reference to the event
    e.preventDefault(); // prevents the default behaviour on this element
    ....
});

以上适用于我的 Android 2.X 设备；希望对你有帮助！

【讨论】：

感谢您的回复！我已根据您的建议更新了我的代码，但在我的 2.3.7 设备或 4.1.1 Nexus 7 中仍然没有收到任何内容。在 Chrome、Ffox、Dolphin 浏览器和本机 Android 浏览器中测试...
嗯...您可以将您的问题链接到您的测试页面或 JSFiddle.net 吗？不看底层代码就很难诊断。
我知道...给我一点，我会编译一个jsfiddle页面
嘿嘿，我才发现，它实际上与我的触摸事件无关，更多的是与我的 URL 构建有关。由于 Android 处理我的var loc = window.location.origin; 的性质，我不得不对文档位置进行硬编码。不是最佳的，但它现在可以工作。非常感谢您的回复，+1 更多阅读：stackoverflow.com/questions/5577298/…
太棒了 - 很高兴你成功了！不要忘记发布您的问题的答案并接受它。听起来这可能对一些人有所帮助。

【解决方案2】：

所以我能够让 AJAX 调用为 on scroll 事件正常工作。我已经放弃了 click/touchstart 事件，因为这在 Android 中似乎有问题。

无论出于何种原因，Android 在上传到网络服务器时都无法正确读取动态 URL：

var loc = window.location.origin;
var url = loc + "/process.php";

所以当我使用编译后的 URL 构建我的 ajax 调用时：

$.ajax({
  url: url + "?subcategoryId=" + subcategoryId + "&page=" + page,

window.origin.location 被误解了。相反，我需要硬编码process.php 文件的位置：

url: "process.php?subcategoryId=" + subcategoryId + "&page=" + page,

我通过另一个 SO 帖子 HERE 发现了我的解决方案

唯一的问题是我的代码在 iPhone 上运行，但在 Android 上却不行。如果有人知道这背后的原因，那将是很好的信息。

【讨论】：