Как сделать редирект ajax

Добавил пользователь Владимир З.
Обновлено: 10.09.2024

Добрый день или ночь или вечер или утро.

Столкнулся с интересной проблемой, есть частичное представление с аяксовой формой для ввода логина и пароля. Аяксовая потому что некоторый контент доступен и без аутентификации, и что бы не перегружать страницу полностью было принято сделать ее аяксовой. Но всегда есть 'но', после того как логин и пароль подходят, нужно сделать редирект на дргой контроллер и экшн, а возвращается мне вся страница с и контент страницы на которую должно перейти вставлен в тот контейнер который указан в UpdateTargetId. Вопрос собственно такой как сделать редирект на другую страницу из аяксовой формы которая делает реплейс?
Код формы:
@using (Ajax.BeginForm("Login", "Main",
new AjaxOptions()
HttpMethod = "POST",
UpdateTargetId = "sidebar",
InsertionMode = InsertionMode.Replace
>))

Код action:
[HttpPost]
public ActionResult Login(LoginModel model)
if (ModelState.IsValid)
LoginService loginServ = new LoginService(System.Web.Configurati on.WebConfigurationManager.Connecti onStrings["AMConnectionString"].ConnectionString);
switch (loginServ.Authenticate(model))
<
// case 1: для администратора направлять на админскую часть.

case 2: return RedirectToAction("Test","Main");
>
default:
return PartialView(model);
>
>
>
else
return PartialView(model);
>
>

Сегодня мы собираемся исследовать концепцию AJAX с PHP. Техника AJAX помогает вам улучшить пользовательскии? интерфеи?с вашего приложения и улучшить общее восприятие конечного пользователя.

Что такое AJAX?

AJAX расшифровывается как асинхронныи? JavaScript и XML и позволяет асинхронно извлекать контент с внутреннего сервера без обновления страницы. Таким образом, он позволяет обновлять содержимое веб-страницы без перезагрузки.

Обычныи? подход заключается в создании различных веб-страниц для каждого раздела. Так, например, пользователи кликают по ссылке социальнои? информации, чтобы перезагрузить браузер и отобразить страницу с социальнои? информациеи?. Это замедляет навигацию между разделами, поскольку пользователю приходится ждать перезагрузки браузера и повторного отображения страницы каждыи? раз.

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

Общии? вызов AJAX работает примерно так:

Даваи?те быстро прои?демся по обычному потоку AJAX:

Сначала пользователь, как обычно, открывает веб-страницу синхронным запросом.
Затем пользователь нажимает на элемент DOM - обычно кнопку или ссылку - которыи? инициирует асинхронныи? запрос к серверу. Конечныи? пользователь не заметит этого, поскольку вызов выполняется асинхронно и не обновляет браузер. Однако вы можете распознать эти AJAX-вызовы с помощью такого инструмента, как Firebug.
В ответ на запрос AJAX сервер может вернуть данные строки XML, JSON или HTML.
Данные ответа анализируются с использованием JavaScript.
Наконец, проанализированные данные обновляются в DOM веб-страницы.

Итак, как вы можете видеть, веб-страница обновляется данными в реальном времени с сервера без перезагрузки браузера.

В следующем разделе мы расскажем, как реализовать AJAX с использованием ванильного JavaScript.

Как AJAX работает с использованием Vanilla JavaScript

В этом разделе мы увидим, как AJAX работает в обычном JavaScript. Конечно, есть доступные библиотеки JavaScript, которые облегчают выполнение AJAX-вызовов, но всегда интересно знать, что происходит внутри.

Даваи?те посмотрим на следующии? ванильныи? код JavaScript, которыи? выполняет вызов AJAX и асинхронно получает ответ от сервера.

Даваи?те прои?демся по приведенному выше коду, чтобы понять, что происходит за кулисами.

Вот как AJAX работает с ванильным JavaScript. Конечно, это был очень простои? пример для демонстрации концепции AJAX, и в реальном приложении все может быть довольно сложно, так как вам нужно обработать многие различные сценарии успеха и неудач. Таким образом, было бы неплохо выбрать библиотеку JavaScript, которая скрывает специфические сложности браузера!

В следующем разделе мы увидим, как использовать библиотеку jQuery для выполнения вызовов AJAX.

Как работает AJAX с использованием библиотеки jQuery

В предыдущем разделе мы обсуждали, как можно выполнять вызовы AJAX, используя ванильныи? JavaScript. В этом разделе мы будем использовать библиотеку jQuery, чтобы продемонстрировать это. Я предполагаю, что вы знаете основы библиотеки jQuery.

