url中的哈希＃时jquery移动表单提交不起作用

Posted 2023-05-09

【中文标题】url中的哈希＃时jquery移动表单提交不起作用

【英文标题】：jquery mobile form submit not working when hash # in url

【发布时间】：2011-08-18 00:10:40

【问题描述】：

我正在使用 jquery mobile 1.0 alpha 4.1 来构建登录表单。

当我第一次加载登录表单时，它提交得很好： http://m.myapp.local/

表单动作如下：

<form action="http://m.myapp.local/default/login" method="post">            

这在第一次登录尝试时工作正常，但是当登录失败时，我们返回以下 URL（这是 jquery mobile 这样做的）： http://m.myapp.local/#default/login

现在，当我尝试再次登录/再次提交表单时，没有任何反应，我可以调试以查找错误。它说：

javascript console: Uncaught TypeError: Cannot call method '_trigger' of undefined

当我进一步调试时，我看到 jquery mobile 正在尝试提交到以下 url： http://m.myapp.local/default/logindefault/login 代替 http://m.myapp.local/default/login

当然，导致错误的 url 不存在。问题是，如何防止 jq mobile 出现这种行为？

完整格式：

<div data-role="content" data-theme="c">
<form action="http://m.myapp.local/default/login" method="post">            
    
<div data-role="fieldcontain" class="center">
<input placeholder="Shop Name" id="login_sitename" type="text" value="" name="sitename" />
<input placeholder="Email" id="login_username" type="text" value="" name="username" />                      
<input placeholder="Password" id="login_password" type="password" name="password" />
</div>
                            
<button type="submit" data-theme="b">Log in</button>
</form>
</div>

我注意到的一件奇怪的事情是，当我从 url 中删除 hash 标记并再次提交表单时，一切正常，因此肯定与此有关。

但是，当我删除哈希标签时，它也停止使用过渡，后退按钮也消失了，jquery 移动“加载”对话框也消失了......

---

似乎这是一个 jquery 错误。使用 alpha 2 时，它可以工作...

<script type="text/javascript" src="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.js"></script>

【问题讨论】：

您能否发布更多代码，以便我们看看您要完成的工作？

这个是单页/多页，ajax/changePage()/普通表单提交，如何从一个页面过渡到另一个页面等等...

这可能会有所帮助：codeasp.net/blogs/teisenhauer/microsoft-net/1049/… 或这个：devgrow.com/jquery-mobile-php-mvc-framework

嗨，菲尔，我已经用完整的表单代码更新了上面的代码。我在jquery mobile中使用了标准的表单提交方式，所以我猜这是正常的表单提交？还是 ajax/changepage？

codeasp.net 示例似乎在 url 中使用了另一种哈希，也许这与它有关？ /#./user/login

【参考方案1】：

您可以尝试禁用 AJAX 以进行表单发布。我在我的网站上遇到了同样的问题：

http://jquerymobile.com/demos/1.0a4.1/#docs/api/globalconfig.html http://jquerymobile.com/demos/1.0a4.1/#docs/forms/forms-sample.html

你可以在提交链接中试试这个： data-ajax="假"

【参考方案2】：

尝试使用“%23”（不带引号）代替# 符号。因此，如果 URL 显示为

http://jquerymobile.com/demos/1.0a4.1/#docs/forms/forms-sample.html

替换为

http://jquerymobile.com/demos/1.0a4.1/%23docs/forms/forms-sample.html

希望这会有所帮助！