2012-03-22 42 views
9

Tôi đang sử dụng jQuery 1.6.4 với jQuery Mobile 1.0.1. Tôi đang gặp sự cố bất cứ lúc nào bạn liên kết đến một trang mà sau đó cố gắng thực hiện chuyển hướng 301.Vấn đề chuyển hướng jQuery Mobile 301

tôi đã thiết lập một trang mẫu tại địa chỉ: http://www.widgetsandburritos.com/jquery-mobile-test/

Điều duy nhất trên trang này là jQuery Mobile bao gồm và liên kết đến trang khác mà có một 301 redirect ở một nơi khác.

<!DOCTYPE html> 
<html> 
    <head> 
     <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" /> 
     <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> 
     <script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script> 
    </head> 
    <body> 
     <a href="301test.php">301 test</a>  
    </body> 
</html> 

301test.php có nội dung sau:

<?php 
header("HTTP/1.1 301 Moved Permanently"); 
header("Location: 301success.html"); 
?> 

này nên chỉ đơn giản là vượt qua trình duyệt để 301success.html. Nó hoạt động nếu bạn trực tiếp đi đến URL

http://www.widgetsandburritos.com/jquery-mobile-test/301test.php

đó Nhưng khi bạn nhấp vào liên kết từ trang sử dụng jQuery Mobile, nó cho thấy "không xác định" để thay thế. JQuery Mobile hiện không có khả năng xử lý chuyển hướng?

Bất kỳ công việc nào có thể xảy ra xung quanh?

Cảm ơn sự giúp đỡ của bạn.

EDIT [3/23/12 00:41 CST]

I also posted this problem on the jQuery Mobile forums. Ai đó đã đề nghị thêm rel = "external" vào thẻ anchor. Kỹ thuật này hoạt động nếu tất cả những gì bạn đang làm là tạo liên kết nhưng sẽ không khắc phục được sự cố nếu bạn chuyển hướng qua một số cơ chế khác, chẳng hạn như yêu cầu POST.

Để minh họa, tôi đã thiết lập một thử nghiệm thứ tại http://www.widgetsandburritos.com/jquery-mobile-test/test2.html

<!DOCTYPE html> 
<html> 
     <head> 
       <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" /> 
       <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> 
       <script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script> 
     </head> 
     <body> 

       <form method="post" action="301test.php"> 
         <input type="submit" value="test" /> 
       </form> 

     </body> 
</html> 

Thay vì đến tại 301test.php chuyển hướng trang từ một liên kết, nó bây giờ vị trí của một hình thức chúng tôi đang gửi đến. Bối cảnh này sẽ được sử dụng, sẽ là như vậy nếu bạn gửi một biểu mẫu có lỗi, nó sẽ ở lại trên cùng một trang cho phép bạn sửa lỗi. Nếu không có lỗi, nó sẽ chuyển bạn đến trang thành công. Việc này được thực hiện để tránh gửi lại biểu mẫu nếu người dùng làm mới trình duyệt của họ. Nó hoạt động rực rỡ trong các ứng dụng web thông thường. Nhưng trong combo với jQuery Mobile nó dường như không hoạt động.

Chỉ cần nghĩ rằng tôi sẽ đưa ra một số ngữ cảnh bổ sung cho bất kỳ ai khác theo dõi vấn đề này.

Trả lời

20

Đã tìm ra câu trả lời cho vấn đề của riêng tôi. Ở trên, tôi đã đề cập rằng điều này đã gây ra sự cố khi sử dụng thẻ < biểu mẫu >. Sau khi duyệt qua tài liệu về jQuery Mobile, tôi tìm thấy trang này: http://jquerymobile.com/test/docs/forms/forms-sample.html

Bí quyết ở đây là nếu bạn đang thực hiện một biểu mẫu, buộc nó không sử dụng AJAX. Bạn làm điều này bằng cách thêm

data-ajax = "false" vào thẻ FORM.

Vì vậy, điều này thay đổi

<form method="post" action="301test.php"> 

để

<form method="post" action="301test.php" data-ajax="false"> 

Và chỉ để nhắc lại những gì đã nói ở trên. Nếu bạn cần phải làm điều gì đó với một liên kết anchor, chỉ cần thêm rel = "external" vào nó.

Vì vậy, điều này thay đổi

<a href="301test.php">301 test</a> 

để

<a href="301test.php" rel="external">301 test</a> 
+1

Chỉ cần có chút của thành viên này bản thân mình và thay đổi tag hình thức của tôi để bao gồm dữ liệu-ajax = 'false' hiện lừa. – Aaron

+2

Hoàn hảo, chỉ là những gì tôi cần! – user1105056

3

Vấn đề là sâu sắc hơn. Hãy xem here hoặc here.

Dường như đối tượng XMLHttpRequest (đối tượng được sử dụng để thực hiện các yêu cầu AJAX) tự điều khiển chuyển hướng và trả về phản hồi cuối cùng. Điều đó có nghĩa là jQuery Mobile không thể biết rằng nó sẽ cập nhật URL.

Giải pháp là sử dụng thuộc tính data-url trên trang cuối cùng. Nó buộc jQuery Mobile cập nhật URL trong trình duyệt. Một loại cách giải quyết nhưng không phải là một hack. Bằng cách này, có nhiều vấn đề hơn với jQuery Mobile, AJAX và chuyển hướng - ví dụ nếu bạn nhấp vào nút quay lại của trình duyệt sau khi chuyển hướng AJAX, jQuery Mobile (tối đa 1.1) có thể tạo trang cuối cùng dưới URL của trang chuyển hướng. Do đó, sử dụng data-ajax = "false" là một lựa chọn khôn ngoan.

EDIT:

Nhưng ngay cả dữ liệu ajax = "false" không phải là một giải pháp chống đạn. Việc sử dụng nó sẽ chia ứng dụng dành cho thiết bị di động của bạn thành nhiều trang trình duyệt, điều này mang lại tất cả sự khác biệt về trình duyệt cho bên. Ví dụ: Firefox có tên là bf cache trong khi Chrome doesn't. Đây là một mớ hỗn độn không lành mạnh và tôi bắt đầu nghĩ rằng một cái gì đó giống như Sencha Touch phù hợp hơn cho việc phát triển các trang giả vờ là ứng dụng dành cho thiết bị di động.

EDIT 2:

Ngoài ra, người ta có thể tránh hình thức đệ trình thường xuyên và sử dụng mã AJAX riêng cho điều đó và sau đó chuyển sang trang dựa trên kết quả, nhưng tôi không thể cưỡng lại nghĩ rằng đó là năm 2012 và những việc như vậy nên tự động và làm việc hoàn hảo mà không đổ mồ hôi.

0

Tôi hiện đang xây dựng một ứng dụng nhưng mặc dù tôi đã đăng nhập, tôi vẫn ở trên trang đăng nhập và tôi không được chuyển hướng. Tôi đã sử dụng các dữ liệu ajax = "false"

này là mã có dạng:

<section id="login"> 
      <h2>Want to take a ride? <span>Login</span></h2> 
      <form action="<?php echo $_SERVER['PHP_SELF'];?>" method="post" data-ajax="false"> 
        <?php if(!empty($feedback_error)): ?> 
<div id="feedback_error"> 
<p><h1><?php echo $feedback_error ?></h1></p> 
</div> 
<?php endif; ?> 
       <input id="username" type="text" name="username" placeholder="username" /> 
       <input id="password" type="password" name="password" placeholder="password" /> 

       <p>Not yet signed up? <a href="register.php" >Register</a></p> 

       <input type="submit" name="btnLogin" data-theme="b" value="Sign in"> 
      </form> 
     </section> 
+0

Đây có phải là câu hỏi không? Bạn cần phải bắt đầu một câu hỏi mới nếu nó là (và có lẽ sẽ muốn đăng thêm thông tin). –

Các vấn đề liên quan