Проблемы с редиректом jQuery Mobile 301 - PullRequest
Новая
       37

Проблемы с редиректом jQuery Mobile 301

9 голосов
/ 22 марта 2012

Я использую jQuery 1.6.4 с jQuery Mobile 1.0.1. Я сталкиваюсь с проблемой каждый раз, когда вы ссылаетесь на страницу, которая затем пытается выполнить редирект 301.

Я настроил образец страницы по адресу: http://www.widgetsandburritos.com/jquery-mobile-test/

Единственное, что есть на этой странице, - это jQuery Mobile, включающий ссылку на другую страницу с перенаправлением 301 в другое место. 

<!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 имеет следующее содержание: 

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

Для этого нужно просто передать браузер в 301success.html. Это работает, если вы перейдете по этому адресу

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

Но когда вы нажимаете на ссылку со страницы с помощью jQuery Mobile, вместо нее отображается «неопределенное». JQuery Mobile в настоящее время не может обрабатывать перенаправления?

Любые возможные способы обхода?

Спасибо за вашу помощь.

РЕДАКТИРОВАТЬ [23.03.12, 12:41 AM CST]

Я также разместил эту проблему на форумах jQuery Mobile . Кто-то там порекомендовал добавить rel = "external" к тегу привязки. Технически это работает, если все, что вы делаете - это создание ссылки, но не решит проблему, если вы попадете на перенаправление с помощью какого-либо другого механизма, такого как запрос POST.

Для иллюстрации я настроил вторичный тест на 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>

Вместо того, чтобы перейти на страницу перенаправления 301test.php по ссылке, теперь это местоположение формы, которую мы отправляем. Контекст, который будет использоваться, будет таким, что если вы отправите форму с ошибками, она останется на той же странице, что позволит вам исправить ошибки. Если не было ошибок, он перенаправляет вас на страницу успеха. Это сделано, чтобы избежать повторной отправки формы, если пользователь обновляет свой браузер. Он отлично работает в обычных веб-приложениях. Но в сочетании с jQuery Mobile это, похоже, не работает.

Просто подумал, что я бы дал дополнительный контекст кому-либо еще после этой проблемы.

Ответы [ 3 ]

20 голосов
/ 23 марта 2012

Разобрался с ответом на мою проблему.Выше я упоминал, что это вызывает проблемы при использовании тега .После просмотра документации по jQuery Mobile я нашел эту страницу: http://jquerymobile.com/test/docs/forms/forms-sample.html

Хитрость здесь в том, что если вы делаете форму, вынудите ее не использовать AJAX.Это можно сделать, добавив

data-ajax = "false" к тегу FORM.

Так что это изменит 

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

на 

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

И просто повторить сказанное выше.Если вам нужно что-то сделать со ссылкой, просто добавьте rel = "external" к нему.

Таким образом, это изменится 

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

на 

<a href="301test.php" rel="external">301 test</a>
3 голосов
/ 09 августа 2012

Проблема глубже.Взгляните здесь или здесь .

Похоже, что объект XMLHttpRequest (тот, который используется для выполнения запросов AJAX) самостоятельно обрабатывает перенаправления и возвращает окончательный ответ.Это означает, что jQuery Mobile не может знать, что он должен обновить URL.

Решение состоит в том, чтобы использовать атрибут data-url на последней странице.Это заставляет jQuery Mobile обновлять URL в браузере.Это своего рода обходной путь, но далеко не хакерский.

Кстати, с jQuery Mobile, AJAX и перенаправлениями возникают другие проблемы, например, если вы нажмете кнопку возврата браузера после AJAX-перенаправления, jQuery Mobile (до 1.1) может привести к созданию последней страницы под URL перенаправляющей страницы.Поэтому использование data-ajax = "false" является разумным выбором.

EDIT:

Но даже data-ajax = "false" являетсяне пуленепробиваемое решение.С его помощью ваше мобильное приложение разбивается на несколько страниц браузера, что приводит к появлению всех видов различий между браузерами.Например, Firefox имеет так называемый bf cache , тогда как Chrome не .Это безобразный беспорядок, и я начинаю думать, что что-то вроде Sencha Touch гораздо лучше подходит для разработки страниц, которые претендуют на роль мобильных приложений.

РЕДАКТИРОВАТЬ 2:

В качестве альтернативы можно было быизбегайте регулярной отправки форм и используйте для этого собственный код AJAX, а затем переключайтесь между страницами в зависимости от результата, но я не могу удержаться от мысли, что это 2012 год, и такие вещи должны быть автоматизированы и работать без нареканий.

0 голосов
/ 10 декабря 2013

В настоящее время я создаю приложение, но, несмотря на то, что я вошел в систему, я остаюсь на странице входа в систему и не перенаправляюсь.Я использовал data-ajax = "false"

это код вида: 

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