jQuery Mobile 如何通过ajax方式动态加载页面？

Posted 2023-04-15

前台jQuery Moblie实现，现在我有一个页面需要动态生成，通ajax方式请求到后台数据后再生成该页面，现在一直没有解决，时间比较急，遇到过的朋友指点下，最好给一个例子。PS：百度分数虽然空了，不过还是先表示感谢了，高手，在线等你哦。

1.首先对于页面切换，使用changePage来执行，并且可以传递参数来确定是跳转到哪个页面
当然，pagebeforechange事件也能获取到跳转文件的扩展名，不过还是觉得自己传参数靠谱

2.监听pagebeforechange事件，来处理页面切换之前处理，然后通过自己传的页面参数来判断，要跳转到的页面，然后根据自己需求来加载JS文件

3.动态加载JS文件，通过JQuery 的getScript方法来加载JS

(在监听事件的时候，可能考虑到，加载JS,后，导致内存增加
但是http://stackoverflow.com/questions/5108002/how-to-delete-script-loaded-by-getscript
上面写，getScript，不是相当于load了一个script，他是下载后来直接运行，所以不需要考虑这个问题，不过，这块还有待于确认）

优点
这样就避免了加载JS文件大又能捕捉到page页面的create 和 init事件以及处理其他的内容
而且可以把JS文件很明确的分到具体的文件中，也方便管理！追问

谢谢，继续等待Demo的出现。

参考技术A 1.首先对于页面切换，使用changePage来执行，并且可以传递参数来确定是跳转到哪个页面
当然，pagebeforechange事件也能获取到跳转文件的扩展名，不过还是觉得自己传参数靠谱

2.监听pagebeforechange事件，来处理页面切换之前处理，然后通过自己传的页面参数来判断，要跳转到的页面，然后根据自己需求来加载JS文件

3.动态加载JS文件，通过JQuery 的getScript方法来加载JS.

优点 :
这样就避免了加载JS文件大又能捕捉到page页面的create 和 init事件以及处理其他的内容
而且可以把JS文件很明确的分到具体的文件中，方便管理.

如何删除tag from jQuery mobile loader?

我在我的页面上使用jQuery 1.4.5并在ajax请求之前使用加载器：

$.mobile.loading('show', {theme:"e", text:"", textonly:false, textVisible: false});

完成请求后，我隐藏它：

$.mobile.loading('hide');

这样可行，但它会在页面末尾生成一个标签，文本将位于该标签上。

<div class="ui-loader ui-corner-all ui-body-e ui-loader-default">
 <span class="ui-icon-loading"></span>
 <h1></h1>
</div>

由于第二个h1标签，一些SEO工具现在发出警告。

如何从加载程序中删除标记？

答案

您可以使用jQuery remove方法删除所需的元素。

$('.ui-loader').find('h1').remove();

另一答案

来自jQuery documentation：

从DOM中删除匹配元素集。

与.empty（）类似，.remove（）方法从DOM中获取元素。如果要删除元素本身以及其中的所有内容，请使用.remove（）。除了元素本身之外，还删除了与元素关联的所有绑定事件和jQuery数据。要删除元素而不删除数据和事件，请改用.detach（）。

setTimeout(function(){
  $("h1").remove();
}, 3000);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<h1>H1 Heading</h1>

另一答案

我总是对派对来说太晚了，但如果您需要自定义JQM加载程序，请注意，在您的问题中描述的选项附近，您还可以提供html参数。

首先，您需要在JQM初始化期间设置您的自定义html而不使用不需要的h1标记：

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script>
  $(document).on("mobileinit", function () {
    /* jQuery Mobile initialization */
    var html = "<div class='ui-loader'><span class='ui-icon-loading'></span></div>";
    $.mobile.loader.prototype.defaultHtml = html;
    // ... other settings as You need
    $.mobile.loader.prototype.options.text = "";
    $.mobile.loader.prototype.options.textVisible = false;
  });
</script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script>

之后，您可以在没有任何文本消息的情况下显示loader或 - 当您无论如何需要显示加载message时 - 您可以进一步自定义它，始终使用html选项：

var html = "<div class='ui-loader'><span class='ui-icon-loading'></span><h6>Wait...</h6></div>";
$.mobile.loading("option", "html", html);
$.mobile.loading("show");

---

Please note:

标准的textVisible选项不再以这种方式工作，因为默认情况下JQM正在搜索加载器标记内不再存在的h1标记。这应该在JQM源代码中修复，允许更灵活的配置，而无需对h1标记进行硬编码：

1513                this.element.find( "h1" ).text( message );

以上是关于jQuery Mobile 如何通过ajax方式动态加载页面？的主要内容，如果未能解决你的问题，请参考以下文章

通过AJAX和PHP，提交JQuery Mobile表单

jQuery Mobile-jquery Mobile 怎么用ajax提交表单

jQuery mobile 中包含 ajax 时的函数执行顺序

导航Jquery Mobile + PhoneGap

如何使用 jquery mobile 和 ajax 实现浏览器历史记录和书签

首次打开时，Jquery Mobile AJAX 弹出窗口出现在页面底部