jQuery程序设计基础教程 工业和信息化普通高等教育“十二五”规划教材 教学课件 作者 姚敦红 杨凌 张志美 李晓黎 等编著 第10章.ppt
文本预览下载声明
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(function(){ $(#button_login).click(function(){ login(); //点击ID为button_login的按钮后触发函数 login(); }); }); function login(){ //函数 login(); var username = $(#username).val();//取框中的用户名 var password = $(#password).val();//取框中的密码 $.ajax({ //调用Ajax方法 type: post, //以post方式与后台沟通 url : login.php, //与此php页面沟通 dataType:json,//从php返回的值以 JS
显示全部