0

我正在尝试制作一个包含“搜索”和“结果”两个页面的简单网站。

起初，我有一个运行良好的多页模板。我会更改页面，并在页面更改时使用 ajax 来获取结果。问题是我希望能够在不首先返回搜索页面的情况下加载结果页面。

我想通过查询字符串将参数传递给结果页面，这样我就可以拥有这样的东西：

search.html+“一些搜索词”-> results.html?q=some+search+terms

问题是当我将 html 拆分为两个文件时，我似乎无法正常工作。

我试着打电话

$.mobile.changePage("results.html?q=" + escape(search))

在搜索页面上，但该$(document).ready功能未触发。我有点明白为什么它没有，因为changePage将第二页加载到 DOM 中？

我还尝试了手动重定向，在这种情况下，该$(document).ready函数会在 results.html 上触发，但使用后退按钮或返回搜索页面不会触发 THAT $(document).ready。

我尝试将pagechange函数连接到 search.html，假设当我加载第二页时它会触发，但什么也没发生。

有没有人对我将如何实现这一点提出建议？还是让结果页面更加独立于搜索页面的最佳方式？

4

3 回答 3

0

我也被这个困扰了，通过查询字符串传递参数确实不是一个好主意，它使 jQueryMobile 以一种奇怪的方式表现。

相反，我一直在使用完美运行的 sessionStorage。您也可以使用 cookie。

于 2012-04-20T18:35:31.083 回答
0

我不能 100% 确定您实际上在哪里遇到问题，但这里有一些重要的 jQuery Mobile 特定信息可以帮助您。

首先，阅读本页顶部的大黄色部分：http: //jquerymobile.com/demos/1.1.0/docs/api/events.html

document.ready当页面从外部文档进入 DOM 时不会触发。相反，您需要使用事件委托和上面链接中指定的页面事件。您很可能希望pageinit用作document.ready.

然后阅读此页面的顶部：http: //jquerymobile.com/demos/1.1.0/docs/api/methods.html（关于 的部分$.mobile.changePage()）。

关于第二个链接的重要部分是您可以$.mobile.changePage()像这样通过函数传递数据：

$.mobile.changePage('results.html', { data : { q : search } });

您甚至可以将type选项设置为，post这样就不会发送查询字符串（这应该确保您一次不会在 DOM 中获得多个相同页面）。

$.mobile.changePage('results.html', { data : { q : search }, type : 'post' });

另一个解决方法是手动将data-url属性添加到<div data-role="page" id="results">页面。当您抓取这样的页面时：

 $.mobile.changePage("results.html?q=search+term+here");

它data-url被设置为：results.html?q=search+term+here。如果您手动设置为data-url，results.html那么您可以导航到这样的页面：

 $.mobile.changePage("results.html", { data : { q : 'search+term+here' } });

在通过 AJAX 重新加载伪页面之前，它将首先查找属性设置为的data-role="page"元素。data-urlresults.html

于 2012-04-20T20:12:25.820 回答
0

感谢您的输入。我使用了一个插件，它允许我在散列中使用虚假查询参数进行多页布局。

https://github.com/jblas/jquery-mobile-plugins/tree/master/page-params

我刚刚添加了这个并在页面更改时运行搜索，获取搜索的页面参数。

于 2012-04-21T21:35:42.510 回答