[size=medium]GET 示例[/size]
[size=medium]POST 示例[/size]
或者这种方式也是自动编码的
new Ajax.Request('/some_url', { method: 'get', parameters: {company: 'example', limit: 12} });
<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 = document.getElementById('customerID').value;
var req = new Ajax.Request('getCustomerData.jsp', {
method: 'get',
parameters: 'id=' + sID,
onSuccess: function (oXHR, oJson) {
displayInfo("responseText: " + oXHR.responseText +
"statusText: " + oXHR.statusText);
},
onFailure: function (oXHR, oJson) {
displayInfo('An error occurred: ' + oXHR.statusText);
}
});
}
function displayInfo(sText) {
document.getElementById('rs').innerHTML = sText;
}
[size=medium]POST 示例[/size]
<!--这里的action没有参数哦~~-->
<form id='id_of_form_element' 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='rs'></div>
<script type="text/javascript">
//取得表单数据并编码
//name=apq&age=100
function getFormParams(oForm) {
var rs = [];
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":
rs[rs.length] = addPostParam("", oField.name, oField.value);
break;
default:
switch (oField.tagName.toLowerCase()) {
case "select":
rs[rs.length] = addPostParam("", oField.name, oField.options[oField.selectedIndex].value);
break;
default:
rs[rs.length] = addPostParam("", oField.name, oField.value);
}
}
}
return rs.join("&");
}
function addPostParam(sParam, sKey, sValue) {
if (sParam.length > 0) sParam += "&";
return sParam + encodeURIComponent(sKey) + "=" + encodeURIComponent(sValue);
}
function displayInfo(txt) {
document.getElementById("rs").innerHTML = txt;
}
function sendRequest() {
//注意: 旧的prototype没有提供表单数据编码的方法, 所以这里要手动编下码
/*var sFormParam = getFormParams(document.forms[0]);
var req = new Ajax.Request('saveCustomerData.jsp', {
method: 'post',
parameters: sFormParam,
onSuccess: function (oXHR, oJson) {
displayInfo(oXHR.responseText);
},
onFailure: function (oXHR, oJson) {
displayInfo('An error occurred: ' + oXHR.statusText);
}
});*/
//哈哈,新的不用手动了
new Ajax.Request('saveCustomerData.jsp', {
method: 'post',
//取得表单数据并编码
parameters: $('id_of_form_element').serialize(true),
onSuccess: function (oXHR, oJson) {
displayInfo(oXHR.responseText);
},
onFailure: function (oXHR, oJson) {
displayInfo('An error occurred: ' + oXHR.statusText);
}
});
}
</script>
//应答器
Ajax.Responders.register({
onCreate: function (oXHR, oJson) {
document.getElementById('status').innerHTML = "服务器连接中...";
},
onComplete: function (oXHR, oJson) {
document.getElementById('status').innerHTML = "已收到响应";
}
});
或者这种方式也是自动编码的
new Ajax.Request('/some_url', { method: 'get', parameters: {company: 'example', limit: 12} });
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() {
new Ajax.Request('saveCustomerData.jsp', {
method: 'post',
//取得表单数据并编码
parameters: getRequestBody(document.forms[0]),
onSuccess: function (oXHR, oJson) {
displayInfo(oXHR.responseText);
},
onFailure: function (oXHR, oJson) {
displayInfo('An error occurred: ' + oXHR.statusText);
}
});
}