您的位置:首页 > Web前端 > JQuery

使用jQuery实现Ajax异步提交表单实现局部刷新

2010-05-11 19:10 1231 查看
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;
});
}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: