Skip to main content
 首页 » 编程设计

jquery-mobile之JQuery Mobile中的重定向错误

2025年01月19日11davidwang456

当我重定向到显示表单页面的帖子中时,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!" 

等我到了谢谢!页面,如果我尝试返回家中,然后转到 /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 

请您参考如下方法:

为您的thank_you页面指定data-url。这迫使表单提交中的URL更改。

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

我从 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.