Verification: a143cc29221c9be0

Php ajax запрос к странице

Php ajax запрос к странице

1. Руководство пакета JQ

2. Ajax завершает запрос на получение

Требуется два вида

1. Завершите функцию, чтобы получить страницу

2. Получите запрос от ajax и верните ответ

Структура Аякса

Завершите функцию проверки имени пользователя и пароля

шаблон:

 
Имя Пароль

Посмотреть:

from django.http import JsonResponse
def ajax_get(request):
    return render(request,"ajax_get.html")
 ## ajax завершить проверку имени пользователя и пароля
def ajax_get_data(request):
    result = {"code":10000,"content":""}
    data = request.GET
    username = data.get("username")
    password = data.get("password")
    if username is None or password is None:
        result['code'] = 10001
                 result ['content'] = "Параметр запроса пуст"
    else:
        user = User.objects.filter(name=username,password=setPassword(password)).first()
        if user:
            result['code'] = 10000
                         result ['content'] = "Пользователь может войти"
        else:
            result['code'] = 10002
                         result ['content'] = "Пользователь не существует или пароль неверный"
         ## Вернуть объект json
    return JsonResponse(result)
         # return HttpResponse («Это данные представления ajax»)

Ajax отправляет запрос на получение

Требуется два вида

1. Просмотр страницы предоставления (обработка запроса на получение)

Вернуть страницу с формой и запросом ajax

2. Второе представление получает запрос ajax, обрабатывает запрос и возвращает ответ

jsonresponse объект

3. Ajax завершает почтовый запрос

Запрос ajax_post такой же, как запрос get. Он требует двух представлений. Это запрос post. Проблема с CSRF

различные места:

  • получить запрос сшивания пути и параметров / index /? name = zhangsan & age = 18
  • type = получить в запросе get
  • словарь данных постстроения
  • type=post
  • Добавить CSRF при создании словаря

шаблон

