Как правильно сформировать ajax в jquery?

Question

Сейчас есть ajax запрос, который написан на чистом js. Подскажите пожалуйста, как правильно перезаписать запрос ajax jquery?

let servResponce = document.querySelector('#responce');

document.forms.ourForm.onsubmit = function (e) {
    e.preventDefault();
    let userInput = document.forms.ourForm.ourForm_input.value;
    let xhr = new XMLHttpRequest();

    xhr.open('POST', 'some.php');

    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

    xhr.onreadystatechange = function (){
        if (xhr.readyState === 4 && xhr.status === 200) {
            servResponce.textContent = xhr.responseText;
        }
    }
    xhr.send('ourForm_inp=' + userInput)

    $xhr.ajax ({
        url: '/some.php',
        context: 'document.body'
    }).done(function() {
        $(  ).addClass( "done" );
    })


}




$.ajax({
    url: '/some.php',         /* Куда отправить запрос */
    method: 'get',             /* Метод запроса (post или get) */
    dataType: 'html',          /* Тип данных в ответе (xml, json, script, html). */
    data: {text: 'Текст'},     /* Данные передаваемые в массиве */
    success: function(data){   /* функция которая будет выполнена после успешного запроса.  */
        console.log(12111); /* В переменной data содержится ответ от index.php. */
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="responce"></div>
<form  name="ourForm">
    <input type="text" name="ourForm_input">

    <button type="submit" name="ourForm_btn">Отправить</button>
</form>

Answer 1

В текущем случае, если поставить на инпут идентификатор, например id="test", то можно так:

$.ajax({
    url: '/some.php',
    method: 'get',
    dataType: 'html',
    data: { text: $('#test').val() },
    success: function(data){ 
        console.log(12111); 
    }
});

Если на форме много инпутов и данных, то можно на форму добавить идентификатор, например #my-form и отправить сериализованную форму

$.ajax({
    url: '/some.php',
    method: 'get',
    dataType: 'html',
    data: $('#my-form').serialize(),
    success: function(data){
        console.log(12111);
    }
});

Если форма супер большая и полей ооооочень много, то рекомендую отправлять данные через POST и желательно через JSON.stringify

Сейчас есть ajax запрос, который написан на чистом js.

У вас суперстарый подход в отправке данных. Поэтому нужно изучить fetch и желательно async/await (тык, тык) и тогда jquery для отправи запросов не понадобится

БЛОГ НА HUSL

Как правильно сформировать ajax в jquery?

Ответы (1 шт):