jQuery AJAX 示例

GET 示例

<p>Enter customer ID: <input type='text' id='customerID' /></p>
<p><input type="button" value='Get Customer Info' onclick='requestCustomerInfo()' /></p>
<div id='rs'></div>

function requestCustomerInfo() {
			var sID = $('input#customerID').val();
            $.get('getCustomerData.jsp', { id: sID }, function (respTxt, sStatus) {
                if (sStatus == 'success') $('div#rs').html(respTxt);
                else $('div#rs').html('error!');
            });
        }

POST 示例

<form id='sFormID' method='post' action='' onsubmit='sendRequest(); return false'>
    name: <input type='text' name='name' /><br />
    age: <input type='text' name='age' /><br />
    <input type='submit' value='Save' />
</form>
<div id='status'></div>
<div id='rs'></div>

function getRequestBody(oForm) {
        var oParams = {};
        for (var i = 0, len = oForm.elements.length; i < len; i++) {
            var oField = oForm.elements[i];
            switch (oField.type) {
                case "button": case "submit": case "reset": break;
                case "radio": case "checkbox":
                    if (!oField.checked) { break; }
                case "text": case "hidden": case "password":
                    oParams[oField.name] = oField.value;
                    break;
                default:
                    switch (oField.tagName.toLowerCase()) {
                        case "select":
                            oParams[oField.name] = oField.options[oField.selectedIndex].value;
                            break;
                        default:
                            oParams[oField.name] = oField.value;
                    }
            }

        }
        return oParams;
    }
	
    function sendRequest() {
		var objFormParams = getRequestBody(document.forms[0]);
		$.post("saveCustomerData.jsp", objFormParams, function(respTxt, sStatus) {
			if (sStatus == 'success') $('div#rs').html(respTxt);
            else $('div#rs').html('error!');
		});
    }

function sendRequest() {
		$.post("saveCustomerData.jsp", $('#sFormID').serialize(), function(respTxt, sStatus) {
			if (sStatus == 'success') $('div#rs').html(respTxt);
            else $('div#rs').html('error!');
		});
    }

POST 示例

function sendRequest() {
		//ajaxStart: 每当 AJAX 请求启动 （并没有已处于活动状态） 的情况下，显示加载消息
		//ajaxStop: 所有请求都完成时调用
		$('#loading').ajaxStart(function(){
			$(this).html('服务器连接中...');
		}).ajaxStop(function(){
			$(this).html('已收到响应!');
		});
		
        $.ajax({
            type: 'POST',
            url: 'saveCustomerData.jsp',
            data: $('#sFormID').serialize(),
            success: function(respTxt, status){
				$('#rs').html("Data Saved: " + respTxt + ' status: ' + status);
   			},

            
            error: function (respTxt, status) {
                $('#rs').html('error!');
            }
        });
    }

加载和执行 JavaScript文件

$.ajax({type:"GET", url:"test.js", dataType:"script"});