jQuery Ajax 实例 ($.ajax、$.post、$.get)不刷新提交
$.post、$.get是一些简单的方法,如果要处理复杂的逻辑,还是需要用到jQuery.ajax()
一、$.ajax的一般格式
$.ajax({
type: 'POST',
url: url ,
data: data ,
success: success ,
dataType: dataType
});二、$.ajax的参数描述
参数 描述
url 必需。规定把请求发送到哪个 URL。
data 可选。映射或字符串值。规定连同请求发送到服务器的数据。
success(data, textStatus, jqXHR) 可选。请求成功时执行的回调函数。
dataType
可选。规定预期的服务器响应的数据类型。
默认执行智能判断(xml、json、script 或 html)。
三、$.ajax需要注意的一些地方:
1.data主要方式有三种,html拼接的,json数组,form表单经serialize()序列化的;通过dataType指定,不指定智能判断。
2.$.ajax只提交form以文本方式,如果异步提交包含<file>上传是传过不过去,需要使用jquery.form.js的$.ajaxSubmit
四、$.ajax网上的应用例子
//1.$.ajax带json数据的异步请求
var aj = $.ajax( {
url:'productManager_reverseUpdate',// 跳转到 action
data:{
selRollBack : selRollBack,
selOperatorsCode : selOperatorsCode,
PROVINCECODE : PROVINCECODE,
pass2 : pass2
},
type:'post',
cache:false,
dataType:'json',
success:function(data) {
if(data.msg =="true" ){
// view("修改成功!");
alert("修改成功!");
window.location.reload();
}else{
view(data.msg);
}
},
error : function() {
// view("异常!");
alert("异常!");
}
});
//2.$.ajax序列化表格内容为字符串的异步请求
function noTips(){
var formParam = $("#form1").serialize();//序列化表格内容为字符串
$.ajax({
type:'post',
url:'Notice_noTipsNotice',
data:formParam,
cache:false,
dataType:'json',
success:function(data){
}
});
}
//3.$.ajax拼接url的异步请求
var yz=$.ajax({
type:'post',
url:'validatePwd2_checkPwd2?password2='+password2,
data:{},
cache:false,
dataType:'json',
success:function(data){
if( data.msg =="false" ) //服务器返回false,就将validatePassword2的值改为pwd2Error,这是异步,需要考虑返回时间
{
textPassword2.html("<font color='red'>业务密码不正确!</font>");
$("#validatePassword2").val("pwd2Error");
checkPassword2 = false;
return;
}
},
error:function(){}
});
//4.$.ajax拼接data的异步请求
$.ajax({
url:'<%=request.getContextPath()%>/kc/kc_checkMerNameUnique.action',
type:'post',
data:'merName='+values,
async : false, //默认为true 异步
error:function(){
alert('error');
},
success:function(data){
$("#"+divs).html(data);
}
});js select多选取值
<html>
<head>
<script type="text/javascript">
function selectMultiple()
{
var o = document.getElementById("mySelect");
var str = "";
for(i=0;i<o.length;i++){
if(o.options[i].selected){
str+=o.options[i].value+",";
}
}
alert( str.substr(0,str.length-1) );
}
</script>
</head>
<body>
<form>
<select id="mySelect" size="4" multiple="true">
<option value="b">苹果</option>
<option value="c">桃子</option>
<option value="d">香蕉</option>
<option value="e">桔子</option>
</select>
<input type="button" onclick="selectMultiple()" value="取值">
</form>
<p>在您点击 “取值” 按钮之前,可查看所选值的内容。</p>
</body>
</html>js遍历当前页面所有元素
function getHasTitles (parentNode) {
var allNodes = parentNode.getElementsByTagName('*');
var length = allNodes.length;
var i;
var hasTitles = [];
var node;
for (i = 0; i < length; i++) {
node = allNodes[i];
if (node.title) {
hasTitles.push(node);
}
}
return hasTitles;
}
var hasTitles = getHasTitles(document);jquery得到所有元素
$("*")
$("#table *")
/*结果:
[ <div>DIV</div>, <span>SPAN</span>, <p>P</p> ] */jQuery的鼠标移入事件
$(function () {
$("#div1").mouseover(function () {
$(this).hide("fast");
});
$("#div1").mouseleave(function () {
$(this).show("fast");
});
});
$(function(){
$('#div').hover(function(){
function(){$(this).hide()},
function(){$(this).show()}
})
})jQuery的显示隐藏
$(this).hide() $(this).show()
所有浏览器通用的js添加收藏夹代码
<script>
function addfavorite()
{
if (document.all)
{
window.external.addFavorite('http://www.XXX.com','XXX');
}
else if (window.sidebar)
{
window.sidebar.addPanel('XXX', 'http://www.XXX.com', "");
}
}
</script>
<a href="#" onclick="addfavorite()">XXX</a> 打开,另存为,属性,打印"等14个JS代码
■刷新■
■导入收藏■
■导出收藏■
■整理收藏夹■
■查看原文件■
■语言设置■
■打开■
<input name=Button onClick=document.all.WebBrowser.ExecWB(1,1) type=button value=打开>
<OBJECT classid=CLSID:8856F961-340A-11D0-A96B-00C04FD705A2 height=0 id=WebBrowser width=0></OBJECT>
■另存为■
<input name=Button onClick=document.all.WebBrowser.ExecWB(4,1) type=button value=另存为><OBJECT classid=CLSID:8856F961-
340A-11D0-A96B-00C04FD705A2 height=0 id=WebBrowser width=0></OBJECT>
■属性■
<input name=Button onClick=document.all.WebBrowser.ExecWB(10,1) type=button value=属性><OBJECT classid=CLSID:8856F961-
340A-11D0-A96B-00C04FD705A2 height=0 id=WebBrowser width=0></OBJECT>
■打印■
<input name=Button onClick=document.all.WebBrowser.ExecWB(6,1) type=button value=打印><OBJECT classid=CLSID:8856F961-
340A-11D0-A96B-00C04FD705A2 height=0 id=WebBrowser width=0></OBJECT>
■页面设置■
<input name=Button onClick=document.all.WebBrowser.ExecWB(8,1) type=button value=页面设置><OBJECT classid=CLSID:8856F961
-340A-11D0-A96B-00C04FD705A2 height=0 id=WebBrowser width=0></OBJECT>
■刷新■
<input type=button value=刷新 name=refresh onclick="window.location.reload()">
■导入收藏■
<input type="button" name="Button" value="导入收藏夹" onClick=window.external.ImportExportFavorites(true,);>
■导出收藏■
<input type="button" name="Button3" value="导出收藏夹" onClick=window.external.ImportExportFavorites(false,);>
■加入收藏■
<INPUT name=Button2 onclick="window.external.AddFavorite(location.href, document.title)" type=button value=加入收藏夹>
■整理收藏夹■
<INPUT name=Submit2 onclick="window.external.ShowBrowserUI(OrganizeFavorites, null)" type=button value=整理收藏夹>
■查看原文件■
<INPUT name=Button onclick=window.location = "view-source:" + window.location.href type=button value=查看源文件>
■语言设置■
<INPUT name=Button onclick="window.external.ShowBrowserUI(LanguageDialog, null)" type=button value=语言设置>
■前进■
<INPUT name=Submit onclick=history.go(1) type=submit value=前进>
■后退■
<INPUT name=Submit2 onclick=history.go(-1) type=submit value=后退>
一、【文件(F)】菜单中的命令的实现
1、〖打开〗命令的实现
[格式]:document.execCommand("open")
[说明]这跟VB等编程设计中的webbrowser控件中的命令有些相似,大家也可依此琢磨琢磨。
[举例]在<body></body>之间加入:
<a href="#" onclick=document.execCommand("open")>打开</a>
2、〖使用 记事本 编辑〗命令的实现
[格式]:location.replace("view-source:"+location)
[说明]打开记事本,在记事本中显示该网页的源代码。
[举例]在<body></body>之间加入:
<a href="#" onclick=location.replace("view-source:"+location)>使用 记事本 编辑</a>
3、〖另存为〗命令的实现
[格式]:document.execCommand("saveAs")
[说明]将该网页保存到本地盘的其它目录!
[举例]在<body></body>之间加入:
<a href="#" onclick=document.execCommand("saveAs")>另存为</a>
4、〖打印〗命令的实现
[格式]:document.execCommand("print")
[说明]当然,你必须装了打印机!
[举例]在<body></body>之间加入:
<a href="#" onclick=document.execCommand("print")>打印</a>
5、〖关闭〗命令的实现
[格式]:window.close();return false
[说明]将关闭本窗口。
[举例]在<body></body>之间加入:
<a href="#" onclick=window.close();return false)>关闭本窗口</a>
二、【编辑(E)】菜单中的命令的实现
〖全选〗命令的实现
[格式]:document.execCommand("selectAll")
[说明]将选种网页中的全部内容!
[举例]在<body></body>之间加入:
<a href="#" onclick=document.execCommand("selectAll")>全选</a>
三、【查看(V)】菜单中的命令的实现
1、〖刷新〗命令的实现
[格式]:location.reload() 或 history.go(0)
[说明]浏览器重新打开本页。
[举例]在<body></body>之间加入:
<a href="#" onclick=location.reload()>刷新</a>
或加入:<a href="#" onclick=history.go(0)>刷新</a>
2、〖源文件〗命令的实现
[格式]:location.replace("view-source:"+location)
[说明]查看该网页的源代码。
[举例]在<body></body>之间加入:
<a href="#" onclick=location.replace("view-source:"+location)>查看源文件</a>
3、〖全屏显示〗命令的实现
[格式]:window.open(document.location,"url","fullscreen")
[说明]全屏显示本页。
[举例]在<body></body>之间加入:
<a href="#" onclick=window.open(document.location,"url","fullscreen")>全屏显示</a>
四、【收藏(A)】菜单中的命令的实现
1、〖添加到收藏夹〗命令的实现
[格式]:window.external.AddFavorite('url', '"网站名")
[说明]将本页添加到收藏夹。
[举例]在<body></body>之间加入:
<a href="javascript:window.external.AddFavorite('添加到收藏夹 " target="_blank">http://oh.jilinfarm.com', '胡明新的个
人主页')">添加到收藏夹</a>
2、〖整理收藏夹〗命令的实现
[格式]:window.external.showBrowserUI("OrganizeFavorites",null)
[说明]打开整理收藏夹对话框。
[举例]在<body></body>之间加入:
<a href="#" onclick=window.external.showBrowserUI("OrganizeFavorites",null)>整理收藏夹</a>
五、【工具(T)】菜单中的命令的实现
〖internet选项〗命令的实现
[格式]:window.external.showBrowserUI("PrivacySettings",null)
[说明]打开internet选项对话框。
[举例]在<body></body>之间加入:
<a href="#" onclick=window.external.showBrowserUI("PrivacySettings",null)>internet选项</a>
六、【工具栏】中的命令的实现
1、〖前进〗命令的实现
[格式]history.go(1) 或 history.forward()
[说明]浏览器打开后一个页面。
[举例]在<body></body>之间加入:
<a href="#" onclick=history.go(1)>前进</a>
或加入:<a href="#" onclick=history.forward()>前进</a>
2、〖后退〗命令的实现
[格式]:history.go(-1) 或 history.back()
[说明]浏览器返回上一个已浏览的页面。
[举例]在<body></body>之间加入:
<a href="#" onclick=history.go(-1)>后退</a>
或加入:<a href="#" onclick=history.back()>后退</a>
3、〖刷新〗命令的实现
[格式]:document.reload() 或 history.go(0)
[说明]浏览器重新打开本页。
[举例]在<body></body>之间加入:
<a href="#" onclick=location.reload()>刷新</a>
或加入:<a href="#" onclick=history.go(0)>刷新</a>
七、其它命令的实现
〖定时关闭本窗口〗命令的实现
[格式]:settimeout(window.close(),关闭的时间)
[说明]将关闭本窗口。
[举例]在<body></body>之间加入:
<a href="#" onclick=setTimeout(window.close(),3000)>3秒关闭本窗口</a>
javascript 获取当前 URL 参数的两种方法:
//返回的是字符串形式的参数,例如:class_id=3&id=2&
function getUrlArgStr(){
var q=location.search.substr(1);
var qs=q.split('&');
var argStr='';
if(qs){
for(var i=0;i<qs.length;i++){
argStr+=qs[i].substring(0,qs[i].indexOf('='))+'='+qs[i].substring(qs[i].indexOf('=')+1)+'&';
}
}
return argStr;
}
//返回的是对象形式的参数
function getUrlArgObject(){
var args=new Object();
var query=location.search.substring(1);//获取查询串
var pairs=query.split(",");//在逗号处断开
for(var i=0;i<pairs.length;i++){
var pos=pairs[i].indexOf('=');//查找name=value
if(pos==-1){//如果没有找到就跳过
continue;
}
var argname=pairs[i].substring(0,pos);//提取name
var value=pairs[i].substring(pos+1);//提取value
args[argname]=unescape(value);//存为属性
}
return args;//返回对象
}另外列出一些 javascript 获取url中各个部分的功能方法:
window.location.host; //返回url 的主机部分,例如:www.xxx.com window.location.hostname; //返回www.xxx.com window.location.href; //返回整个url字符串(在浏览器中就是完整的地址栏),例如:www.xxx.com/index.php?class_id=3&id=2 window.location.pathname; //返回/a/index.php或者/index.php window.location.protocol; //返回url 的协议部分,例如: http:,ftp:,maito:等等。 window.location.port //url 的端口部分,如果采用默认的80端口,那么返回值并不是默认的80而是空字符
关于JQ SCROLL滚动到一定距离触发事件
$(document).ready(function(){
$(window).scroll(function(){
if($(window).scrollTop()>100){
$("div").animate({left:'250px'});
});
});
});
上一篇:jq获取和设置元素的css属性值
下一篇:php页面实时缓存实现方法