使用Jquery Ajax获取输入值而无需单击和服务器

Question

我遇到了一个问题。我知道如何使用jQuery选择器获取输入值，然后单击按钮后更新信息。但是，当用户将值输入到表单中时，我是否可以实时更新以下信息，并且图片将立即通过jQuery Ajax更改而无需单击和服务器？

详情请参考图片。 T T

Answer 1

因为您没有提供驱动此界面的实际HTML，我将尝试使用直观的属性来回答您。

标题的实时更新：

$('#title').keyUp(function(){
        $('.imageTitle').text($(this).val());
    });

假设单选按钮具有图像路径数据属性：

$('#animal').change(function(){
        $('.animalImage').attr('src', $(this).data('imgPath'));
    });

然后描述与标题非常相似：

$('#description').keyUp(function(){
        $('.description').text($(this).val());
    });

这里的魔力是使用jQuery的事件处理而不是等待按下按钮。玩得开心！