新jQuery程序设计基础教程 工业和信息化普通高等教育“十二五”规划教材 教学课件 姚敦红 杨凌 张志美 李晓黎 等编著 第10章.pptVIP

单击“成功的ajax请求”按钮的代码 $(#getErrorData).click(function(){ $(#log).html(); $.ajax({ type: get, url: error.xml, beforeSend : function(){ logEvent(beforeSend); }, success : function(data){ logEvent(success); }, complete : function(){ logEvent(complete); } }); }) }) logEvent()函数 logEvent()函数用于将触发的Ajax事件的信息显示在d=log的div元素中，代码如下： // 打印事件 function logEvent(event, xhr, settings, err) { var s = 事件名（event）：; s += event.type event.type+（全局） || event; //状态码 if (xhr xhr.readyState 1) s += ； 状态码（statusCode）： + xhr.status; //数据源路径 if (settings) s += ； 数据源路径（url）： + settings.url; //错误信息 if (err) s += ； 错误（error）： + err; // 向面板添加新的消息 $(#log).append(div+s+/div); } 处理全局事件的代码 script type=text/javascript src=js/jquery.js/script script type=text/javascript$(function(){ // 绑定ajax全局事件 $(document).ajaxStart(onStart) .ajaxStop(onStop) .ajaxSend(onSend) .ajaxComplete(onComplete) .ajaxSuccess(onSuccess) .ajaxError(onError); 接上 function onStart(event) { logEvent(event); } function onStop(event) { logEvent(event); } function onSend(event, xhr, settings) { logEvent(event, xhr, settings); } function onComplete(event, xhr, settings) { logEvent(event, xhr, settings); } function onSuccess(event, xhr, settings) { logEvent(event, xhr, settings); } function onError(event, xhr, settings, err) { logEvent(event, xhr, settings, err); } …… }) 单击“成功的ajax请求”按钮的事件流 单击“成功的ajax请求”按钮的事件流 10.3 应用实例——使用Ajax实现登录页面 定义表单的代码 form id=formtest action= method=post pspan输入姓名:/spaninput type=text name=username id=username //p pspan输入密码:/spaninput type=password name=password id=password //p /form 定义一个用于显示处理脚本返回数据的div元素 div id=result style=background:orange;border:1px solid red;width:300px;height:200px;/div 定义3个按钮 button id=button_loginajax提交/button button id=test_postpost提交/button button id=test_getget提交/button 单击“ajax提交”按钮的代码 $(document).ready(functi