`
songzhan
  • 浏览: 250546 次
  • 性别: Icon_minigender_1
社区版块
存档分类
最新评论

Ajax异步提交表单 局部刷新

 
阅读更多
提交form表单之后,不会刷新页面,而是局部刷新

如果使用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;
});
}

原文章地址:http://hi.baidu.com/xuepiaohan2006/item/45307ffde01ca16a3c14859e
分享到:
评论

相关推荐

    简单的ajax异步验证,局部刷新

    在网页开发中,"简单的Ajax异步验证,局部刷新"是一种常见的交互技术,它使得用户在无需刷新整个页面的情况下能够实时验证输入数据的有效性。这种技术极大地提升了用户体验,因为用户可以立即看到他们的输入是否符合...

    Ajax异步无刷新验证码

    Ajax异步无刷新验证码是一种常见的Web安全验证技术,它结合了Ajax(Asynchronous JavaScript and XML)与验证码(CAPTCHA)的特性,为用户提供更流畅、更友好的网页交互体验。在传统的网页验证过程中,用户每次提交...

    Ajax异步提交表单数据的说明及方法实例

    对于一个典型的AJAX异步提交表单的示例,如登录页面的登录操作,我们可以看到以下步骤: 1. 用户填写表单并点击登录按钮。 2. 使用jQuery库监听登录按钮的点击事件。 3. 当按钮被点击时,阻止默认的表单提交行为,...

    ajax异步提交获取信息示例

    **Ajax异步提交获取信息详解** ...综上所述,通过AJAX异步提交,我们可以实现页面无刷新的数据获取,提高用户交互体验。结合实际项目需求,理解并熟练运用这些知识点,将有助于提升Web应用的性能和用户体验。

    jQuery ajaxSubmit 实现ajax提交表单局部刷新

    总结,jQuery的`ajaxSubmit`提供了一种方便的方式来实现表单的异步提交,通过局部刷新的方式提升用户体验。通过配置各种选项和回调函数,我们可以根据需求定制化表单提交的行为。在实际项目中,`ajaxSubmit`通常与...

    asp.net mvc3 表单提交和异步提交

    表单提交适合简单的交互,而Ajax提交则能提升用户体验,尤其是在需要频繁与服务器交互或更新局部页面时。理解并熟练运用这两种提交方式,对于提高ASP.NET MVC3应用程序的性能和用户体验至关重要。

    php ajax 实现局部刷新简单例子(超简单化)

    在探讨PHP与AJAX如何协同工作以实现网页的局部刷新之前,我们首先需要理解这两个技术的基本概念及其在现代Web开发中的角色。 ### PHP:服务端脚本语言 PHP(Hypertext Preprocessor)是一种广泛使用的开源服务器端...

    ajax 局部刷新的例子

    Ajax(Asynchronous JavaScript and XML...总之,Ajax局部刷新通过异步请求和动态更新DOM,极大地提高了网页的交互性和用户体验。在开发Web应用时,善用Ajax能显著提升用户满意度,同时降低服务器负载,提高系统效率。

    Asp+ajax提交表单实例

    Ajax并非一种编程语言,而是利用JavaScript、XMLHttpRequest对象和DOM(Document Object Model)来实现局部刷新的技术。在Asp环境中,我们可以使用JavaScript创建一个Ajax请求,并在服务器端通过Asp处理这个请求。 ...

    AJAX异步处理原理分析

    它通过在后台与服务器进行少量数据交换,使网页实现局部刷新,从而极大地提高了用户体验。在本文中,我们将深入探讨AJAX的核心原理,包括其工作流程、主要组成部分以及实际应用。 **1. AJAX工作流程** AJAX的工作...

    Jquery+Ajax+Php+Mysql异步刷新

    总的来说,Jquery+Ajax+Php+Mysql异步刷新表单验证是一个综合性的Web开发技术,涵盖了前端交互、后端处理和数据存储等多个环节。掌握这项技术对于提高Web应用的用户体验和效率具有重要意义。通过实际操作和理解这些...

    弹DIV提交表单无刷新

    而无刷新提交表单则是利用Ajax技术,通过JavaScript向服务器发送异步请求,只更新部分页面内容。当用户在弹出的DIV中填写完表单并点击提交后,JavaScript会捕获提交事件,阻止默认的表单提交行为,然后发送Ajax请求...

    ajax异步请求小结

    Ajax广泛应用于网页表单验证、实时聊天、无限滚动、地图应用、内容过滤等需要局部刷新的场景。 ### 缓存问题与解决 - **GET请求的缓存问题**:IE浏览器会缓存GET请求。为防止这种情况,可以在URL后添加一个随机数...

    运用ajax局部刷新 制作登录验证

    要实现Ajax局部刷新的登录验证,首先需要在HTML中创建登录表单,包括输入字段和提交按钮。接着,使用JavaScript(通常搭配jQuery库,因为其提供了方便的Ajax函数)来监听表单的提交事件。当用户点击提交按钮时,阻止...

    Ajax技术局部刷新注册页面

    3. 数据提交:用户填写完整信息后,使用Ajax提交表单,避免页面跳转,提高用户体验。 Ajax技术的使用需要考虑浏览器兼容性,虽然现代浏览器普遍支持XMLHttpRequest,但老版本的浏览器可能需要依赖库如jQuery来提供...

    使用Ajax实现页面无刷新(局部刷新),

    它的核心是JavaScript对象XMLHttpRequest,通过这个对象,我们可以向服务器发送异步请求,获取数据并动态更新页面内容,从而实现页面的无刷新或局部刷新。 **一、Ajax的基本工作原理** Ajax的核心是创建...

    AJAX局部刷新技术

    它的核心在于使用JavaScript与服务器进行异步数据交换,通过XML或者JSON等格式传输数据,并且更新DOM(Document Object Model)来实现页面的局部刷新。这种技术极大地提升了用户体验,因为用户无需等待整个页面加载...

    无刷新提交表单实现

    无刷新提交表单实现是现代Web开发中的一个重要技术,它为用户提供更为流畅的交互体验,无需等待整个页面刷新即可完成数据的提交与处理。这种技术通常依赖于Ajax(Asynchronous JavaScript and XML)或者现代浏览器...

    利用Ajax+Jquery实现异步进度条效果

    .NET框架提供了ASP.NET,一个用于构建Web应用的强大框架,支持Ajax功能,使得Web应用可以实现无刷新交互。 Ajax(Asynchronous JavaScript and XML)是一种在不重新加载整个网页的情况下,能够更新部分网页的技术。...

Global site tag (gtag.js) - Google Analytics