jQuery.ajax重新加载页面，而不是在iOS上的Safari中执行ajax请求 [英] jQuery.ajax reloads page instead of performing ajax request in Safari on iOS

问题描述

我在本地apache实例(/test)的页面上调用了一个函数，该实例用jQuery.ajax调用子页面(/test/info)并正确地进行AJAX调用并动态地从响应中加载内容我的桌面在FF，Safari，Chrome中，但是在iOS模拟器中，没有通话，页面也被刷新.

I have a function being called on a page on a local apache instance (/test) which calls a subpage (/test/info) with jQuery.ajax and correctly makes an AJAX call and dynamically loads the content from the response on my desktop in FF, Safari, Chrome, but in the iOS emulator, no call is made and the page is refreshed.

window.getInfo = function ( event ) {
  console.log('1) prior to $.ajax');
  $.ajax({
    url: 'http://localhost/test/info',
    dataType: 'html',
    beforeSend: function(xhr) { 
      console.log('2) beforeSend'); 
    },
    success: function(data, textStatus) {
      console.log('3) success');
      if ( textStatus == 'success' ) {
        // doing stuff with data
      }
    }
  }).always( function() { console.log('4) always'); });
};

从桌面浏览器中打印所有日志，我的apache服务器在/test报告一个请求，但是在iOS模拟器中的Safari上，仅打印'1) prior to $.ajax'和'2) beforeSend'日志，并发出下一个请求apache是​​/test.

From the desktop browsers all of the logs are printed and my apache server reports a request at /test, but on Safari in the iOS emulator, only the '1) prior to $.ajax' and '2) beforeSend' logs are printed and the next request made to apache is for /test.

有人知道这里发生了什么以及如何使iOS表现出来吗?

Does anyone have any idea what is happening here, and how to make iOS behave itself?

更新:将async: false属性添加到ajax调用时，将打印所有日志，并发出请求，因此基本上可以解决该问题；但是页面仍会重新加载，我认为这是与iOS上的事件传播有关的另一个问题.

UPDATE: When I add the async: false attribute to the ajax call, all the logs are printed, and the request is made, so that basically fixed the issue; however the page still reloads which I believe is a different issue related to event propagation on iOS.

推荐答案

完成此工作所需的全部是处理程序函数中的return false;.有关更完整的说明，请参见 event.preventDefault()与return false 在jQuery事件处理程序中的return false实际上与在传递的jQuery.Event对象上调用e.preventDefault和e.stopPropagation相同."

All that is needed to make this work is a return false; from the handler function. See event.preventDefault() vs. return false for a more complete explanation, but basically "return false from within a jQuery event handler is effectively the same as calling both e.preventDefault and e.stopPropagation on the passed jQuery.Event object."

因此，上述代码的完整功能版本为:

So a fully functional version of the above code is:

getInfo = function() {
  $.ajax({
    url: '/test/info',
    dataType: 'html',
    success: function(data, textStatus) {
      if ( textStatus == 'success' ) {
        // doing stuff with data
      }
    }
  });
  return false;
};

// The order of vv that string may be important
$(document).on('click touchend', '.getInfo', getInfo );

这篇关于jQuery.ajax重新加载页面，而不是在iOS上的Safari中执行ajax请求的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！