Question

这个地方有一个简单的教程吗？

理想情况下，我想要一个文本框和一个按钮，当用户单击该按钮时，文本框将被发送到服务器，服务器将根据它返回一个值。

然后客户端使用返回值填充另一个文本框，但不刷新页面。

如果可能的话，显示/隐藏加载的gif也会很棒。

我找不到任何关于如何做到这一点的简单教程，有人能指出我正确的方向吗？

Answer 1

jQuery的Ajax方法是你的朋友：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/

Answer 2

尝试使用google搜索jQuery + AJAX。

有很多例子：

Answer 3

你会这样做：

$.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（这是默认值），它将发送的任何数据附加到网址或POST会将发送的任何数据附加到请求标题。 data是包含要发送到请求页面的数据的对象或字符串，它可以是对象形式{param1: 'value1',param2: 'value2'}，也可以是url编码的字符串"param1=value1&param2=value2"。当从服务器收到成功的响应时，将调用success方法。在发送请求之前调用beforeSend方法，并且当从服务器收到响应时调用complete方法，而不管请求是否成功。

有关详细信息，请查看Official jQuery API documentation of the jQuery.ajax() object

如何在JQuery中执行简单的异步查询实现

3 个答案: