prototype.js ，ajax部分使用例子

最新推荐文章于 2025-12-05 11:24:16 发布

原创最新推荐文章于 2025-12-05 11:24:16 发布 · 2.4k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ajax #parameters #function #url #button #input

本文介绍如何利用AJAX技术实现网页上的实时查询与更新功能。通过两个具体实例展示了AJAX请求的发送过程：一是根据员工ID和年份查询销售数据；二是向指定区域动态加载HTML内容。

1、AJAX查询

下载: demo.js
function searchSales()
{
var empID = $F('lstEmployees'); //定义参数
var y = $F('lstYears'); //定义参数
var url = 'http://yoursever/app/get_sales'; //查询URL
var pars = 'empID=' + empID + '&year=' + y; //查询参数
var myAjax = new Ajax.Request(
url,
{method: 'get', parameters: pars, onComplete: showResponse} //查询方法和属性/
);
}
function showResponse(originalRequest)
{
//put returned XML in the textarea
$('result').value = originalRequest.responseText; //返回结果
}
HTML代码

下载: demo.html
<select id="lstEmployees" size="10" onchange="searchSales()">
<option value="5">Buchanan, Steven
<option value="8">Callahan, Laura</option>
<option value="1">Davolio, Nancy</option>
</select>
<select id="lstYears" size="3" onchange="searchSales()">
<option selected="selected" value="1996">1996</option>
<option value="1997">1997</option>
<option value="1998">1998</option>
</select>

<textarea id=result cols=60 rows=10 >
2、AJAX 更新填充

下载: action.js
<script>
function getHTML()
{
var url = 'http://yourserver/app/getSomeHTML'; //定义URL
var pars = 'someParameter=ABC'; //定义参数
var myAjax = new Ajax.Updater(
{success: 'placeholder'},
url,
{method: 'get', parameters: pars, onFailure: reportError});
}
function reportError(request)
{
alert('Sorry. There was an error.');
}
</script>
<input type=button value=GetHtml onclick="getHTML()"/>
<div id="placeholder">