`
moqiang02
  • 浏览: 556407 次
  • 性别: Icon_minigender_1
  • 来自: 苏州
文章分类
社区版块
存档分类
最新评论

jquery通过submit()和serialize()提交表单

 
阅读更多
<script type="text/javascript">
    $(function() {
        $('#form1').submit(function() { //当提交表单时,会发生 submit 事件。
            //此处可做表单验证
            //... ...
			
            var postData = $("#form1").serialize();//序列化表单,后台可正常通过post方法获取数据
            $.ajax({
                type: "POST",
                url: "/member/member/post_member",
                data: postData,
                success: function(msg) {
                    if (msg == 0) {
                        alert('操作成功');
                        window.location.href = '/member/member';
                    } else {
                        alert(msg);
                    }
                }
            });
        });
    });
</script>
<div>
    <form id="form1" onsubmit="return false;">
	    <!--表单内容部分-->
        <input type="reset" value="重置" />
        <input type="submit" value="提交" />
    </form>
</div>

<html>
    
    <head>
        <script type="text/javascript" src="jquery.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                $("form").submit(function(e) {
                    //e.preventDefault();   //阻止表单提交
                    alert("Submit prevented");
                });
            });
        </script>
    </head>
    
    <body>
        <form name="input" action="./b.php" method="get">
            First name:
            <input type="text" name="FirstName" value="Mickey" size="20"><br />
            Last name:
            <input type="text" name="LastName" value="Mouse" size="20"><br />
            <input type="submit" value="Submit">
        </form>
    </body>

</html>



分享到:
评论

相关推荐

    jquery实现弹窗表单填写提交

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

    使用jQuery ajax提交表单代码

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

    JQuery Ajax提交整个表单

    总结,使用jQuery的Ajax功能提交整个表单涉及的关键点包括:`serialize()`方法、`$.ajax()`或其简化版`$.post()`/`$.get()`、阻止表单默认提交、处理服务器响应以及跨域问题。理解这些概念和用法,能够帮助开发者在...

    jQuery文字选项问卷调查表单提交.zip

    jQuery提供了`serialize()`方法,可以将表单中的所有字段序列化为URL编码的字符串,便于通过Ajax发送到服务器。在描述中提到的"滚动投票"可能意味着当用户提交答案时,表单会动态更新,可能是以滚动条的形式展示新...

    jQuery Ajax无刷新提交表单并执行邮件通知

    "jQuery Ajax无刷新提交表单并执行邮件通知"这个主题涉及了两个关键点:一是利用jQuery进行表单验证,二是通过Ajax实现无刷新提交表单,同时触发邮件通知功能。 **1. jQuery表单验证** jQuery提供了丰富的DOM操作...

    jQuery三步骤表单内容提交特效.zip

    对于表单,jQuery提供了`$(selector).submit()`方法用于监听表单提交事件,`$(selector).serialize()`用于序列化表单数据,以及`$.ajax()`用于异步提交数据。这些基础功能为创建动态表单奠定了基础。 二、三步骤...

    JQuery 提交表单(附详细图解)

    jQuery的`.ajaxForm`和`.submitForm`方法是专门用来处理表单提交的,它们使得代码更加简洁。然而,这两个方法要求表单内必须有一个提交按钮,这在追求美观的界面设计中可能不适用。 #### 使用`ajaxForm`方式 ```...

    Ajax使用jQuery提交表单 文件

    在Web开发中,Ajax(Asynchronous JavaScript and XML)是一种创建动态网页的技术,它允许在不刷新整个页面的情况下,与服务器交换...通过学习和理解这些代码,你可以更深入地掌握Ajax与jQuery结合处理表单提交的方法。

    jQuery点击图标按钮弹出表单代码

    1. jQuery的基本使用,包括`$(document).ready()`、`click()`、`slideToggle()`和`serialize()`方法。 2. HTML5的新元素和属性,如`&lt;input type="email"&gt;`。 3. 使用CSS3的`display:none`隐藏元素。 4. 阻止表单默认...

    Jquery实现表单异步提交.zip

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

    使用JQuery实现从JSON对象转换为form提交数据

    在处理表单数据时,jQuery的`serialize()`和`serializeArray()`方法尤为有用。 1. **JSON对象到表单数据的转换** 要将JSON对象转换为适合表单提交的数据格式,我们需要遍历JSON对象的键值对,构建一个字符串形式的...

    PHP+Jquery+AJAX POST,GET提交表单并接收返回

    2. **jQuery监听表单提交**:使用jQuery,我们可以监听表单的提交事件,比如`$('form').submit(function(event) { ... })`,阻止默认的表单提交行为(防止页面跳转),并开始执行AJAX请求。 3. **AJAX请求**:使用...

    ajax提交表单到后台

    总结来说,利用jQuery的AJAX和Spring MVC,我们可以实现前端表单的无刷新提交,提高用户体验,同时在后台进行数据处理。这种技术广泛应用于现代Web应用中,特别是在需要实时交互和数据更新的场景下。通过理解并实践...

    jQuery商品信息选择列表表单提交代码

    在IT行业中,jQuery是一款非常流行的...总之,jQuery商品信息选择列表表单提交涉及了jQuery的选择器、表单操作、事件处理和Ajax交互等关键知识点。理解并掌握这些技能,将有助于你创建更高效、更友好的Web应用程序。

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

    `css`目录中的样式文件(如`style.css`)可以用于美化表单和反馈信息。`images`目录可能包含与表单相关的图标或背景图片。 这个实例展示了如何通过JQuery的AJAX功能,配合PHP实现无刷新的表单提交。用户提交表单时...

    jquery提交form表单

    总结,jQuery和`jquery.form.js`插件提供了强大的表单提交工具,使得开发者能够轻松实现异步、无刷新的交互体验,尤其在处理文件上传等复杂场景时,其优势更为明显。通过熟练掌握这些技术,可以提升Web应用的用户...

    Ajax使用jQuery提交表单

    jQuery Form Plugin提供了一个更简单的$.ajaxForm()方法,它可以自动处理表单的序列化和提交。首先,需要在项目中引入jQuery Form Plugin,然后可以这样使用: ```javascript $('#myForm').ajaxForm({ url: '...

    jquery动态表单

    在IT行业中,jQuery是一个非常流行的JavaScript库,它极大地简化了DOM操作、事件处理以及Ajax交互。在本主题中,我们将深入探讨"jQuery动态...通过学习和实践这样的示例,开发者可以更好地掌握jQuery动态表单的运用。

    jQuery文字列表滚动的问卷调查表单提交

    在HTML中,我们应创建一个包含输入字段和提交按钮的表单。我们可以为提交按钮绑定一个click事件,当用户点击提交时,收集表单数据并发送到服务器。 ```html 问题1答案"&gt; ... &lt;input type="submit" value="提交...

    jquery下异步提交表单 异步跨域提交表单

    通过jQuery实现异步提交表单时,可以利用`.submit()`和`$.ajax()`方法,而异步跨域提交则可以通过JSONP或代理服务器的方式实现。由于浏览器同源策略的限制,跨域提交需要特别的处理。JSONP是一种简便的方法,但它的...

Global site tag (gtag.js) - Google Analytics