Как я могу сделать простую реализацию асинхронного запроса в JQuery - PullRequest
Новая
       4

Как я могу сделать простую реализацию асинхронного запроса в JQuery

1 голос
/ 22 сентября 2010

Есть ли где-нибудь простой учебник для этого?

В идеале я хотел бы иметь текстовое поле и кнопку, и когда пользователь нажимает кнопку, текстовое поле отправляется на сервер, который возвращаетзначение, основанное на нем.

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

Если это возможно, показ / скрытие загрузочного GIF также было бы здорово.

Я не нахожу никаких простых уроков, как это сделать, может кто-нибудь указать мне правильное направление?

Ответы [ 3 ]

2 голосов
/ 22 сентября 2010

Ajax-метод jQuery - ваш друг: http://api.jquery.com/category/ajax

HTML 

<form id="myForm" action="/echo/html/" method="post">
    <fieldset>
        <textarea name="html" class="firstInput"></textarea>
        <textarea class="secondInput"></textarea>

        <input type="submit" value="GO!">
    </fieldset>
</form>

<img src="http://vinofordinner.com/art/loading.gif" id="loader" />

CSS 

#loader {
    display: none;
}

JQuery 

$(function(){
    $('#myForm').submit(function(e){
        e.preventDefault();

        var $this = $(this),
            data = $this.find('.firstInput').serialize(),
            method = $this.attr('method'),
            action = $this.attr('action');

        $.ajax({
            type: method,
            url: action,
            data: data,
            beforeSend: function() {
                $('#loader').show();
            },
            success: function(a){
                $('.firstInput').val('');
                    $('.secondInput').val(a);
            },
            complete: function() {
                $('#loader').hide();
            }
        });
    })

})

Рабочий пример: http://jsfiddle.net/G4uw6/

1 голос
/ 22 сентября 2010

Вы бы сделали это так: 

$.ajax({
    url: 'handlerscript.php',
    type: 'POST',
    data: {q: $('#theInput').val()},
    success: function(data) {
        $('.result').html(data);
        alert('Load was performed.');
    },
    beforeSend: function() {
        $('.loadgif').show();
    },
    complete: function() {
        $('.loadgif').hide();
    }
});

Чтобы провести вас через функцию, первый параметр url устанавливается в местоположение ресурса, от которого вы хотите получить ответ. Параметр type устанавливает используемый HTTP-метод , для него чаще всего устанавливается значение GET (значение по умолчанию), которое добавляет любые отправляемые данные к URL или POST, который добавляет любые отправляемые данные к заголовку запроса . data - это объект или строка, содержащая данные для отправки на запрашиваемую страницу, она может быть в форме объекта {param1: 'value1',param2: 'value2'} или в виде строки в кодировке URL "param1=value1&param2=value2". Метод success вызывается, когда с сервера получен ответ, который был успешным . Метод beforeSend вызывается перед отправкой запроса, а метод complete вызывается при получении ответа от сервера независимо от успешности запроса .

Для получения дополнительной информации, ознакомьтесь с Официальной документацией jQuery API объекта jQuery.ajax ()

1 голос
/ 22 сентября 2010
...