在JQuery Mobile中重定向时出错

igo*_*gue 23 jquery-mobile

当我在一个帖子中重定向回到显示表单的页面时,JQuery mobile会向我显示结果而不是表单.

可以说我有三个资源:

/ => 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!"
Run Code Online (Sandbox Code Playgroud)

在我到达谢谢你之后!页面,如果我试图回家,然后去/redirect_to我得到的内容/thank_you而不是形式/redirect_to,如果我刷新页面,我得到表格.

因此,redirect_to我没有看到表单,而是看到了thank_you页面.

如果您不理解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

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
Run Code Online (Sandbox Code Playgroud)

Hei*_*kki 27

指定data-url您的thank_you页面.这迫使表单提交更改网址.

<div data-role="page" data-url="/thank_you">
Run Code Online (Sandbox Code Playgroud)

我从重定向下的文档中找到了信息并链接到了目录.

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

  • 谢谢,这个答案保存了整整一个月!对于可能会遇到这种情况的其他人来说,如果你有一个,那么将request.fullpath的值分配给主布局页面上的data-url通常是一个好主意.对我来说,它可能同时解决了5个以上的错误. (2认同)