ajax提交Form


Jquery的$.ajax方法可以实现ajax调用,要设置url,post,参数等。


如果要提交现有Form需要写很多代码,何不直接将Form的提交直接转移到ajax中呢。

<!DOCTYPE html>
<html>
<head>
    <title>form Ajax提交</title>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
    //将form转为AJAX提交
    function ajaxSubmit(frm, fn) {
        var dataPara = getFormJson(frm);
        $.ajax({
            url: frm.action,
            type: frm.method,
            data: dataPara,
            success: fn
        });
    }

    //将form中的值转换为键值对。
    function getFormJson(frm) {
        var o = {};
        var a = $(frm).serializeArray();
        $.each(a, function () {
            if (o[this.name] !== undefined) {
                if (!o[this.name].push) {
                    o[this.name] = [o[this.name]];
                }
                o[this.name].push(this.value || ‘‘);
            } else {
                o[this.name] = this.value || ‘‘;
            }
        });

        return o;
    }
//ajaxSubmit方法第一个参数,是要提交的form,第二个参数是ajax调用成功后的处理函数。
//将form的action传递给ajax的url,form的method传递给ajax的type,再将格式化后的表单内容传递给data。
//getFormJson方法将form的元素转化为json格式键值对。形如:{name:‘aaa‘,password:‘tttt‘},注意将同名的放在一个数组里。
//调用
    $(document).ready(function(){
        $(‘#Form1‘).bind(‘submit‘, function(){
            ajaxSubmit(this, function(data){
                alert(data);
            });
            return false;
        });

        $(‘#Form2‘).bind(‘submit‘, function(){
            ajaxSubmit(this, function(data){
                alert(data);
            });
            return false;
        });
    });
    </script>
</head>
<body>
<form id="Form1" action="action.php" method="post" >
名称:<input name="name" type="text" /><br />
密码:<input name="password" type="password" /><br />
手机:<input name="mobile" type="text" /><br />
说明:<input name="memo" type="text" /><br />
<input type="submit" value="提 交" />
</form>

<form id="Form2" action="action.php" method="get" >
名称:<input name="name" type="text" /><br />
密码:<input name="password" type="password" /><br />
手机:<input name="mobile" type="text" /><br />
说明:<input name="memo" type="text" /><br />
<input type="submit" value="提 交" />
</form>
</body>
</html>

在ajaxSubmit方法调用前,可验证数据是否正确,在alert(data)处可加入自己调用返回后处理代码。


在调用ajaxSubmit方法后,必须添加return false;语句防止Form真实提交。

 
时间: 2024-10-18 19:54:48

ajax提交Form的相关文章

使用ajax提交form表单,包括ajax文件上传 转http://www.cnblogs.com/zhuxiaojie/p/4783939.html

使用ajax提交form表单,包括ajax文件上传 前言 使用ajax请求数据,很多人都会,比如说: $.post(path,{data:data},function(data){ ... },"json"); 又或者是这样的ajax $.ajax({ url:"${pageContext.request.contextPath}/public/testupload", type:"post", data:{username:username},

通过php jq ajax 提交form表单

参考http://www.php100.com/html/webkaifa/PHP/PHPyingyong/2013/0619/13568.html html <div id="contact_form"> <form name="contact" method="post" > <label for="name" id="name_label">姓名</label

jquery的ajax提交form表单方式总结

方法一: function AddHandlingFeeToRefund() { var AjaxURL= "../OrderManagement/AjaxModifyOrderService.aspx"; alert($('#formAddHandlingFee').serialize()); $.ajax({ type: "POST", dataType: "html", url: AjaxURL + '?Action=' + 'Submit

ajax提交form表单资料详细汇总

一.ajax提交form表单和不同的form表单的提交主要区别在于,ajax提交表单是异步提交的,而普通的是同步提交的表单.通过在后台与服务器进行少量数据交换,ajax 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新.传统普通的网页(不使用ajax)如果需要更新内容,必须重载整个网页页面. 二.通过ajax提交form实现的登录实例: <body> <h1 align="center">用户登录</h1> &

mvc4 ajax 提交form

在根据网上的方法进行mvc ajax 提交form时成功后总是会跳转至一个空白界面并仅显示返回的数据,之后又经过多次查找资料找到了解决方法,具体用法如下(注意红色字体) <head> <script type="text/javascript" src="@Url.Content("~/scripts/jquery.form.min.js")"></script> <meta name="vie

AJAX提交form表单带文件上传

过了三天才想要写博客,这样不好,要改正 在做毕设的时候,用户发帖涉及到了文件上传的问题,在这里记录一下 背景: 在用户发帖的时候,用户只想发表文字postText,还有些用户想在发表postText的同时还发表一些图片,如何做? 上代码 不写的太细了,和流水账似的,挑重点记录一下. 1.前台的文件上传 本来想用form表单直接上传了,但是form提交时会刷新整个页面,但这不是我想要的,所以使用了ajax提交form表单. 利用ajax提交表单需要用到jquery.form.js这个包,网上有很多

使用ajax提交form表单,包括ajax文件上传

前言 使用ajax请求数据,很多人都会,比如说: $.post(path,{data:data},function(data){ ... },"json"); 又或者是这样的ajax $.ajax({ url:"${pageContext.request.contextPath}/public/testupload", type:"post", data:{username:username}, success:function(data){ w

沫沫金 - jQuery序列化form表单【支持ajax提交form对象表单entity.xxx】

需要form表单提交,大表单对字段后台人工处理太麻烦.还是选择form表单对象(entity.xx)提交方便,那么怎么ajax提交这样的form对象表单呢? 命名jquery.commons.js内容如下 /**  * FORM对象表单ajax提交前数据处理方法  * @param frm  * @returns JSON Object  */ function getFormJson(frm) {     var o = {};     var a = $(frm).serializeArra

jQuery实现ajax提交form表单(可以是提交json),用springmvc接收。图文详解

第一种方法(简单易用,防蚊虫): 1.1 从form表单到congtroller接收.1 是form表单,2 是ajax提交 3 springmvc接收 1.2 debug 看后台数据,看到了吧,userEO接收到数据了 1.3 有人想看看seralize和seralizeArray数据不同 seralize:id=1&name=xiaohua&age=18&sex=man seralizeArray[ id 1],[ name xiaohua],[ age 18],[ sex m

jQuery通过jquery.form.js插件使用AJAX提交Form表单

我简单使用了一下,jQuery Form插件有一下优点:  1.支持提交前验证. 2.支持提交后回调. 3.采用AJAX方式,有很好的用户体验 4.提交方式是灵活.只要指定要提交的form ID即可.想提交那个form.就可提交那个.同时提交参数可配置.5.支持提交多种类型数据.如:xml,json等. 主要的函数: 1.ajaxForm 增加所有需要的事件监听器,为AJAX提交表单做好准备.ajaxForm不能提交表单.在document的ready函数中,使用ajaxForm来为AJAX提交