{% csrf_token %} Имя:
Пароль:
{# #}

Посмотреть

Определите, существует ли пользователь

Потеряв фокус, определите, существует ли пользователь

  • Частичное обновление Аякса
  • Отправить адрес (вид обрабатывающего бизнеса)
  • Получите переданные параметры в представлении, чтобы определить, существует ли пользователь
  • Не существует: вернуть результат
  • Существует: вернуть результат
  • Страница, получить результат, сделать

Посмотреть:

def ajax_post_data(request):
         ## Регистр
    result = {}
    username = request.POST.get("username")
    password = request.POST.get("password")
    if len(username) == 0 or len(password) == 0:
        result["code"] = 10001
                 result ["content"] = 'Параметр запроса пуст'
    else:
                 ## Добавить пользователя 
        user= User()
        user.name = username
        user.password= setPassword(password)
        try:
            user.save()
            result["code"] = 10000
                         result ["content"] = 'Успешно добавленные данные'
        except:
            result["code"] = 10002
                         result ["content"] = 'Ошибка добавления данных'
         ## Регистр
    return JsonResponse(result)


 ## Убедитесь, что имя пользователя существует
def checkusername(request):
    result = {'code':10001,"content":""}
         # получить запрос
    username= request.GET.get("name")
    print (username)
         # Определить, существует ли пользователь
    user = User.objects.filter(name=username).first()
    if user:
                 ## существовать
                 result = {'code': 10001, "content": "Имя пользователя уже существует"}
    else:
                 result = {'code': 10000, "content": "Имя пользователя не существует"}


    return JsonResponse(result)

шаблон



{% csrf_token %} Имя:
Пароль:
{# #}

печенье и вид

Поскольку запросы http не имеют состояния и не могут записывать идентификаторы, необходим механизм для записи идентификаторов в течение длительного времени.

Cookie: он выдается пользователю сервером и хранится в браузере пользователя, используется для проверки идентификационных данных. Рабочий механизм cookie такой же, как и при таможенном оформлении.

1. Пользователь запрашивает сервер в первый раз

Сервер проверяет имя пользователя, пароль и выдает куки

2. Пользователь переносит сервер запросов cookie во второй раз

Сервер подтверждает личность пользователя на основании файла cookie, передаваемого пользователем.

печенье

Преимущества: принципиально решить проблему постоянного доступа пользователей

Недостатки: поскольку файл cookie хранится локально для пользователя, это вызывает некоторые проблемы с безопасностью. Файл cookie может быть изменен или имитирован

1. Распознать куки в соответствии с процессом входа

1. Пользователь предоставляет имя пользователя и пароль для входа

2. Сервер получает имя пользователя и пароль

3. Проверьте имя пользователя

Если пользователь существует, проверьте пароль. Если пароль правильный, установите файл cookie, отправьте его Coolie и успешно войдите в систему. Перейти на домашнюю страницу

Неверный пароль назад неверный пароль

Пользователь не существует Обратный пользователь не существует

2. Использование куки

настройки cookie

авторизоваться

Создать login.html

Просмотр: получение данных, обработка данных и возврат результатов входа

Сначала заполните логин пользователя, перейдите на домашнюю страницу

Посмотреть

шаблон

настройки cookie

параметры настройки cookie

ключ ключ куки
value = '' '' значение cookie
max_age = None. Время cookie существует и время его действия
expires = None Время ожидания cookie конфликтует с max_age, выберите один из двух
path = '/' Область применения файлов cookie, по умолчанию используется текущий веб-сайт
domain = None Имя домена, на котором работает cookie baidu.com
secure = False Если вы используете https для доставки файлов cookie для True, по умолчанию используется flase
httponly = False Если значение True, только файлы cookie будут передаваться через http
samesite = None Один и тот же веб-сайт (имя домена) использует файлы cookie

Получение куки

Используйте куки

Он может отображаться, когда пользователь на домашней странице вошел в систему. Если пользователь не вошел в систему, перейдите на страницу входа в систему.

Логин декоратор

Удалить куки

выход

Удалить куки пользователя при выходе

session

сеанс - это механизм сеанса, предложенный для решения проблемы небезопасных файлов cookie.

Сам сеанс является своего рода сеансом: относится к общению от начала до конца, только в веб-разработке сеанс будет выглядеть как механизм сеанса

Веб-сеанс - это технология проверки подлинности, которая хранит информацию о пользователях на сервере. Сессию необходимо использовать вместе с файлами cookie. Вы должны использовать файлы cookie, чтобы предоставить пользователям идентификатор (session_id), а затем сохранить специфическую информацию пользователя на сервере, обычно в базе данных.

Разница между cookie и сессией

  • Файл cookie хранится локально, сеанс размещается на сервере, обычно в базе данных.
  • Cookie-файл подтверждения быстр, но безопасность не высока
  • Проверка файлов cookie выполняется медленно, но безопасность относительно хорошая

Получение и вывод JSON-данных

В качестве источника JSON-данных будем использовать сайт jsonplaceholder.typicode.com с данными users.

Директива x-dataуказывает на то, что это компонент Alpine. Мы сразу инициализируем переменную users, которая будет массивом/объектом полученных данных.

Если перейти по указанному адресу, то увидим обычные JSON-данные одного пользователя. Поэтому отображение результата будет происходить в SPAN с директивами x-text. В одном тэге это имя юзера, в другом его email.

Получение данных «вешаем» на click кнопки: прописываем получение данных через fetch(). Здесь происходит get-запрос по указанному URL и данные в формате JSON присваиваются нашей переменной users. В целом это достаточно типовой вариант работы с fetch().

Если данные представляют собой многомерный массив, то для его вывода нужно использовать директиву x-for.

Тут всё практически тоже самое, только по новому адресу получается не один элемент, а множество. Директива для вывода в цикле x-forв Alpine применяется только к тэгу TEMPLATE (как принято с web-компонентами).

Отправка произвольных данных по AJAX

Теперь рассмотрим вариант, если нужно сформировать произвольный Ajax-запрос без создания html-формы. Отправлять post-запрос мы будем уже на свой адрес, а ответ получать в виде текста/html.

Обработчик ajax-запроса представляет собой очень простую страницу. Если вы используете Albireo, то можете сделать такой файл:

Привет!';
 
pr($_POST); // вывод входящего POST

Адрес (slug) можно указать другой. Он указывается в fetch-запросе.

Теперь код примера:

Первое отличие — адрес fetch-запроса. Второе — дополнительные параметры. В данном случае это method, headersи body. Заголовок мы отправляем для того, чтобы в php-обработчике определить, что это именно Ajax-запрос.

Если нужен обычный POST, то этот заголовок можно не указывать и не отслеживать в обработчике.

Тело запроса формируем его из нового объекта FormData. Сейчас в основном именно так и делают вместо обработки данных. Поле _methodнужно для роутинга Albireo (описание и примеры есть в документации). То есть данные для отправки формируются динамически. При желании можно привязать те же поля ввода.

Поскольку ответ — это обычный текст с разметкой HTML, то используем директиву x-html. Если же использовать x-text, то ответ мы увидим в виде обычного текста.

Отправка формы через Ajax

Обычную форму можно отправить похожим образом.

sample1', { method: 'POST', headers: { 'X-Requested-With': 'XMLHttpRequest', }, body: new FormData($refs.form) }) .then(response => response.text()) .then(response => textData = response); return false; ">

Это самая обычная форма, где мы ловим событие submit. Обратите внимание, что функция возвращает false— это нужно для того, чтобы блокировать обычную отправку данных.

Данные мы формируем через FormData, как и в прошлый раз, только в качестве источника указываем текущую форму. Это $refs.form.

Переменная $refsв Alpine особая («магическая»), которая хранит DOM-элементы. В данном случае это form, который мы указали у самой формы в виде директивы x-ref.

С помощью x-refи $refsв Alpine реализуется получение любого элемента. Если бы мы делали этот пример на нативном JavaScript, то использовали бы getElementById()или querySelector(), чтобы получить доступ к данным формы.