JQuery Mobile 中的重定向错误 [英] Error with Redirects in JQuery Mobile

查看：22
本文介绍了JQuery Mobile 中的重定向错误的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

当我在帖子中重定向返回显示表单的页面时，JQuery Mobile 向我显示结果而不是表单.

假设我有三个资源:

/=>只显示/redirect_to 资源的链接，这是为了测试/redirect_to =>GET:显示一个表格，在/thank_you 中说出你的名字/redirect_to =>POST:只是重定向到/thank_you 显示您输入的名称/thank_you =>GET:显示文本谢谢你的名字！"

在我到达Thank You!页面后，如果我尝试回家，然后转到/redirect_to我得到/的内容感谢 而不是/redirect_to 的形式，如果我刷新页面，我会得到表单.

因此，我看到的是 thank_you 页面，而不是查看 redirect_to 的表单.

这是Sinatra中的代码，如果你不明白，此时我会用Flask、Snap、Rails、Django(我的应用程序在Django上)重写它...但它应该足以阅读.这是 Github 上的代码(因为 StackOverflow 没有检测到我的 ruby​​):https://gist.github.com/1061639

要运行应用程序，您基本上需要安装 sinatra:gem install sinatra

并运行它:./jquerymobile_redirect_error.rb

#!/usr/bin/env ruby需要红宝石"需要'sinatra'得到'/'做<<-end_page<!DOCTYPE html><头><link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.css"/><script src="http://code.jquery.com/jquery-1.6.1.min.js"></script><script src="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js"></script><身体><div data-role="页面"><div data-role="header" data-position="fixed"><h1>JQuery 错误</h1><a href="/" data-icon="home">首页</a><a href="/" data-icon="delete">注销</a></div><!--/header --><div data-role="内容"><h1>转到/redirect_to <a href="/redirect_to">这里</a>.</div><!--/content --><div data-role="footer" data-position="fixed"><h1>页脚</h1></div><!--/footer --></div><!--/page -->页尾结尾得到 '/redirect_to' 做<<-end_page<!DOCTYPE html><头><link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.css"/><script src="http://code.jquery.com/jquery-1.6.1.min.js"></script><script src="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js"></script><身体><div data-role="页面"><div data-role="header" data-position="fixed"><h1>JQuery 错误</h1><a href="/" data-icon="home">首页</a><a href="/" data-icon="delete">注销</a></div><!--/header --><div data-role="内容"><form action="/redirect_to" method="post" accept-charset="utf-8"><p><label for="name">Name</label><input type="text" id="name" name="name" value="" id="name" placeholder="input你的名字"><p><input type="submit" value="重定向到/thank_you &rarr;"></p></表单></div><!--/content --><div data-role="footer" data-position="fixed"><h1>页脚</h1></div><!--/footer --></div><!--/page -->页尾结尾发布 '/redirect_to' 做重定向/thank_you/#{params[:name]}"结尾get '/thank_you/:name' do |name|<<-end_page<!DOCTYPE html><头><link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.css"/><script src="http://code.jquery.com/jquery-1.6.1.min.js"></script><script src="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js"></script><身体><div data-role="页面"><div data-role="header" data-position="fixed"><h1>JQuery 错误</h1><a href="/" data-icon="home">首页</a><a href="/" data-icon="delete">注销</a></div><!--/header --><div data-role="内容"><h1>谢谢#{name}！</h1></div><!--/content --><div data-role="footer" data-position="fixed"><h1>页脚</h1></div><!--/footer --></div><!--/page -->页尾结尾

解决方案

为您的thank_you 页面指定data-url.这会强制更改表单提交时的 url.

我从重定向和链接到目录.

<块引用>

这也允许您返回因重定向而改变的 url，例如，您可以将表单发布到/login.html"，但在成功提交后从 url/account"返回页面.

When I redirect in a post going back to the page that shows the form, JQuery mobile shows me the results instead of the form.

Lets say I have three resources:

/ => Just shows a link to the /redirect_to resource, this is to test
/redirect_to => GET: Shows a form to say your name in /thank_you
/redirect_to => POST: Just redirects to /thank_you showing the name that you input
/thank_you => GET: Shows a text "Thank you name!"

After I get to the Thank You! page, if I try to go back home, and then go to /redirect_to I get the content of /thank_you instead of the form of /redirect_to, if I refresh the page I get the form.

So instead of looking at the form to redirect_to I see the thank_you page.

Here is the code in Sinatra if you don't understand it, at this point I'll re-write it in Flask, Snap, Rails, Django (my app is on Django)... but it should be good enough to read. Here is the code on Github (Since StackOverflow doesn't detect my ruby): https://gist.github.com/1061639

To run the app you basically install sinatra: gem install sinatra

And run it: ./jquerymobile_redirect_error.rb

#!/usr/bin/env ruby

require 'rubygems'
require 'sinatra'

get '/' do
  <<-end_page
<!DOCTYPE html> 
<html> 
  <head> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.css" />
    <script src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js"></script>
  </head>
  <body>
    <div data-role="page">
      <div data-role="header" data-position="fixed">
        <h1>JQuery Error</h1>
        <a href="/" data-icon="home">Home</a>
        <a href="/" data-icon="delete">Logout</a>
      </div><!-- /header -->

      <div data-role="content">
        <h1>Go to /redirect_to <a href="/redirect_to">here</a>.
      </div><!-- /content -->

      <div data-role="footer" data-position="fixed">
        <h1>Footer</h1>
      </div><!-- /footer -->
    </div><!-- /page -->
  </body>
</html>
  end_page
end

get '/redirect_to' do
  <<-end_page
<!DOCTYPE html> 
<html> 
  <head> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.css" />
    <script src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js"></script>
  </head>
  <body>
    <div data-role="page">
      <div data-role="header" data-position="fixed">
        <h1>JQuery Error</h1>
        <a href="/" data-icon="home">Home</a>
        <a href="/" data-icon="delete">Logout</a>
      </div><!-- /header -->

      <div data-role="content">
        <form action="/redirect_to" method="post" accept-charset="utf-8">
          <p><label for="name">Name</label><input type="text" id="name" name="name" value="" id="name" placeholder="input your name">
          <p><input type="submit" value="Redirect to /thank_you &rarr;"></p>
        </form>
      </div><!-- /content -->

      <div data-role="footer" data-position="fixed">
        <h1>Footer</h1>
      </div><!-- /footer -->
    </div><!-- /page -->
  </body>
</html>
  end_page
end

post '/redirect_to' do
  redirect "/thank_you/#{params[:name]}"
end

get '/thank_you/:name' do |name|
  <<-end_page
<!DOCTYPE html> 
<html> 
  <head> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.css" />
    <script src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js"></script>
  </head>
  <body>
    <div data-role="page">
      <div data-role="header" data-position="fixed">
        <h1>JQuery Error</h1>
        <a href="/" data-icon="home">Home</a>
        <a href="/" data-icon="delete">Logout</a>
      </div><!-- /header -->

      <div data-role="content">
        <h1>Thanks #{name}!</h1>
      </div><!-- /content -->

      <div data-role="footer" data-position="fixed">
        <h1>Footer</h1>
      </div><!-- /footer -->
    </div><!-- /page -->
  </body>
</html>
  end_page
end

解决方案

Specify data-url for your thank_you page. That forces change of url on form submit.

<div data-role="page" data-url="/thank_you">

I found that info from the docs under Redirects and linking to directories.

This also allows you to return urls that change as the result of a redirect, for example, you might post a form to "/login.html" but return a page from the url "/account" after a successful submission.

这篇关于JQuery Mobile 中的重定向错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