ajax代替form,3.3. 用AJAX取代传统的form提交

3.3.5. 改造示例二：用Ajax.Request获取并处理数据

当从版本库下拉框(②)选择时，将触发更新授权路径的列表(③)。

原来的实现是提交整个表单并刷新整个页面，用AJAX改造后，

只更新授权路径的列表(③)部分。

虽然也可以用Ajax.Updater来更新整个授权路径列表，但为了演示另外一种Ajax处理方式，

以及获得更少的带宽占用和更快的响应，使用Ajax.Request来实现。

版本库下拉框(②)更新时，执行JavaScript函数：update_path()，而非提交表单：

函数update_path()，执行Ajax.Request，从"get_auth_path"这个action获取信息，

并用返回值(request.reponseText)为参数调用JavaScript函数ajax_update_path。

function update_path(form)

{

var repos = "";

if (form.reposinput[0].checked) {

repos = form.reposselector.options[form.reposselector.selectedIndex].value;

} else {

repos = form.reposname.value;

}

var params = {repos:repos};

showNoticesPopup();

new Ajax.Request(

'${h.url_for(controller="check", action="get_auth_path")}',

{asynchronous:true, evalScripts:true, method:'post',

onComplete:

function(request)

{ hideNoticesPopup();

ajax_update_path(request.responseText);},

parameters:params

});

}

函数ajax_update_path()，解析参数code，更新授权路径的下拉列表框。

本例非常简单，直接将参数(code)当作JavaScript代码并执行(eval函数)，

这是因为Ajax.Request获取到的内容是字符串格式的JavaScript代码。

最终这些JavaScript代码在函数ajax_update_path中被执行，

并用相应的数据更新了授权路径的列表(③)。

function ajax_update_path(code)

{

var id = new Array();

var name = new Array();

var total = 0;

pathselector = document.forms[0].pathselector;

lastselect = pathselector.value;

pathselector.options.length = 0;

try {

eval(code);

for (var i=0; i < total; i++)

{

pathselector.options[i] = new Option(name[i], id[i]);

if (id[i]==lastselect)

pathselector.options[i].selected = true;

}

}

catch(exception) {

alert(exception);

}

}