您的当前位置:首页jQuery实现的AJAX简单弹出层效果

jQuery实现的AJAX简单弹出层效果

2023-11-29 来源:热乐宠物网
这篇文章主要介绍了jQuery实现的AJAX简单弹出层效果代码,涉及jQuery响应鼠标事件动态操作页面元素实现弹出层效果的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下

本文实例讲述了jQuery实现的AJAX简单弹出层效果。分享给大家供大家参考,具体如下:

运行效果截图如下:

具体代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> <script type="text/javascript" src="jquery1.3.2.js"></script> <style type="text/css"> <!-- html, body { height: 100%; margin: 0px; font-size: 12px; } .myp { background-color: #FFCC66; border: 1px solid #f00; text-align: center; line-height: 40px; font-size: 12px; font-weight: bold; z-index: 99; width: 300px; height: 120px; left: 50%; /*FF IE7*/ top: 50%; /*FF IE7*/ margin-left: -150px !important; /*FF IE7 该值为本身宽的一半 */ margin-top: -60px !important; /*FF IE7 该值为本身高的一半*/ margin-top: 0px; position: fixed !important; /*FF IE7*/ position: absolute; /*IE6*/ _top: expression(eval(document.compatMode && document.compatMode=='CSS1Compat') ? documentElement.scrollTop + (document.documentElement.clientHeight-this.offsetHeight)/2 :/*IE6*/ document.body.scrollTop + (document.body.clientHeight - this.clientHeight)/2); /*IE5 IE5.5*/ } .myp2 { background-color: #FFCC66; border: 1px solid #f00; text-align: center; line-height: 40px; font-size: 12px; font-weight: bold; z-index: 99; width: 400px; height: 400px; left: 50%; /*FF IE7*/ top: 50%; /*FF IE7*/ margin-left: -200px !important; /*FF IE7 该值为本身宽的一半 */ margin-top: -200px !important; /*FF IE7 该值为本身高的一半*/ margin-top: 0px; position: fixed !important; /*FF IE7*/ position: absolute; /*IE6*/ _top: expression(eval(document.compatMode && document.compatMode=='CSS1Compat') ? documentElement.scrollTop + (document.documentElement.clientHeight-this.offsetHeight)/2 :/*IE6*/ document.body.scrollTop + (document.body.clientHeight - this.clientHeight)/2); /*IE5 IE5.5*/ } .bg { background-color: #666; width: 100%; height: 100%; left: 0; top: 0; /*FF IE7*/ filter: alpha(opacity=50); /*IE*/ opacity: 0.5; /*FF*/ z-index: 1; position: fixed !important; /*FF IE7*/ position: absolute; /*IE6*/ _top: expression(eval(document.compatMode && document.compatMode=='CSS1Compat') ? documentElement.scrollTop + (document.documentElement.clientHeight-this.offsetHeight)/2 :/*IE6*/ document.body.scrollTop + (document.body.clientHeight - this.clientHeight)/2); /*IE5 IE5.5*/ } -- ></style> <script language="javascript" type="text/javascript"> function showp() { $('#popp').removeClass().addClass("myp").css("display","block").css("background","ff9"); $('#bg').css("display","block"); } function showp2() { $('#popp').removeClass().addClass("myp2").css("display","block").css("background","pink"); $('#bg').css("display","block"); } function closep() { $('#popp').css("display","none"); $('#bg').css("display","none"); } </script></head><body onload="$('#bg').css('height',document.body.clientHeight).css('width',document.body.clientWidth); "> <p id="popp" class="myp" style="display: none;"> 动态弹出的层<br /> 动态弹层的内容<br /> <a href="javascript:closep()">关闭窗口</a></p> <p id="bg" class="bg" style="display: none;"> </p> <p style="height: 1400px;"> <p style="text-align: center;"> <a href="javascript:showp()">点我1</a><br/><br/> <a href="javascript:showp2()">点我2</a> </p> </p></body></html>

小编还为您整理了以下内容,可能对您也有帮助:

如何实现JQuery弹出小窗口提交表单

1,点击事件绑定按钮2,显示小窗口3,AJAX提交字符串4,接收结果,隐藏小窗口

jQuery PHP表单提交后如何才能弹出自己写的提示层?

您好,据我所知,要通过后台验证表单实现无刷新前后台交互访问,目前只有使用ajax

使用jQuery后,ajax使用非常简单。

贴上一段代码供您参考:

首先在form里面添加<form onsubmit="return check();"></form>

再定义函数check();

function check(){

var name = $("input[name='name']").val();

if(name == ''){

alert(XXXX不能为空');

$("input[name='cat_name']").focus(); //文本框自动聚焦

return false; //返回假后,并没有访问后台,这是前端验证,多个验证可继续加else if

}else{ //前端验证通过后,就用ajax将数据传到后台验证

$.ajax({

type: 'post', //用post方法传数据

url: 'php后台文件路径',

data: $('#fom').serialize(), //序列化表单,表单所有的数据都会提交到后台

success: function(data){ //访问成功后,后台文件里所有输出的数据都会变成data,可以是数组和字符串,验证表单建议后台:echo '1',那么data就是1,后台echo 什么,data就是什么

if(data == 1){

alert('恭喜,添加成功!',{time:3000,icon:1});

}else if( data == 22 ){

alert('提交失败,请填写完整!');

}else if( data == 3){

alert('提交失败!');

}

}

});

return false; //阻止表单跳转 必须要有

}

}

如何使用jq中的ajax

jqueryajax请求的五个步骤

1。使用ajax发送数据的步骤

步骤1:创建一个异步对象

varxhr=newXMLHttpRequest();

步骤2:设置请求行打开(请求方法,请求url):

//如果GET请求有参数,需要把参数拼接在url之后,

//post如果有参数,传递xhr.open(获取帖子

第三步:设置请求头(GET模式忽略这一步):setRequestHeader()

//1.get不需要设置。

//2.post需要设置请求头:content-type:application/x-www-form-urlencoded

xhr.setrequestheader(内容类型);

步骤4:设置请求体send()

//1.get的参数是在url中拼接的,不需要在这个函数中设置。

//2.在此功能中设置post的参数(如果有参数的话)

xhr.send(null)xhr.send(用户名=

第五步:让异步对象接收服务器的响应数据。

成功响应有两个条件:

xhr.onreadystatechange=function(){

if(xhr.status==200

}

Ajax-get请求案例:

varxhr=newXMLHttpRequest();

xhr.open(获取

xhr.send(空);

xhr.onreadystatechange=function(){

if(xhr.status==200

document.queryselector(.showmsg

}

}

Ajax-post请求案例:

varxhr=newXMLHttpRequest();

xhr.open(帖子

xhr.setrequestheader(内容类型);

xhr.send(用户名=

xhr.onreadystatechange=function(){

//判断服务器是否响应,判断异步对象的响应状态。

if(xhr.status==200.showmsg System.out.println(array.toString()); this.result=array.toString(); 这三句代码不需要。 在action中,只要有get和set方法,值都能传到前台。

ajax怎么在json嵌套数组中获取到某一字段的长度?

假如循环的是这个数组Array长度为Array.length感觉用jq的each循环好用些。$.each("Array",function(i,value){console.log(i,value)})

jquery中的ajax中回调函数的怎样用?

jqueryajax回调函数只要配置正确就可以使用$.ajax({url:test.html,context:document.body,success:function(){alert(回调函数)}})使用代码如上回调函数实现的机制是:

⑴定义一个回调函数;

⑵提供函数实现的一方在初始化的时候,将回调函数的函数指针注册给调用者;

⑶当特定的事件或条件发生的时候,调用者使用函数指针调用回调函数对事件进行处理。知道拓展:jQuery是一套跨浏览器的JavaScript库,简化HTML与JavaScript之间的操作。由JohnResig在2006年1月的BarCampNYC上发布第一个版本。目前是由DaveMethvin领导的开发团队进行开发。全球前10000个访问最高的网站中,有59%使用了jQuery,是目前最受欢迎的JavaScript库。回调函数是应用程序提供给Windows系统DLL或其它DLL调用的函数,一般用于截获消息、获取系统信息或处理异步事件。在计算机程序设计中,回调函数,或简称回调,是指通过函数参数传递到其它代码的,某一块可执行代码的引用。

这一设计允许了底层代码调用在高层定义的子程序。

ajax数据传输方式实例详解?

在异步应用程序中发送和接收信息时,常见的可以选择以纯文本和XML作为数据格式(可参考《jQuery学习笔记之Ajax用法实例详解》),现在还有一种比较流行的方式:JSON(JavaScriptObjectNotation)。好了,下面举例说明这三种数据格式在ajax的异步应用。

一、纯文本方式

1、发送/接收数据:

Codeischeap.看代码:

testJs.js

//此函数等价于document.getElementById/document.all

function$(s){if(document.getElementById){returneval('document.getElementById("'+s+'")');}else{returneval('document.all.'+s);}}

//创建XMLHttpRequest对象,以发送ajax请求

functioncreateXMLHTTP(){

varxmlHttp=false;

vararrSignatures=;

for(vari=0;iarrSignatures.length;i++){

try{

xmlHttp=newActiveXObject(arrSignatures);

returnxmlHttp;

}

catch(oError){

xmlHttp=false;//ignore

}

}

//thrownewError("MSXMLisnotinstalledonyoursystem.");

if(!xmlHttptypeofXMLHttpRequest!='undefined'){

xmlHttp=newXMLHttpRequest();

}

returnxmlHttp;

}

varxmlReq=createXMLHTTP();

//发送ajax处理请求(这里简单验证用户名和密码的有效性,默认正确的输入:用户名和密码都是test)

functionvalidatePwd(oTxt){

varurl="/AjaxOperations.aspx";

xmlReq.open("post",url,true);

xmlReq.setRequestHeader("Content-Length",oTxt.value.length+$("txtUserName").value.length);

xmlReq.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

xmlReq.onreadystatechange=callBack;

xmlReq.send("action=chkPwserInfos="+escape(oTxt.value+"/"+$("txtUserName").value));//发送文本

}

functioncallBack(){

if(xmlReq.readyState==4){

if(xmlReq.status==200){

alert(xmlReq.responseText);//接收文本

}

elseif(xmlReq.status==404){

alert("RequestedURLisnotfound.");

}elseif(xmlReq.status==403){

alert("Accessdenied.");

}else

alert("statusis"+xmlReq.status);

}

}

如何用jquerymobile开发webapp?

jQueryMobile是一个基于jquery的html5移动网站框架,用它做出来的网站界面和App风格类似。jQueryMobile文档,内容不多,耐心看完只需要1个小时,大体分成8大功能点page:最基准单元,包括header,footer,导航栏dialog:对话框,在手机屏幕弹出dialog来交互,我觉得不是很友好transitions:转场效果form:表单button:大button,小button(放在各种栏上的都是小button),还提供了若干内置标准iconlistview:列表,这是jquerymobile的核心UI,提供了10几种类型的List,简单好用event:各种滚动,滑动,拖拽事件Theming:官方提供了5种皮肤,也有工具可以自定义,切换皮肤只需要改动一个classjQueryMobile全面支持ajax,但也可以当做普通html模板在后端渲染数据,我选择后面一种

用jquery如何点击button按钮调用后台方法查询数据返回到弹出框内

$('document').ready(function(e) {

$('.btn').on('click',$.ajax({

type: "POST",

url: "/index.php?a=get",

dataType: "json",

error: function(t, i) {

alert('ajax 出错了');

},

data: {

t: t

},

success: function(t) {

if (t.code) {

alert(t.data)

} else {

alert('没有数据')

}

}

})

)

})

btn就是button的class名。

扩展资料:

ajax() 方法:

通过 HTTP 请求加载远程数据。

该方法是 jQuery 底层 AJAX 实现。简单易用的高层实现见 $.get, $.post 等。$.ajax() 返回其创建的 XMLHttpRequest 对象。大多数情况下你无需直接操作该函数,除非你需要操作不常用的选项,以获得更多的灵活性。

最简单的情况下,$.ajax() 可以不带任何参数直接使用。

注意:所有的选项都可以通过 $.ajaxSetup() 函数来全局设置。

参数:

1、data

类型:String

发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后。查看 processData 选项说明以禁止此自动转换。

必须为 Key/Value 格式。如果为数组,jQuery 将自动为不同值对应同一个名称。如 {foo:["bar1", "bar2"]} 转换为 '&foo=bar1&foo=bar2'。

2、error

类型:Function

默认值: 自动判断 (xml 或 html)。请求失败时调用此函数。

有以下三个参数:XMLHttpRequest 对象、错误信息、(可选)捕获的异常对象。

如果发生了错误,错误信息(第二个参数)除了得到 null 之外,还可能是 "timeout", "error", "notmodified" 和 "parsererror"。

3、success

类型:Function

请求成功后的回调函数。

参数:由服务器返回,并根据 dataType 参数进行处理后的数据;描述状态的字符串。

4、url

类型:String

默认值: 当前页地址。发送请求的地址。

5、dataType

类型:String

预期服务器返回的数据类型。如果不指定,jQuery 将自动根据 HTTP 包 MIME 信息来智能判断,比如 XML MIME 类型就被识别为 XML。在 1.4 中,JSON 就会生成一个 JavaScript 对象,而 script 则会执行这个脚本。

随后服务器端返回的数据会根据这个值解析后,传递给回调函数。可用值:

"xml": 返回 XML 文档,可用 jQuery 处理。

"html": 返回纯文本 HTML 信息;包含的 script 标签会在插入 dom 时执行。

"script": 返回纯文本 JavaScript 代码。不会自动缓存结果。除非设置了 "cache" 参数。注意:在远程请求时(不在同一个域下),所有 POST 请求都将转为 GET 请求。(因为将使用 DOM 的 script标签来加载)

"json": 返回 JSON 数据 。

"jsonp": JSONP 格式。使用 JSONP 形式调用函数时,如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名,以执行回调函数。

"text": 返回纯文本字符串

热乐宠物网还为您提供以下相关内容希望对您有帮助:

jQuery PHP表单提交后如何才能弹出自己写的提示层?

您好,据我所知,要通过后台验证表单实现无刷新前后台交互访问,目前只有使用ajax 使用jQuery后,ajax使用非常简单。贴上一段代码供您参考:首先在form里面添加 再定义函数check();function check(){ var name = $("input[name='name']").val();if(name == ''){ alert(XXXX不能为空');("inp...

如何实现JQuery弹出小窗口提交表单

1,点击事件绑定按钮2,显示小窗口3,AJAX提交字符串4,接收结果,隐藏小窗口

用jquery如何点击button按钮调用后台方法查询数据返回到弹出框内

('document').ready(function(e) { ('.btn').on('click',$.ajax({ type: "POST",url: "/index.php?a=get",dataType: "json",error: function(t, i) { alert('ajax 出错了');},data: { t: t },success: function(t) { if (t.code) { alert(t.data)} else { alert('...

如何使用jq中的ajax

jqueryajax回调函数只要配置正确就可以使用$.ajax({url:test.html,context:document.body,success:function(){alert(回调函数)}})使用代码如上回调函数实现的机制是:⑴定义一个回调函数;⑵提供函数实现的一方在初始化的时候,将回调函数的函数指针注册给调用者;⑶当特定的事件或条件发生的时候,调用者使...

jquery ajax是什么意思

Jquery Ajax是一种基于JavaScript的异步请求技术。通过Jquery的Ajax,网页可以在不刷新整个页面的情况下,与Web服务器进行异步通信,从而实现动态刷新页面的效果。Jquery Ajax不仅提高了用户的体验感,同时还能有效的减轻服务器的压力。Jquery Ajax的优点与用途?Jquery Ajax的优点在于可以实现异步请求,提高用户的...

有没有关于pc端调用ajax接口完整的源代码,用jquery的$简写的ajax源代码...

发一段我在写的。 jQuery(document).ready(function ($) { var div_num = $("div").length;alert(div_num);}) 加到网站底部,如果你的页面有div标签,并弹框一个数字,就说明代码生效了。如图

求一个jquery 弹出层插件 要获取AJAX页面信息

网址 http://sentsin.com/jquery/layer/ layer,一个可以让你想到即可做到的web弹窗(层)解决方案(js组件),作者贤心(菜鸟级前端攻城师)。layer侧重于用户灵活的自定义,为不同人的使用习惯提供动力。其意义在于,可以让您的页面拥有更丰富与便捷的操作体验,而您只需在调用时简单地配置相关参数,...

jquery实现Ajax请求的几种常见方式总结

1. 用jquery 的 load() 方法实现ajax请求格式如下:$('#mydiv').load('/myrequest/url/param')这里的 "mydiv" 是要加载内容的区域 /myrequest/url/param 是你要请求的服务端的 URL. 一旦得到结果,就会把服务端返回的内容显示在 mydiv 区域中.2. 用jquery 的 post() ,get() 方法其实这...

通过XMLHttpRequest和jQuery实现ajax的几种方式_jquery

如果直接用POST的话,代码更简单示例二:一、XMLHttpRequest实现获取数据不使用jQuery实现页面不刷新获取内容的方式,我们这里采用XMLHttpRequest原生代码实现;js代码如下:插入HTML代码:点击获取文本内容 二、jQuery实现ajax获取信息这个例子是动态的从后台获取数据来改变下拉按钮的内容;js代码如下:HTML代码如下...

用jquery如何点击button按钮调用后台方法查询数据返回到弹出框内

1、新建一个html文件,命名为test.html,用于讲解如何用jquery实现点击按钮文本框内的文字加粗。2、在test.html文件内,使用input标签创建一个文本框,用于文字的输入。3、在test.html文件内,设置input标签的id为testid,主要用于下面通过该id获得input对象。4、在test.html文件内,使用button标签创建一个...

Top