`

关于jquery提交表单实现ajax的简单例子

阅读更多
    jQuery的设计非常优雅,其源代码亦给人以美感,利用jQuery框架写出来的js既简练又能完美跨浏览器。
    jquery form插件是基于jQuery开发的一套能够利用ajax技术提交form的框架。
    无论是jQuery,还是jquery form 都是老外写的。
    通常的jQuery ajax提交写法如下:
     $.post("../user/user.do?d=checkPasswordOnUpdateByAjax",{old_password:old_password.val()},function(xml){
      });
    其中:{old_password:old_password.val()}是挂的参数,为json串格式。如果只有几个参数,这种方法还是值得一用的,如果有几十个,从软件可维护性的角度去考虑,用这种方法实在不敢恭维。我曾经写过一个根据form的页内数据元素生成Json串的方法。但是对自己写的东西总觉得不够满意,有没有一种可以提交form数据的插件呢,google一下,输入关键字 jquery form plugin 。我很荣幸的搜到了我需要的东西,既然已经有轮子,自己发明的轮子暂时先放弃。从此我对jQuery form 的依赖及使用变得一发不可收拾。在我做的项目中大量的使用了该插件进行ajax数据提交。
    把jquery form的相关文件导入页面
    <script language="javaScript" src="../static/js/base/jquery.js"></script>      <!--jquery 包-->
    <script language="javaScript" src="../static/js/base/jquery.form.js"></script>   <!--jquery  form包-->
    且二者顺序不可以放反,因为文件是自上而下解析的。
    function submitForm(){
        var form = $("form[name=MsgForm]");
        if($("input[name=user_name]").val() == null || $("input[name=user_name]").val() == ""){//这里是如果user_name为空则用ajaxform提交,否则按照传统方式提交。
            //ajax form post
            var options = {success:showResponse,resetForm:true,url:"../user/msg.do?d=sendMsgByAjax"};
            form.ajaxForm(options);
            return;
        }
        form.submit();// 传统form提交
    }
    function showResponse(xml){//回调函数
        if(1 == xml){
            alert("信息发送成功!");
        }else{
            alert("信息发送失败!");
        }
    }
    注意:
    xml的值1或者-1是后台用response打出来的。如下:
    response.setContentType("text/html;charSet=UTF-8"); 
    response.setCharacterEncoding("UTF-8"); 
    PrintWriter pw = response.getWriter(); 
    pw.println("1");
    url就是form表单要提交到的地址,当然若不指定,会自动使用form里action的值。
    success的值也是函数,就是提交表单处理完后要做的事。
分享到:
评论

相关推荐

    使用jQuery ajax提交表单代码

    本文将深入探讨如何使用jQuery的ajax方法来提交表单,从而实现异步数据交换,提高用户体验。 首先,jQuery的$.ajax()函数是进行Ajax请求的核心,它允许我们与服务器进行异步数据通信。在“使用jQuery ajax提交表单...

    php+jquery+ajax最简单例子

    这仅仅是开始,实际项目中,Ajax可以用来实现更多复杂的交互,比如分页加载、实时聊天、无刷新表单提交等。 了解并掌握这些基础知识对于任何想要涉足Web开发的人来说都是至关重要的。通过实践这个最简单的例子,你...

    JQuery打造PHP的AJAX表单提交实例

    在这个“JQuery打造PHP的AJAX表单提交实例”中,我们将探讨如何结合JQuery库与PHP后端,实现异步表单数据提交。 JQuery是一个轻量级的JavaScript库,它简化了DOM操作、事件处理和Ajax交互。在这个实例中,首先我们...

    ajax与jquery实现的简单验证实例

    这个“ajax与jquery实现的简单验证实例”着重于如何利用这两种技术进行前端数据验证,提高用户体验,减少不必要的服务器交互。在这个实例中,我们将探讨Ajax的核心概念,jQuery库的优势,以及它们如何结合实现表单...

    jquery实现弹窗表单填写提交

    本资源重点展示了如何利用jQuery来实现弹窗表单的填写和提交功能,这对于用户交互和数据收集至关重要。下面将详细阐述这个过程中的关键知识点。 首先,jQuery弹窗通常通过两种方式实现:一种是使用插件,如jQuery ...

    Jquery实现表单异步提交.zip

    综上所述,"Jquery实现表单异步提交"项目通过`ajaxJquerySubmit`实例,详细讲解了如何在Java Web环境中利用jQuery的Ajax功能实现表单无刷新提交,从而提高应用的交互性和效率。这不仅有助于提升用户体验,也有利于...

    jquery实现的AJAX的一些例子

    本主题将深入探讨如何利用jQuery实现AJAX技术,通过给出的实际例子来增强理解。 AJAX(Asynchronous JavaScript and XML)是一种在无需刷新整个页面的情况下,能够更新部分网页的技术。jQuery提供了易于使用的API,...

    asp+jquery ajax实例源码,添加,删除,修改,分页

    - 在前端,jQuery监听表单提交事件,阻止默认的表单提交行为,然后使用$.ajax()发送包含新数据的POST请求到ASP服务器端脚本。 - ASP接收到请求后,通过ADO(ActiveX Data Objects)处理数据库操作,如使用SQL ...

    .net+ajax+jquery.form实现简单的图片批量上传源码

    `jQuery.form`插件是jQuery的一个扩展,专门用于处理表单提交,包括使用AJAX方式提交表单。 在描述中提到,使用`jQuery`动态添加表单。这通常涉及到在用户交互后,例如点击按钮,通过JavaScript动态生成HTML表单...

    ajax验证并提交表单的两种方法博客源码

    本资源通过ajax实现对提交的form表单的验证,该代码不但有针对property验证,也有针对object验证,还有一个异步获取对象的实例;包含完整的代码和库文件;在myeclipse8.5和apache-tomcat-6.0.30测试通过;访问网址:...

    jQuery+ajax实现三级级联

    在这个“jQuery+ajax实现三级级联”的实例中,我们主要探讨如何利用这两种技术来创建一个能够逐级联动的下拉菜单系统,这在数据筛选和表单填写中十分常见,如地区选择、部门分类等场景。 首先,jQuery是一个轻量级...

    jQuery使用$.ajax提交表单完整实例

    本文实例讲述了jQuery使用$.ajax提交表单的方法。分享给大家供大家参考,具体如下: 首先,新建Login.html页面: &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ...

    jQuery提交表单ajax查询实例代码

    看一个用jQuery提交表单ajax查询的例子。 基本功能:用户输入一个表单,输入准考证和验证码,验证用户是否输入表单,点击查询提交,然后从服务器得到返回的数据并显示出来。 代码如下: jQuery部分: 代码如下: ...

    JQUERY表单提交

    JQUERY表单提交 JQuery框架应用中的Form插件是一个功能强大的官方插件,支持Ajax和Ajax文件上传,基本满足日常应用。该插件提供了多种方法来管理表单数据和进行表单提交,包括ajaxForm、ajaxSubmit、formSerialize...

    vue12ajax提交表单

    在Vue.js框架中,提交表单是一个常见的任务,特别是在与后端进行数据交互时,我们通常会使用Ajax技术来实现异步通信。Vue.js结合Ajax(通常指的是jQuery的$.ajax或者现代浏览器的fetch API)可以创建高效且用户体验...

    jQuery一些表单实例打包,Ajax表单判断代码.rar

    jQuery一些表单实例打包,Ajax表单判断代码,锋利的JQuery一书里的随书实例: Demo 1 : form插件的使用--ajaxForm(). Demo 2 : form插件的使用---ajaxSubmit(). Demo 3 : form插件的使用--formSerialize()组装...

    jquery实现通过按钮弹出表单

    总之,jQuery提供了一种简单有效的方式来实现按钮触发弹出式表单的功能,这在Web应用中非常常见,特别是在需要用户输入或进行特定操作的场景下。通过学习和掌握这一技术,你可以提升网站的交互性和用户体验。

    jquery表单验证插件

    它不仅能够帮助开发者轻松地实现表单数据的Ajax提交,还支持文件上传等功能,极大地提升了用户体验并降低了服务器压力。本文主要针对“jquery表单验证插件”进行详细介绍,并通过示例代码展示其使用方法。 #### 二...

    Asp.Net MVC之jQuery与AJAX操作实例

    本实例将深入探讨如何在Asp.Net MVC项目中应用jQuery与AJAX。 一、jQuery简介 jQuery是一个轻量级的JavaScript库,它简化了DOM操作、事件处理、动画设计以及Ajax交互。在Asp.Net MVC项目中,jQuery可以帮助开发者更...

    jQuery ajax提交Form表单实例(附demo源码)

    这个例子展示了如何通过jQuery简化Form表单的AJAX提交,使得代码更易于理解和维护。此外,还可以在`ajaxSubmit`调用前进行表单验证,以确保提交的数据有效。同时,jQuery提供了丰富的插件和API,如`$.validate`用于...

Global site tag (gtag.js) - Google Analytics