使用jQuery实现Ajax异步提交表单实现局部刷新
jQuery学习笔记
提交form表单之后,不会刷新页面,而是局部刷新,欲提交的form只要有id即可
如果使用get请求,注意中文乱码问题,jquery会先使用iso8859-1解码,然后发给服务器,如果使用post请求,则直接将中文内容提交给服务器解析。
使用jquery-1.4.2.js和jquery.form.js插件。
如果创建新的js文件中,需要加上
document.write("<script type='text/javascript' src='jquery-1.4.2.js'></script>")
document.write("<script type='text/javascript' src='jquery.form.js'></script>")
// 动态加载页面
// id 显示页面的容器组件ID2
// url 欲加载页面网址
// gop get请求还是post请求,默认get
function loadPage(id, url, gop) {
$("#" + id).addClass("loader");
$("#" + id).append("Loading......");
var type = (gop == "post" ? "post" : "get");
$.ajax( {
type : type,
url : url,
cache : false,
error : function() {
alert('加载页面' + url + '时出错!')
},
success : function(content) {
$("#" + id).empty().append(content);
$("#" + id).removeClass("loader");
}
});
}
// 局部提交表单
function formSubmit(formId, divId, url) {
$('#' + formId).submit(function() {
$(this).ajaxSubmit( {
target : '#' + divId,
url : url,
error : function() {
alert('加载页面' + url + '时出错!')
}
});
return false;
});
}
相关文档:
以后说明就写在这里了,该控件只当是练手 我把说明一起打包了 不过还是在这里而在贴出来 我有空的时候就会扩展其他功能了
高手就可以飘过了... 每次更新我都会把原来的控件一起打包 文件可能越来越大,呵呵 欢迎交流
Ax控件用于ajax请求
支持浏览器 火狐 IE 等...
控件参数
_Async 是否同步 true为异步 fals ......
原来用jQuery的ajax方式调用asp.net页面基本都是调用单个页面,由调用页面Response内容,而现在采用asp.net ajax后,我们则可以更完美的使用jQuery和asp.net结合了,代码如下:
<asp:ScriptManager ID="ScriptManager1" runat="server" >
<Scripts>
<asp:ScriptReference Path="http ......
其实ajax的东西不是很熟悉,而且对于javascript这样零碎的语言实在是很抗拒。于是过去一直都逃避它,迫于项目的压力,不得已惟有硬碰硬了。为了快速上手,之前做了几个小实验,代码实在太多了。幸好struts2提供了一些ajax的简易实现。
跟网上所有的教程一样,先从最简单的开始吧~
在头结点加上<s:head theme="ajax"/&g ......
用的标签有ScriptManager,UpdatePanel,UpdateProgress ,主要的是UpdatePanel中的Triggers属性一定要对。
前台代码
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdateP ......
如上图所示为Accordion控件:
感觉不错的样式
<style type="text/css">
.headerBg{cursor:hand;text-align:center;width:180px;height:21px;background-image:url(images/ajaxmenubg1.gif);FONT-SIZE: 12px;line-height:21px;} ......