使用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;
});
}
相关文档:
今天,有同事发现相关业务数据修改后,在IE6下还是显示修改前的值。但在其他浏览器和IE7、IE8下,没有这个问题。
原因:用ajax请求时,如果出现重复的URL,浏览器不会向服务器发送请求,而是根据之前相同的URL请求结果返回。原因就在于之前的请求及结果已经保存在了
缓存里,如果遇到相同URL时,结果是直接从缓存里取得。 ......
jQuery确实是一个挺好的轻量级的JS框架,能帮助我们快速的开发JS应用,并在一定程度上改变了我们写JavaScript代码的习惯。
废话少说,直接进入正题,我们先来看一些简单的方法,这些方法都是对jQuery.ajax()进行封装以方便我们使用的方法,当然,如果要处理复杂的逻辑,还是需要用到jQuery.ajax()的(这个后面会说到).
1. ......
<script language="javascript" type="text/javascript">
function doubleSalary()
{
var employee = new Object();
employee.FirstName = "X";
employee.LastName = "PP";
employee.Salary = 1000;
......
在使用jQuery 的Ajax加载数据是 如果使用get方式传递参数则存在一下问题
firefox下传递数据正常
ie下则会出现缓存问题
解决方法:
1、http://yourwebsite?parseInt(Math.random() * 1000) 在url后面加上一个随即数,这样每次发送的就不一样了,而且不影响你的功能.
2、使用post传递参数
......