如上,有三个单选按钮,我想实现在页面的js函数里边,获取到用户选择的那个单选按钮的值
function getValue(){
for(var i=0;i if(document.myform.zt[i].checked == true){ alert("您选择的是第"+(i+1)+"项,value为:"+document.myform.zt[i].value) } } }
1
2
3
前台页面通过ajax环境和js调用web service的几种方法
目录:
1.配置ajax环境
2.js中调用web service (ajax环境) 方法一
3.方法二
4.方法三
5.ajax中的错误处理
//6.写的比较快如果有疏忽之处如能指出感激不尽。以免误人子弟。
一、使用ajax核心组件webconfi里的配置(可略了)
1.contrlos节配置
tagPrefix:命名空间的别名也就是空间的前缀
Assembly 指定加载的程序集
PublicKeyToken 程序集的公钥
代码
2.httpHandlers节的配置
这里的配置主要针对一些特殊的请求如:ajax请求webservice 和javascript编译文件时。.asmx 是处理的web服务的文件,扩展名为。Axd 的http处理则是对封装的javascript文件的处理。
代码
1.在ScriptManageer中指定javascript文件路径,引用webservice时也是在
//在后台中调用和前面使用ScriptManger一样如这里为对象id为 ScriptManagerProxy1 //前台js不变
protected void AddWebService()
{
//创建服务注册对象
ServiceReference service = new ServiceReference("WevService2.asmx");
//添加到Script节点
//ScriptManager1 是页面文件
ScriptManagerProxy1.Scripts.Add(service);
}
//js中调用web service 方法二(在后台声明static 方法)
//前提页面中必须有ajax的
//后台代码
//这里的方法必须为静态
[System.Web.Services.WebMethod]
public static string GetData(string str)
{
return "[" + str + "]";
}
页面代码:
function Button1_onclick()
{
//PageMethods 当前页的PageMethods
//GetData 为后台的静态方法
var name="图图";
PageMethods.GetData(name,Show);
}
function Show(str)
{
alert(str);
}
//可能出现的问题 "PageMethods未定义"或"对象不支持此属性或方法
//1.页面中必须有ajax的
//3.
//js中调用web service 使用异步请求方法三
//
var xmlhttp;
//创建一个xmlhttp请求对象
//该方法一般浏览器都没有问题
function CreateXMLHttpRequest()
{
if(window.ActiveXObject)//用于ie浏览器
{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
else if(window.XMLHttpRequest)//其他浏览器
{
xmlhttp=new xmlHttpRequest();
}
else
alert('创建不了请求对象,没戏了。');
}
//调用webservice的方法
function GetData()
{
//请求的webservice 这里也可以为一般的网址
var url="aaa.asmx?id=3&name='tutu'";
//escape()方法处理中文提交错误没测试应该这里也可用
//var url="aaa.asmx?id=3&name=escape("图图")";
// var url="aaa.asmx";
//GET为发送请求的类型
//true 为异步请求
CreateXMLHttpRequest();//20100907 add
xmlhttp.onreadystatechange=ShowData;//20100907 add xmlhttp.Open("GET","https://www.sodocs.net/doc/c715349729.html,?id=3 & name='tutu'",true); xmlhttp.send();
////多说一点
// //1.GET方法
// xmlhttp.Open("GET","https://www.sodocs.net/doc/c715349729.html,?id=3 & name='tutu'",true);
// //xmlhttp.send();和xmlhttp.send(null);一样的
// //xmlhttp.send();
// xmlhttp.send(null);
//
// //2.POST方法
// //建议不要用POST方法这和服务器设置和环境变量有关不建议用
// xmlhttp.Open("POST","https://www.sodocs.net/doc/c715349729.html,?id=3 & name='tutu'",true);
// //xmlhttp.send();和xmlhttp.send(null);一样的
// //xmlhttp.send();
// xmlhttp.send("id=3 &name='tutu'");
//3.GET和POST方法
//GET发送的数据现在在浏览器地址里当然这里不显示
//GET发送的数据少 POST多
//以前默认get 好像从2.0开始默认为post提交
//在后台取传过来的参数方法不一样。POST 为:Request.Form["id"] GET为:Request.QueryString["id"] 通用的:Request["id"]
}
//处理返回数据的方法
//str
function ShowData()
{
if(xmlhttp.readystate==4 )//异步掉哟娜完成
{
if(xmlhttp.status==200)//html请求执行完成
{
//1.responsetext 返回的是text
//2.responsexml 返回xml 要求服务器响应必须符合xml格式
//3。responsebody 返回body信息
//如果只想返回你后台方法执行的信息可以将页面文件中除了
<%@ Page Language="C#" ContentType="text/html" ResponseEncoding="utf-8" %> 全部删掉
//alert(xmlhttp.responsetext);
retutn xmlhttp.responsetext;
//bytes2BSTR 这是个处理中文乱码的vb方法可在网上搜一下
//alert(bytes2BSTR(xmlhttp.responsetext));
}
}
}
// ]]>
//调用一下
alert(GetData());
//Ajax中的错误处理
使用过ajax的就会发现当发生错误的时候即使我们不捕获 ajax也会已alert的方式弹出显示错误信息
在可视页面上选中ServiceManager控件 F4 打开属性转到事件添加AsyncPostBackError 事件
//ServiceManager捕获UpdataePanel里发生的错误
//如下下面的Button1控件在UpdatPanel1里
protected void ScriptManager1_AsyncPostBackError(object sender, AsyncPostBackErro rEventArgs e)
{
//1.打印定义的键值对中的错误信息
//如果取消下面的注释需要+= 否则这里的信息被替换了
if (e.Exception.Data["errornoe"] != null)
{
string errorstr = e.Exception.Data["errorone"].ToString();
ScriptManager1.AsyncPostBackErrorMessage = errorstr;
}
//2。这里即使注掉也会弹出错误信息就算没有这个事件也会弹出错误提示
//打印原始错误信息
//ScriptManager1.AsyncPostBackErrorMessage = "error:"+e.Exception.Message;
}
protected void Button1_Click(object sender, EventArgs e)
{
//int a = int.Parse("");
try
{
//如果
int a = int.Parse("");
}
catch (Exception ex)
{
//添加一个错误信息
ex.Data["errorone"] = "类型转换错误";
//发出错误信号
throw ex;
} }
div 部分用于显示来自服务器的信息。当按钮被点击时,它负责调用名为loadXMLDoc() 的函数:
所有现代浏览器(IE7+、Firefox、Chrome、Safari 以及 Opera)均内建XMLHttpRequest 对象。 创建 XMLHttpRequest 对象的语法: variable=new XMLHttpRequest(); 老版本的 Internet Explorer (IE5 和 IE6)使用 ActiveX 对象: variable=new ActiveXObject("Microsoft.XMLHTTP"); 为了应对所有的现代浏览器,包括 IE5 和 IE6,请检查浏览器是否支持XMLHttpRequest 对象。如果支持,则创建 XMLHttpRequest 对象。如果不支持,则创建 ActiveXObject : var xmlhttp; if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } 在下一章中,您将学习发送服务器请求的知识。 AJAX - 向服务器发送请求 ?Previous Page ?Next Page XMLHttpRequest 对象用于和服务器交换数据。 向服务器发送请求 如需将请求发送到服务器,我们使用 XMLHttpRequest 对象的 open() 和 send() 方法: xmlhttp.open("GET","test1.txt",true); xmlhttp.send();
Js中的Parent对象 文章分类:Web前端 该变更永远指分割窗口最高层次的浏览器窗口。如果计划从分割窗口的最高层次开始执行命令,就可以用top变量。 parent: 该变量指的是包含当前分割窗口的父窗口。如果在一个窗口内有分割窗口,而在其中一个分割窗口中又包含着分割窗口,则第2层的分割窗口可以用parent变量引用包含它的父分割窗口。 opener: 指用WINDOW.OPEN等方式创建的新窗口对应的原窗口。 附:Window对象、Parent对象、Frame对象、Document对象和Form对象的阶层关系:Windows对象→Parent对象→Frame对象→Document对象→Form对象, 如下:parent.frame1.document.forms[0].elements[0].value; 问题:在一个页面嵌入框架
购物车 cart.css @charset "utf-8"; /* CSS Document */ /*中间导航*/ #nav{ width:985px; /*内容固定宽度*/ margin:0px auto; /*固定宽度且居中*/ height:39px; } #middle#allnav{ width:100%; /*自适应宽度,占据整个屏幕*/ height:39px; background-color:#ff7701; } #nav ul li{ float:left; } #nav ul li a{ float:left; /*兼容ie6*/ padding:0px16px; height:39px; line-height:39px; display:block; font-weight:bold; font-size:15px; color: white; } #nav ul li a:hover{ background-color:#ff8c00 } #nav ul li a.category{ background-image: url(../images/arrow-down.gif); background-repeat:no-repeat; background-position:right; } /*导航菜单的二级菜单用到定位*/ #nav ul li.menuList{ position:relative; } #nav ul li.menuList ul{ background-color:#ff7701; text-align: center; top:39px; /*脱离原文档流*/ left:0px; position:absolute; width:123px; display:none; }
1.document.write( " "); 输出语句 2.JS中的注释为// 3.传统的HTML文档顺序是:document- >html- >(head,body) 4.一个浏览器窗口中的DOM顺序是:window- >(navigator,screen,history,location,document) 5.得到表单中元素的名称和值:document.getElementById( "表单中元素的ID號 ").name(或value) 6.一个小写转大写的JS: document.getElementById( "output ").value = document.getElementById( "input ").value.toUpperCase(); 7.JS中的值类型:String,Number,Boolean,Null,Object,Function 8.JS中的字符型转换成数值型:parseInt(),parseFloat() 9.JS中的数字转换成字符型:( " " 变量) 10.JS中的取字符串长度是:(length) 11.JS中的字符与字符相连接使用號. 12.JS中的比较操作符有:==等于,!=不等于, >, >=, <. <= 13.JS中声明变量使用:var来进行声明 14.JS中的判定语句结构:if(condition){}else{} 15.JS中的循环结构:for([initial expression];[condition];[upadte expression]) {inside loop} 16.循环中止的命令是:break 17.JS中的函数定义:function functionName([parameter],...){statement[s]} 18.当文件中出现多个form表单时.可以用document.forms[0],document.forms[1]来代替. 19.窗口:打开窗口window.open(), 关闭一个窗口:window.close(), 窗口本身:self 20.状態栏的设置:window.status= "字符 "; 21.弹出提示信息:window.alert( "字符 "); 22.弹出確认框:window.confirm(); 23.弹出输入提示框:window.prompt(); 24.指定当前显示链接的位置:window.location.href= "URL " 25.取出窗体中的所有表单的数量:document.forms.length 26.关闭文档的输出流:document.close(); 27.字符串追加连接符: = 28.创建一个文档元素:document.createElement(),document.createTextNode() 29.得到元素的方法:document.getElementById() 30.设置表单中所有文本型的成员的值为空: var form = window.document.forms[0] for (var i = 0; i
windows对象 每个HTML文档的顶层对象. 属性 frames[] 子桢数组.每个子桢数组按源文档中定义的顺序存放. feames.length 子桢个数. self 当前窗口. parent 父窗口(当前窗口是中一个子窗口). top 顶层窗口(是所有可见窗口的父窗口). status 浏览器状态窗口上的消息. defaultStatus 当status无效时,出现在浏览器状态窗口上的缺省消息. name 内部名,为由window.open()方法打开的窗口定义的名字. wind ows方法 alert("message") 显示含有给定消息的"JavaScript Alert"对话框. confirm("message") 显示含有给定消息的"Confirm"对话框(有一个OK按钮和一个Cancel按钮).如果用户单击OK返回true,否则返回false. prompt("message") 显示一个"prompt"对话框,要求用户根据显示消息给予相应输入. open("URL","name") 打开一个新窗口,给予一个指定的名字. close() 关闭当前窗口. setInterval() 定时 clearInterval() 清楚定时器 document对象 含有当前文档信息的对象. 属性 title 当前文档标题,如果未定义,则包含"Untitled". location 文档的全URL. lastModified 含有文档最后修改日期. bgColor 背景色(#xxxxxx) fgColor 前景文本颜色. linkColor 超链接颜色. vlinkColor 访问过的超链颜色. alinkColor 激活链颜色(鼠标按住未放时). forms[] 文档中form对象的数组,按定义次序存储. forms.length 文档中的form对象数目.
大家如果使用firebug去查看的话就会发现,当你滚动到相应的行时,当前行的图片才即时加载的,这样子的话页面在打开只加可视区域的图片,而其它隐藏的图片则不加载,一定程序上加快了页面加载的速度,对于比较长的页面来说,这个方案是比较好的。 实现原理 把所有需要延时加载的图片改成如下的格式: 然后在页面加载时,把所有使用了lazy_src的图片都保存到数组里,然后在滚动时计算可视区域的top,然后把延时加载的图片中top小于当前可视区域(即图片出现在可视区域内)的图片的src的值用lazy_src的来替换(加载图片) 代码 lazyLoad=(function() { var map_element = {}; var element_obj = []; var download_count = 0; var last_offset = -1; var doc_body; var doc_element; var lazy_load_tag; function initVar(tags) { doc_body = document.body; doc_element = https://www.sodocs.net/doc/c715349729.html,patMode == 'BackCompat' ? doc_body: document.documentElement; lazy_load_tag = tags || ["img", "iframe"]; }; function initElementMap() { var all_element = []; //从所有相关元素中找出需要延时加载的元素 for (var i = 0, len = lazy_load_tag.length; i < len; i++) { var el = document.getElementsByTagName(lazy_load_tag[i]); for (var j = 0, len2 = el.length; j < len2; j++) { if (typeof(el[j]) == "object" && el[j].getAttribute("lazy_src")) { element_obj.push(all_element[key]); } } } for (var i = 0,
JavaScript的内部对象: (1) Object (2) String (3) Math (4) Date (5) toString JavaScript 代码放在另一个单独的文件里,然后在网页(HTML文件)中使用“SRC= 此单独文件的路径/地址(URL)”来使用此单独文件里的JavaScript 程序代码。一般将这个单独的文件保存为扩展名为.JS 的文件: JS - 常用語句 1.document.write(""); 输出语句 2.JS中的注释为// 3.传统的HTML文档顺序是: document->html->(head,body) 4.一个浏览器窗口中的DOM顺序是: window->(navigator,screen,history,location,document) 5.得到表单中元素的名称和值: document.getElementById("表单中元素的ID号").name(或value) 6.一个小写转大写的JS: document.getElementById("output").value=document.getElementById("input").value.toUpperCa se(); 7.JS中的值类型: String,Number,Boolean,Null,Object,Function 8.JS中的字符型转换成数值型: parseInt(),parseFloat() 9.JS中的数字转换成字符型: ("" 变量) 10.JS中的取字符串长度是: (length) 11.JS中的字符与字符相连接使用号. 12.JS中的比较操作符有: == 等于,!=不等于,>,>=,<.<= 13.JS中声明变量使用: var 来进行声明 14.JS中的判断语句结构: if(condition){}else{} 15.JS中的循环结构: for([initial expression];[condition];[upadte expression]) {inside loop} 16.循环中止的命令是: break 17.JS中的函数定义:
优点;用户操作感觉满意度高; 仅javascript的html,实现多验证多功能,不用回传,效率高,用户体验好; 知识点:可视窗口的背景着色, div的任意绝对定位, 各种输入文本情况的确检测, 用js控制div的内容:innerHTML, isNaN方法:判断字符串是否全是数字, js实现延时自动跳转到另一页面, 接受上一页面的传来的信息,并判断,进行回应:request[“uid”] login.html 将以下内容复制到文本中,改后缀名为.htm或html 即可看到显示结果