电力项目十八--DOM对象的ajax
Ajax操作的核心对象:xmlreq = new XMLHttpRequest();
第一步:在dictionaryIndex.jsp中添加:
<script type="text/javascript" src="${pageContext.request.contextPath }/script/pub.js"></script>
第二步:调用js的代码:实现:
Pub.submitActionWithForm:
* 参数一:表单Form2的名称
* 参数二:表示URL连接
* 参数三:表单Form1的名称
ajax的封装:
:在dictionaryIndex.jsp中存在2个表单Form1和Form2
:使用ajax传递表单Form1中的元素作为参数,在服务器端进行处理,将处理后的结果放置dictionaryEdit.jsp中
:将dictionaryEdit.jsp中的全部内容放置dictionaryIndex.jsp页面的Form2中
效果:异步效果,一个页面表单Form1中的内容不发生变化,Form2中的内容发生变化
Pub.submitActionWithForm('Form2','${pageContext.request.contextPath }/system/elecSystemDDLAction_edit.do','Form1');
第三步:在pub.js中定义:
步骤一:(Pub.submitActionWithForm)
/***
* domId:表单Form2的名称
* action:表示URL连接
* sForm:表单Form1的名称
*/
Pub.submitActionWithForm=function(domId,action,sForm){
/**第一步:创建Ajax引擎对象*/
var req = Pub.newXMLHttpRequest();
/**第二步:req.onreadystatechange表示事件处理函数(相当于一个监听),用来监听客户端与服务器端的连接状态*/
var handlerFunction = Pub.getReadyStateHandler(req, domId,Pub.handleResponse);
req.onreadystatechange = handlerFunction;
/**第三步:打开一个连接,要求:如果是POST请求,需要设置一个头部信息,否则此时不能使用req.send()方法向服务器发送数据*/
req.open("POST", action, true);
req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
/**第四步:向服务器发送数据,格式:name=张三&age=28*/
var str = Pub.getParams2Str(sForm);
//传递表单Form1中的元素作为参数给服务器
req.send(str);
}
步骤二:创建ajax引擎(Pub.newXMLHttpRequest)
/**
* 创建ajax引擎
*/
Pub.newXMLHttpRequest=function newXMLHttpRequest() {
var xmlreq = false;
if (window.XMLHttpRequest) {
xmlreq = new XMLHttpRequest();
} else if (window.ActiveXObject) { try { xmlreq = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e1) { try { xmlreq = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e2) { alert(e2);
}
}
}
return xmlreq;
}
步骤三:传递表单Form1中的元素作为参数(Pub.getParams2Str)
/**
*
* @param sForm:传递表单Form1的名称
* @returns {String}:使用ajax返回服务器端的参数,传递的就是表单Form1中元素的参数
*/
Pub.getParams2Str=function getParams2Str(sForm){ var strDiv=""; try {
var objForm=document.forms[sForm];
if (!objForm)
return strDiv;
var elt,sName,sValue;
for (var fld = ; fld < objForm.elements.length; fld++) {
elt = objForm.elements[fld];
sName=elt.name;
sValue=""+elt.value;
if(fld==objForm.elements.length-)
strDiv=strDiv + sName+"="+sValue+"";
else
strDiv=strDiv + sName+"="+sValue+"&";
}
}
catch (ex) {
return strDiv;
} return strDiv;
}
步骤四:接收服务器端返回的结果(Pub.getReadyStateHandler)
/**
*
* @param req:引擎对象
* @param eleid:表单Form2的名称
* @param responseXmlHandler:Pub.handleResponse(函数体)
* @returns {Function}
*/
Pub.getReadyStateHandler =function getReadyStateHandler(req, eleid,responseXmlHandler) { return function () {
/**
* req.readyState:用来监听客户端与服务器端的连接状态
* 0:表示此时客户端没有调用open()方法
* 1:表示客户端执行open方法,但是send方法没有执行
* 2:open方法执行,send方法也执行
* 3:服务器开始处理数据,并返回数据
* 4:返回数据成功,只有4这个状态,才能获取服务器端返回的结果
*/
if (req.readyState == ) {
/**
* req.status:表示java的状态码
* 404:路径错误
* 500:服务器异常
* 200:表示没有异常,正常访问数据,只有200这个状态的时候,才能获取服务器端返回的结果
*/
if (req.status == ) {
/**
* req.responseText:获取服务器端返回的结果,返回的是文本的结果(包括:字符串,json数据)
* req.responseXML:获取服务器端返回的结果,返回的是XML数据的结果
*/
responseXmlHandler(req.responseText,eleid); } else {
alert("HTTP error: "+req.status);
return false;
}
}
}
步骤五:将返回的结果dictionaryEdit.jsp,并放置到dictionaryIndex.jsp的Form2中(Pub.handleResponse)
/**
* @param data:服务器返回的结果
* @param eleid:表单Form2的名称
*/
Pub.handleResponse= function handleResponse(data,eleid){
//获取表单Form2的对象
var ele =document.getElementById(eleid);
//将返回的结果放置到表单Form2的元素中
ele.innerHTML = data; }
对应的页面dictionaryEdit.jsp
查询方法写完,但是页面上还是没有显示出来 。
电力项目十八--DOM对象的ajax的更多相关文章
- Python学习(三十八)—— Djago之Ajax
转载自:http://www.cnblogs.com/yuanchenqi/articles/7638956.html 一.Ajax准备知识:json 什么是json? 定义: JSON(JavaSc ...
- Python全栈开发之路 【第十八篇】:Ajax技术
Ajax技术 Ajax = 异步 JavaScript 和 XML. Ajax 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术. 1.jQuery的load()方法 jQuery loa ...
- 数据字典的设计--4.DOM对象的ajax应用
需求:点击下拉选项框,选择一个数据类型,在表单中自动显示该类型下所有的数据项的名称,即数据库中同一keyword对应的所有不重复的ddlName. 1.在dictionaryIndex.js ...
- 项目十八-Hadoop+Hbase分布式集群架构“完全篇”
本文收录在Linux运维企业架构实战系列 前言:本篇博客是博主踩过无数坑,反复查阅资料,一步步搭建,操作完成后整理的个人心得,分享给大家~~~ 1.认识Hadoop和Hbase 1.1 hadoop简 ...
- Objective-C学习笔记(十八)——对象方法和类方法的声明,定义及调用
在程序设计中,函数的使用无疑大大简化了代码的编写.提高代码执行的效率.降低反复代码. 所以如今我们来具体研究一下方法. 本样例还是以People类为例. (一)代码一: (1)先在People.h中声 ...
- 电力项目十四--js添加highslider特效
当页面的一个table表格无法显示所有的内容的时候,点击[查看详细信息],显示详细内容: 下载css,js 1.在actingIndex.jsp中添加:引入js和css: <LINK href= ...
- 【转】设计模式 ( 十八 ) 策略模式Strategy(对象行为型)
设计模式 ( 十八 ) 策略模式Strategy(对象行为型) 1.概述 在软件开发中也常常遇到类似的情况,实现某一个功能有多种算法或者策略,我们可以根据环境或者条件的不同选择不同的算法或者策略来完成 ...
- 设计模式 ( 十八 ) 策略模式Strategy(对象行为型)
设计模式 ( 十八 ) 策略模式Strategy(对象行为型) 1.概述 在软件开发中也经常遇到类似的情况,实现某一个功能有多种算法或者策略,我们能够依据环境或者条件的不同选择不同的算法或者策略来完毕 ...
- ThinkPHP页面跳转、Ajax技巧详细介绍(十八)
原文:ThinkPHP页面跳转.Ajax技巧详细介绍(十八) ThinkPHP页面跳转.Ajax技巧详细介绍 一.页面跳转 $this->success('查询成功',U('User/test' ...
随机推荐
- thinkphp 自动跟新时间
看了很多文章和资料了,明白何为真传一句话了... 模板里: <input type="text" name="time" value="{:da ...
- 关于Cocos2d-x运行项目时弹框崩溃的解决
想要运行工程的时候,跳出一个框说停止cantnot open the window,还提到什么GLVM之类的,这是显卡驱动出现问题,如果是远程连接电脑的话,很有可能就是用来远程连接的那台电脑的显卡驱动 ...
- python中常用的内建模块
[datetime] datetime是python处理日期和时间的标准库 获取当前日期和时间 我们先看如何获取当前日期和时间: 注意到datetime是模块,datetime模块还包含一个datet ...
- 【转】MFC CreateFont 用法
中国人自古就有自右至左.从上到下书写汉字的习惯.而当我们在自己所编写的应用程序中使用输出函数输出的总是自左至右的横排文字.有没有可能在我们的应用程序中实现竖写汉字的效果呢?笔者偶然发现了一种利用VC实 ...
- 写给大忙人的JavaSE 8 - 学习
前面有提到过lambda和函数式接口,但是JavaSE 8 除了这两个新特性之后还提供了很多有用的东西.例如Stream. 摸索了几天,终于弄明白Stream的应用了. 先推荐一篇文章:Java 8 ...
- (转)深入解析SendMessage、PostMessage
转自:http://blog.csdn.net/xt_xiaotian/article/details/2778689 本文将使用C++语言,在MFC框架的配合下给出PostMessage.S ...
- VNC轻松连接远程Linux桌面(1)
Linux平台安装VNCServer Windows平台使用VNC-Viewer 方法/步骤 在Linux平台安装VNCServer服务端软件包. #yum -y install vnc *v ...
- IOS 命令行编译
转自:简书 IOS 命令行编译 发表于 IOS2013-08-17 07:07 字数: 583 阅读量: 61 This document will note about the ios comm ...
- c++ __int64
C++的64位整数[原]by 赤兔 在做ACM题时,经常都会遇到一些比较大的整数.而常用的内置整数类型常常显得太小了:其中long 和 int 范围是[-2^31,2^31),即-2147483648 ...
- React中props与state
以下内容均为个人理解. 1.state: 在react中,state可以看成管理页面状态的集合(实则一个对象而已),库里面的成员均为页面渲染变量,整个页面为一个状态机,当state发生变化时,页面会重 ...