使用jQuery的表单元素AJAX微调器附件

Yesterday I showed you how to attach an AJAX spinner next to a form element using my beloved MooTools. Today I'll show you how to implement that same functionality using jQuery.

昨天我向您展示了如何使用心爱的MooTools在表单元素旁边附加AJAX微调器 。 今天，我将向您展示如何使用jQuery实现相同的功能。

View Demo 观看演示

XHTML (The XHTML)

<select class="ajax">
	<option value="">-- Select a Site--</option>
	<option value="David Walsh Blog">David Walsh Blog</option>
	<option value="Script & Style">Script & Style</option>
	<option value="Band Website Template">Band Website Template</option>
</select>

<br /><br />

<input type="text" id="my-text" class="ajax" />

Elements with the "ajax" CSS class will be our target.

具有“ ajax” CSS类的元素将是我们的目标。

jQuery JavaScript (The jQuery JavaScript)

$(document).ready(function() {
	//create image
	$('<img src="move-spinner.gif" id="spinner" />').css('position','absolute').hide().appendTo('body');
	//for every field change
	$('.ajax').change(function() {
		//get element position
		var position = $(this).offset();
		//position image
		$('#spinner').css({ top: position.top , left: position.left + $(this).width() + 30 }).fadeIn();
		//ajax
		$.post('<?php echo $_SERVER['REQUEST_URI']; ?>',{
			ajax:1,
			value: $(this).val()
		},function() {
			$('#spinner').fadeOut();
		});
	});
});

We inject the spinner image into the page and reposition it depending on which field is doing the request. Very simple!

我们将微调器图像注入到页面中，并根据哪个字段在执行请求来重新定位它。 很简单！

View Demo 观看演示

Isn't JavaScript fun? Oh yeah...and it makes the user experience better too.

JavaScript不好玩吗？ 哦，是的，这也使用户体验也更好。

翻译自: https://davidwalsh.name/ajax-spinner-jquery