Библиотека jQuery предоставляет несколько различных методов для выполнения вызовов AJAX, хотя здесь мы рассмотрим стандартныи? метод ajax , которыи? используется чаще всего.

Посмотрите на следующии? пример.

Как вы уже знаете, знак $ используется для ссылки на объект jQuery.

Первым параметром метода ajax является URL-адрес, которыи? будет вызываться в фоновом режиме для получения содержимого со стороны сервера. Второи? параметр имеет формат JSON и позволяет указывать значения для некоторых различных параметров, поддерживаемых методом ajax .

В большинстве случаев вам нужно будет указывать функции обратного вызова (коллбеки) для успешного выполнения и для ошибок. Функция обратного вызова для успеха будет вызвана после успешного завершения вызова AJAX. Ответ, возвращенныи? сервером, будет передан коллбеку для успеха. С другои? стороны, коллбек для ошибки будет вызван, если что-то пои?дет не так, и возникла проблема при выполнении вызова AJAX.

Итак, как вы можете видеть, AJAX-операции легко выполнять с помощью библиотеки jQuery. Фактически, процесс более или менее одинаков, независимо от библиотеки JavaScript, с которои? вы решаете выполнять вызовы AJAX.

В следующем разделе мы увидим реальныи? пример, чтобы понять, как все это работает с PHP.

Реальныи? пример AJAX с PHP

В этом разделе мы создадим пример, которыи? извлекает контент JSON из фаи?ла PHP на стороне сервера, используя AJAX.

Для демонстрации мы создадим пример, которыи? выполняет вход пользователя с использованием AJAX и jQuery. Для начала даваи?те создадим фаи?л index.php, как показано в следующем фрагменте, которыи? отображает базовую форму входа.

Фаи?л index.php представляет собои? довольно стандартную HTML-форму, которая содержит поля имени пользователя и пароля. Он также содержит фрагмент JavaScript jQuery, которыи? следует схеме, которую мы видели выше.

Мы использовали событие submit элемента формы, которое будет срабатывать, когда пользователь нажимает кнопку отправки. В этом обработчике событии? мы инициировали вызов AJAX, которыи? отправляет данные формы в фаи?л login.php, используя метод POST асинхронно. Получив ответ от сервера, мы анализируем его, используя метод parse объекта JSON . И наконец, основываясь на успехе или неудаче, мы предпринимаем соответствующие деи?ствия.

Даваи?те также посмотрим, как выглядит login.php.

Фаи?л login.php содержит логику аутентификации пользователеи? и возвращает ответ JSON, основанныи? на успешном или неудачном входе в систему.

Заключение

В этом уроке мы обсудили основы AJAX и его работу в PHP. В первои? половине статьи мы рассмотрели, как AJAX работает в ванильном JS и в библиотеке jQuery. Во второи? половине мы создали реальныи? пример, которыи? продемонстрировал, как вы можете использовать AJAX для извлечения PHP содержимого на стороне сервера.

Если у вас есть какие-либо сомнения или вопросы, не стесняи?тесь выражать свои мысли, используя канал ниже!

Примеры редиректов или же перенаправлений на другую страницу.

Редирект в HTML

Редирект в JavaScript

Метод replace() позволяет заменить одну страницу другой таким образом, что это замещение не будет отражено в истории просмотра HTML-страниц (history) браузера

Метод reload() полностью моделирует поведение браузера при нажатии на кнопку reload в панели инструментов. Если вызывать метод без аргумента или указать его равным true , то браузер проверит время последней модификации документа и загрузит его либо из кеша (если документ не был модифицирован), либо с сервера. Такое поведение соответствует нажатию на кнопку reload . Если в качестве аргумента указать false , то браузер перезагрузит текущий документ с сервера. Такое поведение соответствует одновременному нажатию на reload и кнопки клавиатуры shift (reload+shift) .

Следующие примеры тоже перенаправят на google:

С помощью функции setTimeout возможно реализовать задержку переадресации перед выполнением редиректа (в примере - 5 секунд):

Простой пример редиректа с таймером:

Редирект в PHP

В php есть функция header() , которая разрешает не только подменять стандартные заголовки, но и добавлять новые.

Редирект HTML в PHP:

Второй вариант, аналогичный по смыслу, но может быть полезным, если установка кода и редирект должны осуществляться в разных местах:

