Вызвать php файл и получить ответ jquery
Обновлено: 06.07.2024
Библиотека JQuery создана с единственной целью - облегчить и упростить программирование на языке JavaScript. Поэтому ничего сложного и заумного в этом разделе не будет - иначе какое же это получилось бы упрощение программирования?
Библиотека написана на языке JavaScript - это достаточно большой файл с расширением “.js”, который подключается к веб-странице, как кусок скрипта, и который загружается в браузер вместе с веб- страницей и выполняется браузером. При желании можно посмотреть и попы-таться понять текст исходного кода библиотеки JQuery. Но делать это совсем не обязательно.
Кроме того, что текст программы на JQuery выглядит короче и проще, чем на JavaScript, JQuery еще и обеспечивает нашей программе совместимость со всеми браузерами. Разные браузеры могут по-разному реагировать на один и тот же текст программы на JavaScript, однако JQuery специально разрабатывался так, чтобы одинаково выполняться во всех браузерах. Он обеспечивает нам кросс-браузерность.
JQuery - одна из наиболее известных, но не единственная из существующих библиотек для JavaScript. Например, очень популярной является библиотека MooTools .
6.3.1. Подключение библиотеки JQuery
Файл “jquery-1.9.1.js” при этом имеет объем более 200 килобайт, что может замедлять загрузку нашей веб-страницы в браузере пользователя.
Если ваша веб-страница - маленькая и для вас важно, чтобы все «летало» и загрузка библиотеки JQuery ничего не замедляла, то существует альтернативный метод загрузки JQuery - с сайта Google:
<script src line-height:28.79px;background-color:transparent">in.js"></script>
6.3.2. Основной принцип использования JQuery
то это будет означать, что к элементу HTML страницы с нужно применить действие fadeOut (эффект плавного растворения) и растянуть это действие на 3 секунды.
Вместо слова “jQuery” в программе для краткости записи можно ставить просто знак “$” - JavaScript нас поймет. Предыдущий пример при этом будет выглядеть совсем коротко:
<script type="text/javascript" src color:rgb(0,0,0);line-height:28.79px"> 1.9.1.js"></script>
При нажатии на кнопку “Fade” изображение главного корпуса ONU плавно исчезнет. Чтобы это реализовать, мы для этой кнопки назначили обработку события onClick - функцию katya(), в которой и осуществили вызов действия fadeOut JQuery. Можно было все это написать еще
короче, вызвав необходимое действие прямо в тексте кнопки:
6.3.3 Селекторы JQuery
В этом конкретном случае действие fadeOut распространится на элемент с и на все элементы с >
Перейдем теперь к описанию того, что можно быстро и просто сделать с помощью JQuery.
6.3.4 Изменение свойств стилей с помощью JQuery
Часто программа на JavaScript должна что-то делать со значениями свойств стилей каких-то элементов веб-страницы - считывать их значения или изменять их. JQuery позволяет это делать проще.
Для доступа к свойствам стилей в JQuery есть действие (метод) css, которое в общем виде вызывается так:
Если нужно просто узнать значение, например, отступа сверху для элемента веб-страницы с и записать это значение в переменную misha (это обычная переменная языка JavaScript), то нужно написать так:
Здесь ‘top’ - имя свойства стиля. Если бы нам нужно было другое свойство стиля, например, отступ слева, мы написали бы css(‘left’).
Если нам нужно присвоить свойству стиля новое значение, то нужно написать так:
Здесь ‘15px’ - новое значение для отступа сверху элемента веб- страницы, у которого >
Аналогичным образом можно использовать в качестве новых значений не только константы, но и переменные. Например, так:
Здесь для элемента с отступ сверху меняется на значение, содержащееся в переменной misha.
Если нужно поменять сразу несколько свойств стиля, можно перечислить их в фигурных скобках таким образом:
Ниже приведен пример веб-страницы, где JQuery используется для изменения свойств стилей (файл ex6_02.html).
При нажатии на кнопку все <div> с атрибутом (а такой на странице только один) поменяют цвет (свойство background-color) на зеленый.
<script type="text/javascript" src color:rgb(0,0,0);line-height:28.79px"> 1.9.1.js"></script>
Обратите внимание, что в JQuery, в отличие от JavaScript, можно использовать дефис в названиях свойств стилей. В данном примере это “background-color”. В JavaScript пришлось бы вместо этого написать “backgroundColor”.
6.3.5 Методы для изменения содержимого элементов HTML
Как мы помним, за оформление веб-страницы отвечают каскадные таблицы стилей, а за содержание - HTML-разметка. Как с помощью jQuery менять свойства стилей, мы уже рассмотрели. Теперь рассмотрим, как с помощью JQuery изменять содержимое веб-страниц, например, добавлять и удалять текст, вставлять новые теги и т.п.
В табл. 6.2 перечислены основные команды (действия, методы) JQuery, позволяющие манипулировать с содержимым (текстом) элементов HTML веб-страницы.
Таблица 6.2. Команды JQuery по изменению содержания веб-страниц
Ниже приведен простой пример с использованием команды append (файл ex6_03.html) и результатом нажатия на кнопку.№
<html><head><script type="text/javascript" src line-height:28.79px;background-color:transparent">1.9.1.js"></script> </head> <body>
это может быть простой ответ, но я использую $jQuery.ajax для вызова PHP-скрипта. То, что я хочу сделать, это в основном поместить этот PHP-скрипт в функцию и вызвать функцию PHP из javascript.
Как бы я назвал эту функцию в javascript? Сейчас я просто использую $.ajax с указанным файлом PHP.
использовать $.ajax чтобы вызвать контекст сервера (или URL, или что-то еще), чтобы вызвать определенное "действие". То, что вы хотите, это что-то вроде:
на стороне сервера action параметр POST должен быть прочитан, и соответствующее значение должно указывать на метод для вызова, например:
Я считаю, что это просто воплощение команда.
Я разработал плагин jQuery, который позволяет вызывать любую основную функцию PHP или даже пользовательские функции PHP в качестве методов плагина:jquery.php
после включения jquery и jquery.php в голове нашего документа и размещение request_handler.php на нашем сервере мы бы начали использовать плагин в порядке, описанном ниже.
для простоты использования ссылка на функцию простым способом:
затем инициализировать плагин:
а теперь некоторые сценарии использования:
демонстрация цепочки функций PHP:
демонстрация отправки JSON-блока PHP псевдокода:
настройки модуль белый список, так что вы можете ограничить, какие функции можно назвать. Есть несколько других шаблонов для работы с PHP, описанных плагином.
Я бы придерживался обычного подхода, чтобы вызвать файл напрямую, но если вы действительно хотите вызвать функцию, посмотрите на JSON-RPC (вызов удаленной процедуры JSON).
вы в основном отправляете строку JSON в определенном формате на сервер, например
который включает в себя функцию для вызова и параметры этой функции.
конечно, сервер должен знать, как обрабатывать такие запросы.
Вот это плагин jQuery для JSON-RPC и, например, Zend JSON Server как реализация сервера в PHP.Это может быть перебор для небольшого проекта или меньше функций. Самый простой способ будет Карима. С другой стороны, JSON-RPC является стандартом.
вы не можете вызвать функцию PHP с Javascript, точно так же, как вы не можете вызвать произвольные функции PHP при загрузке страницы (просто подумайте о последствиях для безопасности).
Если вам нужно обернуть свой код в функцию по какой-либо причине, почему бы вам не поместить вызов функции под определение функции, например:
или используйте PHP include:
вам нужно будет выставить и конечную точку (URL) в вашей системе, которая примет запрос POST от вызова ajax в jQuery.
затем, при обработке этого url из PHP, вы должны вызвать свою функцию и вернуть результат в соответствующем формате (JSON, скорее всего, или XML, если вы предпочитаете).
Сегодня мы собираемся исследовать концепцию 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
Это работает, хотя я не понимаю, что происходит за этим утверждением, тем более что оно проверяет каждую запись поля (что замечательно).
У меня есть action="" в моем определении формы и кнопка submit, и я создал файл process.php, который дополнительно проверяет и отправляет email, но я понятия не имею, как я вызываю этот файл php, или где я помещаю вызов, или каков синтаксис для этого. Я предполагаю, что он основан на возврате из validate().
Если кто-то может помочь на простом синтаксическом уровне, я был бы очень благодарен, так как я просмотрел так много возможных решений, что моя голова просто полностью запуталась.
Я прошу прощения за то, что, вероятно, задаю очень распространенный вопрос, но когда вы только начинаете, трудно найти пример, который вы полностью понимаете.
4 ответа
Не забывайте о принципах:
- PHP выполняется на стороне сервера
- javascript выполняется на стороне клиента
Напротив, javascript вызывается только на стороне клиента . Таким образом, код, используемый для validate() вашей формы, вызывается только на стороне клиента (за исключением случаев, когда за этим стоит конкретная функция, которая будет вызывать сервер). Следовательно, javascript будет использовать параметры, которые вы ему дали, для проверки формы без вызова сервера . Это очень хороший способ не перегружать ваш сервер нежелательными запросами (пустые поля, неправильные адреса электронной почты. ).
Чтобы ответить на ваш вопрос, я задам несколько других: что вы пытаетесь подтвердить? вы хотите проверить на стороне клиента или на стороне сервера? какие данные и для каких целей?
Ну, есть два общих подхода:
-
Обработка формы Oldschool: вы установили <form action='process.php'> , чтобы ваш запрос был отправлен на эту страницу. Браузер перезагружает и отображает содержимое, отображенное в process.php
Я использовал как плагин validate, так и плагин AJAX form с большим успехом, но использование их вместе ставит меня в тупик. Если я использую плагин validate для проверки, то при успешном размещении формы AJAX ничего не происходит. Буквально. Даже в Firebug плагин AJAX, похоже, ничего не делает.
В вашем случае разумно выполнить проверку формы с помощью javascript, проверив значение каждого поля. Нет необходимости отправлять данные на сервер и получать информацию об их правильности. Этот метод усложняет проверку и не улучшает защиту от плохих данных.
Похожие вопросы:
у меня есть форма, и я использую jquery validate jquery.validate.pack.js его работа отлично работает, когда я нажимаю кнопку отправки, я просто добавляю следующий код $(document).ready(function()
У меня есть многостраничная форма с использованием jQuery Validate. На странице 1 у меня есть раскрывающийся список select, который, когда кто-то что-то выбирает, загружает правила для других полей.
Я использовал как плагин validate, так и плагин AJAX form с большим успехом, но использование их вместе ставит меня в тупик. Если я использую плагин validate для проверки, то при успешном размещении.
Я заполняю форму с помощью веб-драйвера, и мне нужно обойти два поля формы, используя browser.execute_script() , чтобы вставить скрытое поле формы в DOM. Однако мне также нужно отключить.
Я использую плагин Jquery validate для проверки формы, все в порядке с проверкой, моя проблема заключается в функции submitHandler, которая по какой-то причине, которую я не получаю, не отправляет.
У меня есть форма, и я использую плагин jQuery validate. Я также использую remote, чтобы проверить, доступны ли имя пользователя и email или нет, но я всегда получаю false обратно из скрипта. вот.
Читайте также: