В этой статье я разъясню наши знания об использовании и публикации формы с помощью 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”:

  1. ‹Input type =” submit ”value =” Create ”class =” btn btn-default ”id =” btnSubmit ”/›

Теперь нам нужно написать сценарий для этого, вот код JavaScript:

  1. var myBtn = document.getElementById («btnSubmit»);
  2. myBtn.addEventListener (‘click’, function (e) {
  3. alert («Привет, мир»); // Показать всплывающее окно с предупреждением
  4. });

По этому коду результат будет «Привет»:

Теперь, если мы можем получить тот же результат, используя вместо него jQuery. Давайте посмотрим:

  1. $ (‘# BtnSubmit’). Click (function () {
  2. alert («Привет, мир»); // Показать всплывающее окно с предупреждением
  3. });

Давайте сосредоточимся на Ajax:

AJAX означает «Асинхронный JavaScript и XML». AJAX обменивается данными с сервером без перезагрузки всей страницы. Это метод создания быстрых и динамичных веб-страниц.

В .NET мы можем вызывать код на стороне сервера двумя способами:

  1. ASP.NET AJAX
  2. jQuery AJAX

В этой статье мы сосредоточимся на JQuery Ajax.

Метод $ .ajax ():

Основной метод JQuery для создания запросов Ajax. Вот несколько методов jQuery AJAX:

  • $ .ajax () Выполняет асинхронный запрос AJAX.
  • $ .get () Загружает данные с сервера с помощью запроса AJAX HTTP GET.
  • $ .post () Загружает данные с сервера с помощью запроса AJAX HTTP POST.

Чтобы узнать больше нажмите.

Параметр конфигурации метода $ .ajax ():

Варианты, которые мы используем:

  • асинхронный:
  • тип:
  • URL:
  • данные:
  • тип данных:
  • успех:
  • ошибка:

Давайте рассмотрим подробности:

асинхронный

Установите значение false, если запрос должен быть отправлен синхронно. По умолчанию true.

Обратите внимание: если вы установите для этого параметра значение false, ваш запрос будет блокировать выполнение другого кода до тех пор, пока не будет получен ответ.

Пример:

  1. async: false,

тип

Это тип HTTP-запроса, который принимает действительную HTTP-команду.

Тип запроса «POST» или «GET» по умолчанию - «GET». Можно использовать другие типы запросов, такие как «PUT» и «DELETE», но они могут поддерживаться не всеми веб-браузерами.

Пример:

  1. тип: «ПОЧТА»,

url

URL-адрес запроса.

Пример:

  1. url: «/ Home / JqAJAX»,

данные

Данные для отправки на сервер. Это может быть объект или строка запроса.

Пример:

  1. данные: JSON.stringify (model_data),

dataType

Тип данных, которые вы ожидаете от сервера. По умолчанию jQuery будет смотреть на MIME-тип ответа, если не указан тип dataType.

Допустимые значения: текст, xml, json, script, html jsonp.

Пример:

  1. dataType: «json»,

contentType

Это тип содержимого вашего запроса. По умолчанию используется «application / x-www-form-urlencoded».

Пример:

  1. contentType: ‘application / json; charset = utf-8 ’,

успех

Функция обратного вызова, запускаемая в случае успешного выполнения запроса. Функция получает данные ответа (преобразованные в объект JavaScript, если DataType был JSON), а также текстовый статус запроса и необработанный объект запроса.

  1. Успех: функция (результат) {
  2. $ (‘# Результат’). Html (результат);
  3. }

ошибка

Функция обратного вызова, запускаемая, если запрос приводит к ошибке. Функция получает необработанный объект запроса и текстовый статус запроса.

  1. error: function (result) {
  2. alert («Произошла ошибка !!»);
  3. },

Давайте опубликуем значения с помощью jQuey, Ajax:

Мы часто используем метод jQuery Ajax в веб-страницах ASP.NET Razor. Вот пример кода:

  1. ‹Input type =” submit ”id =” btnSubmit ”value =” Add Employee ”/›
  2. ‹Тип сценария =” текст / javascript ”›
  3. $ (документ) .ready (функция () {
  4. $ (function () {
  5. $ (‘# BtnSubmit’). Click (function (event) {
  6. событие .preventDefault ();
  7. var Employee = {
  8. ID: ‘01–1643’,
  9. Имя: «Шахрукх»,
  10. Возраст: 22 года
  11. };
  12. $ .ajax ({
  13. тип: «ПОЧТА»,
  14. url: «/ Home / JqAJAX»,
  15. данные: JSON.stringify (Сотрудник),
  16. dataType: «json»
  17. contentType: ‘application / json; charset = utf-8 ’,
  18. успех: функция (данные) {
  19. оповещение (data.msg);
  20. },
  21. error: function () {
  22. alert («Произошла ошибка !!»)
  23. }
  24. });
  25. });
  26. });
  27. });
  28. ‹/Script›

Действие контроллера:

  1. // ПОЛУЧИТЬ: Главная / JqAJAX
  2. [HttpPost]
  3. public ActionResult JqAJAX (Employee emp) {
  4. попробуйте {
  5. return Json (новый {
  6. msg = «Успешно добавлено» + emp.Name
  7. });
  8. } catch (исключение ex) {
  9. throw ex;
  10. }
  11. }

Спасибо, что нашли время прочитать мою статью! Если вам понравилось это читать, вы можете поддержать меня, поставив на эту статью несколько аплодисментов.