Первая строка указывает код http, а вторая, собственно, задает адрес. В большинстве случаев, проблем не возникнет. Однако, если у вас используется режим FastCGI , то вместо "HTTP/1.1 301 Moved Permanently" может потребоваться написать "Status: 301 Moved Permanently" .

Редирект в .htaccess (RewriteEngine)

Необязательный параметр status - это три цифры - код редиректа (например, 301). Если не указан, то по умолчанию подставляется 302.

URL-path - часть запрашиваемого пользователем (или поисковиком) адреса, которая должна обязательно начинаться со слеша (/)

Если URL-path заканчивается не слешем, то редирект будет срабатывать только в случае точного совпадения запрошенного пользователем адреса и URL-path .

Если URL-path заканчивается слешем, то редирект сработает не только для указанного адреса, но и для всех, которые начинаются на указанный. А к URL-to-redirect будет добавлена часть адреса, следующая за последним указанным слешем в URL-path .

Действие директивы RedirectMatch аналогично Redirect , но в параметрах URL-regexp и URL-to-redirect можно использовать регулярные выражения.

У директивы RewriteRule более широкий спектр применения. Который, в числе прочих возможностей, разрешает ее использования и для редиректа - с указанием в конце строки в квадратных скобках [ ] флагов L (выполнить немедленно) и R (редирект).

A public platform building the definitive collection of coding questions & answers

A community-based space to find and contribute answers to technical challenges, and one of the most popular websites in the world.

A private collaboration & knowledge sharing SaaS platform for companies

A web-based platform to increase productivity, decrease cycle times, accelerate time to market, and protect institutional knowledge.

Thousands of organizations around the globe use Stack Overflow for Teams

Capture your company’s knowledge and context in a discoverable format to unblock your team

Increase productivity

If somebody somewhere has the right answer, suddenly you have it too. Collaborate better in a remote-first world.

Accelerate time to market

Shorten the time between initial idea and complete product. Take delays and misinformation out of the equation.

Protect institutional knowledge

People come and people go, but if you capture their contributions in one central place, that expertise sticks around.

Ensure your company stays on course

Here are just a few types of technologists that we help.

DevOps engineers

Shipping new products and features requires teamwork and coordination. Forget checklists and long docs no one ever reads.

Data scientists

Business decisions are better when backed by data. Give visibility to the data that support your strategies.

Software engineers

Help engineers be more efficient and streamline knowledge sharing using a tool they already love and trust.

Support teams

Level up your support by providing information to your customers using a natural interface: questions and answers.

Engineering leaders

Help your team get the information they need to do their job - reduce burnout and help engineers grow and learn together.

Always free up to 50 teammates

Basic

Up to 250 teammates

Business

Enterprise

The world’s largest telecom firm saved $10M in deflected support cases with our centralized knowledge base.

Subject-matter experts at software platform Unqork had 27% more time to work on projects after using Teams.

Integrates with and improves other tools

All plans come with integrations for ChatOps tools Slack & Microsoft Teams in order to cut down on pings, limit distractions and make the tools even more powerful. Business and Enterprise customers get access to Jira, GitHub & Okta integrations.

Robust read and write API

Single sign-on with AD or SAML

Your own customer success representative

99.5% uptime SLA and priority support

Stack Overflow for Teams has been a resource for our entire company. Not only for developers to solve problems, it’s also enabled our sales field to answer technical questions that help them close deals.

Engineers should help solve the hardest questions, the unknowns, where being familiar with how the product was built is essential. But we don’t want to keep answering solved problems over and over again. That’s where Stack Overflow for Teams really helps.

As we started to use [Stack Overflow for Teams] and saw how nice it was to have a repository of information, we started to see it spread to other teams. Our customer support team started using it, our people success team started using it, next thing we knew, we had [Slack] integrations all over the place.

What we love about Stack Overflow for Teams is that it’s a very dynamic tool…there’s just so many ways to use this as a liaison between different teams and different knowledge bases.

Additional products that reach and engage developers & technologists…

Reach the world’s largest audience of developers and technologists

Connecting communities with the specific technologies they use the most

Build your employer brand to attract tech talent

Programming & related technical career opportunities

Explore technical topics and other disciplines across 170+ Q&A communities

From Server Fault to Super User, much of the Stack Exchange network continues our mission to empower the world to develop technology through collective knowledge. Other sites on the Stack Exchange network further encourage knowledge sharing across topics such as cooking and medicine.

Build a private community to share technical or non-technical knowledge.

Читайте также: