当前位置：文江博客话题详情

在 jQuery Mobile 中通过 ajax 加载带参数的 url

发布于 2024-12-07 09:02:49 字数 1668 浏览 1 评论 0原文

问题

我无法通过 jQuery mobile 中的 Ajax 加载带参数的链接页面。例如：http://www.sampleurl.com/tool.dll?name=first&more=parameters

详细信息

我正在使用 jQuery Mobile 1.0b3

我没有请参阅带有主题标签的页内导航。我打算加载另一个网页（单独的 html 文件）。据我所知，JQM 在当前页面内搜索链接网站应该没有问题。

在某些情况下，我必须引用一个 DLL，它返回 HTML 文档作为响应。不幸的是，我无法使用 Ajax 通过 jQuery Mobile 访问这些页面。

举个例子：我在以下网站 http://www.sampleurl.com/tool.dll?name=first&more=parameters

我想访问另一个网站，如下所示：

<a href="/tool.dll?name=second&more=parameters"> Link </a>

这不适用于启用 Ajax 的情况。我必须使用属性 rel="external" 强制使用非 ajax。是否无法通过这种方式在 JQM 中使用参数访问喜欢的内容？我想使用页面的内置加载通知。我缺少什么？

不幸的是我还没有找到类似问题的解决方案。

代码示例

<!-- This is working, but will not get me a loading notification on mobile devices -->
<a rel="external" data-ajax="false" href="/tool.dll?name=this%20one&more=parameters">
    Link
</a>

<!-- This is not working -->
<a href="/tool.dll?&name=second&more=parameters">
    Link
</a>

<!-- Neither is this working -->
<a href="http://www.sampleurl.com/tool.dll?name=this%20one&more=parameters">
    Link
</a>

新见解（编辑）

由于某种原因，JQM 由于网站中的这一行而卡在加载页面上：

<input type="date" name="date" id="date" value="" />

问题是属性 type="date"！使用文本字段，页面可以通过 ajax 正常加载。

该页面本身在 jQuery Mobile 上运行良好。日期输入只是阻止页面通过 ajax 加载。我还没有找到解决这个问题的方法。空值属性不是问题。

原文

Problem

I cannot load linked pages with parameters via Ajax in jQuery mobile.
Like: http://www.sampleurl.com/tool.dll?name=first&more=parameters

Details

I'm using jQuery Mobile 1.0b3

I don't refer to in-page navigation with hashtags. I intend to load another webpage (separate html file). So as far as I know there shouldn't be a problem with JQM searching the linked website within the current page.

In some cases I have to reference a DLL which is returning the HTML document as response.
Unfortunately I cannot access these pages with jQuery Mobile using Ajax.

To give an example: I am on the following website
http://www.sampleurl.com/tool.dll?name=first&more=parameters

and I want to access another website like this:

<a href="/tool.dll?name=second&more=parameters"> Link </a>

This is not working with Ajax enabled. I have to force non-ajax with the attribute rel="external".
Is it not possible to access liks with parameters in JQM this way? I'd like to use the built-in loading notification for pages. What am I missing?

Unfortunately I haven't found a solution in similiar questions.

Code samples

<!-- This is working, but will not get me a loading notification on mobile devices -->
<a rel="external" data-ajax="false" href="/tool.dll?name=this%20one&more=parameters">
    Link
</a>

<!-- This is not working -->
<a href="/tool.dll?&name=second&more=parameters">
    Link
</a>

<!-- Neither is this working -->
<a href="http://www.sampleurl.com/tool.dll?name=this%20one&more=parameters">
    Link
</a>

New insights (edit)

For some reason JQM is stuck at loading the page because of this line within the website:

<input type="date" name="date" id="date" value="" />

The issue is the attribute type="date"! With an text-field the page loads fine via ajax.

The page itself is working fine with jQuery Mobile. The date-input just prevents the page from loading via ajax.
I haven't found a solution for this problem, yet. The empty value attribute is not the problem.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

抠脚大汉 2024-12-14 09:02:49

说明

此问题与 GET 参数和 ajax 请求无关。
该问题是由 jQuery Mobile 的日期选择器插件（包含在登陆页面中）引起的。

如果您必须始终包含脚本，则需要通过以下方式禁用 ajax：
rel="external" data-ajax="false"

解决方案

登陆页面

<!-- Do not include the datepicker script in the landing page -->
<div data-role="page" id="pg_1"> 
    <div data-role="header">
        <h1>Ajax page test with date input field</h1>
    </div>

    <div id="content_div" data-role="content">
        <p>
            <a data-role="button" href="loadme.html">To the calendar</a>
        </p>
    </div>
</div>

日历页面

<head>
    <!-- include datepicker only on the target page -->
    <!-- renamed and modified version of the datepicker experiment from JQM -->
    <script type="text/javascript" src="jquery.ui.datepicker.js"></script>
    <script type="text/javascript" src="jquery-mobile-calendar.js"></script>
</head> 
<body> 
    <div data-role="page" id="pg_2"> 
        <div data-role="header">
            <h1>Ajax page test with date input field</h1>
        </div>

        <div id="content_div" data-role="content">
            <p>
                <input type="date" name="date" value="" />
                <a data-role="button" href="index.html">Back</a>
            </p>
        </div>
    </div>
</body>

Explanation

This issue is not related to GET parameters and the ajax request.
The problem is caused by the datepicker plugin for jQuery Mobile, when included in the landing page.

If you have to include the script always, you will need to disabled the use of ajax via:
rel="external" data-ajax="false"

Solution

Landing page

<!-- Do not include the datepicker script in the landing page -->
<div data-role="page" id="pg_1"> 
    <div data-role="header">
        <h1>Ajax page test with date input field</h1>
    </div>

    <div id="content_div" data-role="content">
        <p>
            <a data-role="button" href="loadme.html">To the calendar</a>
        </p>
    </div>
</div>

Calendar page

<head>
    <!-- include datepicker only on the target page -->
    <!-- renamed and modified version of the datepicker experiment from JQM -->
    <script type="text/javascript" src="jquery.ui.datepicker.js"></script>
    <script type="text/javascript" src="jquery-mobile-calendar.js"></script>
</head> 
<body> 
    <div data-role="page" id="pg_2"> 
        <div data-role="header">
            <h1>Ajax page test with date input field</h1>
        </div>

        <div id="content_div" data-role="content">
            <p>
                <input type="date" name="date" value="" />
                <a data-role="button" href="index.html">Back</a>
            </p>
        </div>
    </div>
</body>

回复收藏 0 原文

沉溺在你眼里的海 2024-12-14 09:02:49

是的，你可以，但分为两步：
首先，将您的网址分为两部分，先到 ? 之前，再到 ? 之前。另一部分是 ? 之后的数据。要做到这一点，你必须使用 javascript reg-expression，做一些研究。
其次，在 url（属性）部分中使用 jquery mobile 中的 ajax，您将使用 javascript reg-expression 获得的第一部分和数据（属性）部分中的第二部分

回复收藏 0 原文

猥琐帝 2024-12-14 09:02:49

你尝试过 $.mobile.loadPage 吗？

您可以在这里找到有关此方法的文档

jquerymobile api 方法 $.mobile.loadPage< /a>

所以，你可以尝试做这样的事情:

<a href="#" onclick="loadNewContain();"> Link </a>

<script>
function loadNewContain()
{
$.mobile.loadPage('http://www.sampleurl.com/tool.dll?&name=first&more=parameters');
}
</script>

did you try with $.mobile.loadPage?

you can find the documentation about this method here

jquerymobile api methods $.mobile.loadPage

so, you can try to do somethig like this:

<a href="#" onclick="loadNewContain();"> Link </a>

<script>
function loadNewContain()
{
$.mobile.loadPage('http://www.sampleurl.com/tool.dll?&name=first&more=parameters');
}
</script>

回复收藏 0 原文

猫弦 2024-12-14 09:02:49

我认为你应该尝试：

<a href="/tool.dll?name=second&more=parameters"> Link </a>

没有 ?&... 应该可以解决问题。 HTML 无法识别？&作为有效参数。

I think you should try:

<a href="/tool.dll?name=second&more=parameters"> Link </a>

Without the ?&... that should do the trick. HTML doesn't recognize ?& as a valid parameter.

回复收藏 0 原文

~没有更多了~

关于作者

厌倦

暂无简介

0 文章

0 评论

24 人气

关注发私信

友情链接

文江博客

在 jQuery Mobile 中通过 ajax 加载带参数的 url

问题

详细信息

代码示例

新见解（编辑）

Problem

Details

Code samples

New insights (edit)

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（4）

说明

解决方案

登陆页面

日历页面

Explanation

Solution

Landing page

Calendar page

关于作者

相关话题

热门标签

推荐作者

胡图图

zt006

z祗昰~

冰葑

野の

天空

友情链接

在 jQuery Mobile 中通过 ajax 加载带参数的 url

问题

详细信息

代码示例

新见解（编辑）

Problem

Details

Code samples

New insights (edit)

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（4）

说明

解决方案

登陆页面

日历页面

Explanation

Solution

Landing page

Calendar page

关于作者

相关话题

热门标签

推荐作者

胡图图

zt006

z祗昰~

冰葑

野の

天空

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。