В этой статье я разъясню наши знания об использовании и публикации формы с помощью jQuery и Ajax.
Прежде чем мы погрузимся в AJAX с помощью jQuery. Давайте разберемся, что такое AJAX и JSON.
Что такое AJAX?
AJAX означает асинхронный JavaScript, а XML - это вызов XHR (XMLHttpRequest), который отправляет ваш запрос в фоновом режиме без загрузки всей страницы.
Что такое JSON?
По сути, JSON - это набор массивов и объектов. JSON расшифровывается как Java Script Object Notation. Он используется для отправки или резервирования данных от сервера к клиенту или наоборот. JSON легкий и структурированный.
Что такое jQuery?
Ну, jQuery - это библиотека для написания JavaScript, написанная как «меньше пиши, делай больше», jQuery упрощает использование JavaScript. Он поддерживает AJAX и анимацию, а также манипулирование и обход DOM.
Что такое JavaScript?
JavaScript - это объектно-ориентированный язык компьютерных сценариев, обычно используемый для создания интерактивных эффектов в веб-браузерах. Он передает состояние сети. В наши дни javascript может работать на сервере, таком как NodeJS.
Итак, приступим к вызову AJAX в ASP.NET Core
В восторге???
Приведем пример:
У нас есть кнопка отправки в нашем приложении JQuery AJAX Core. Попробуем показать сообщение при нажатии.
Вот наша кнопка с определенным id = ”btnSubmit”:
- ‹Input type =” submit ”value =” Create ”class =” btn btn-default ”id =” btnSubmit ”/›
Теперь нам нужно написать сценарий для этого, вот код JavaScript:
- var myBtn = document.getElementById («btnSubmit»);
- myBtn.addEventListener (‘click’, function (e) {
- alert («Привет, мир»); // Показать всплывающее окно с предупреждением
- });
По этому коду результат будет «Привет»:
Теперь, если мы можем получить тот же результат, используя вместо него jQuery. Давайте посмотрим:
- $ (‘# BtnSubmit’). Click (function () {
- alert («Привет, мир»); // Показать всплывающее окно с предупреждением
- });
Давайте сосредоточимся на Ajax:
AJAX означает «Асинхронный JavaScript и XML». AJAX обменивается данными с сервером без перезагрузки всей страницы. Это метод создания быстрых и динамичных веб-страниц.
В .NET мы можем вызывать код на стороне сервера двумя способами:
- ASP.NET AJAX
- jQuery AJAX
В этой статье мы сосредоточимся на JQuery Ajax.
Метод $ .ajax ():
Основной метод JQuery для создания запросов Ajax. Вот несколько методов jQuery AJAX:
- $ .ajax () Выполняет асинхронный запрос AJAX.
- $ .get () Загружает данные с сервера с помощью запроса AJAX HTTP GET.
- $ .post () Загружает данные с сервера с помощью запроса AJAX HTTP POST.
Чтобы узнать больше нажмите.
Параметр конфигурации метода $ .ajax ():
Варианты, которые мы используем:
- асинхронный:
- тип:
- URL:
- данные:
- тип данных:
- успех:
- ошибка:
Давайте рассмотрим подробности:
асинхронный
Установите значение false, если запрос должен быть отправлен синхронно. По умолчанию true.
Обратите внимание: если вы установите для этого параметра значение false, ваш запрос будет блокировать выполнение другого кода до тех пор, пока не будет получен ответ.
Пример:
- async: false,
тип
Это тип HTTP-запроса, который принимает действительную HTTP-команду.
Тип запроса «POST» или «GET» по умолчанию - «GET». Можно использовать другие типы запросов, такие как «PUT» и «DELETE», но они могут поддерживаться не всеми веб-браузерами.
Пример:
- тип: «ПОЧТА»,
url
URL-адрес запроса.
Пример:
- url: «/ Home / JqAJAX»,
данные
Данные для отправки на сервер. Это может быть объект или строка запроса.
Пример:
- данные: JSON.stringify (model_data),
dataType
Тип данных, которые вы ожидаете от сервера. По умолчанию jQuery будет смотреть на MIME-тип ответа, если не указан тип dataType.
Допустимые значения: текст, xml, json, script, html jsonp.
Пример:
- dataType: «json»,
contentType
Это тип содержимого вашего запроса. По умолчанию используется «application / x-www-form-urlencoded».
Пример:
- contentType: ‘application / json; charset = utf-8 ’,
успех
Функция обратного вызова, запускаемая в случае успешного выполнения запроса. Функция получает данные ответа (преобразованные в объект JavaScript, если DataType был JSON), а также текстовый статус запроса и необработанный объект запроса.
- Успех: функция (результат) {
- $ (‘# Результат’). Html (результат);
- }
ошибка
Функция обратного вызова, запускаемая, если запрос приводит к ошибке. Функция получает необработанный объект запроса и текстовый статус запроса.
- error: function (result) {
- alert («Произошла ошибка !!»);
- },
Давайте опубликуем значения с помощью jQuey, Ajax:
Мы часто используем метод jQuery Ajax в веб-страницах ASP.NET Razor. Вот пример кода:
- ‹Input type =” submit ”id =” btnSubmit ”value =” Add Employee ”/›
- ‹Тип сценария =” текст / javascript ”›
- $ (документ) .ready (функция () {
- $ (function () {
- $ (‘# BtnSubmit’). Click (function (event) {
- событие .preventDefault ();
- var Employee = {
- ID: ‘01–1643’,
- Имя: «Шахрукх»,
- Возраст: 22 года
- };
- $ .ajax ({
- тип: «ПОЧТА»,
- url: «/ Home / JqAJAX»,
- данные: JSON.stringify (Сотрудник),
- dataType: «json»
- contentType: ‘application / json; charset = utf-8 ’,
- успех: функция (данные) {
- оповещение (data.msg);
- },
- error: function () {
- alert («Произошла ошибка !!»)
- }
- });
- });
- });
- });
- ‹/Script›
Действие контроллера:
- // ПОЛУЧИТЬ: Главная / JqAJAX
- [HttpPost]
- public ActionResult JqAJAX (Employee emp) {
- попробуйте {
- return Json (новый {
- msg = «Успешно добавлено» + emp.Name
- });
- } catch (исключение ex) {
- throw ex;
- }
- }