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

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

以前的处理方法

如Form代码如下:

<form id="Form1" action="action.aspx" 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>

当提交后,会跳转到action.aspx页面。并可以通过Request.Params["name"]可以取到值。

思考

如果不想刷新页面使用ajax,就又要在$.ajax中指定url,等信息,不好维护。

在网上查了一下,老早以前老外就有解决方案了。使用ajax直接按照Form信息直接提交。不刷新页面。

参考资料:http://jquery.malsup.com/form/

很好用,但我还是愿意自己写个自己用的。

核心JS代码

//将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;    });});

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

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

实例下载:http://files.cnblogs.com/zjfree/ajaxForm.rar

ajax提交Form的更多相关文章

  1. ajax提交form表单

    1. ajax提交form表单和不同的form表单的提交主要区别在于,ajax提交表单是异步提交的,而普通的是同步提交的表单. 2. from视图部分 <form id="loginF ...

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

    一.ajax提交form表单和不同的form表单的提交主要区别在于,ajax提交表单是异步提交的,而普通的是同步提交的表单.通过在后台与服务器进行少量数据交换,ajax 可以使网页实现异步更新.这意味 ...

  3. 今天在研究jquery用ajax提交form表单中得数据时,学习到了一种新的提交方式

    今天在研究jquery用ajax提交form表单中得数据时,学习到了一种新的提交方式 jquery中的serialize() 方法 该方法通过序列化表单值,创建 URL 编码文本字符串 序列化的值可在 ...

  4. jquery实现ajax提交form表单的方法总结

    本篇文章主要是对jquery实现ajax提交form表单的方法进行了总结介绍,需要的朋友可以过来参考下,希望对大家有所帮助 方法一:  function AddHandlingFeeToRefund( ...

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

    方法一: function AddHandlingFeeToRefund() { var AjaxURL= "../OrderManagement/AjaxModifyOrderServic ...

  6. Ajax提交Form表单的一种方法

    待提交的表单 <form id="updatePublicKey" enctype="multipart/form-data"> <div c ...

  7. JQuery validate.js 在ajax提交form时如何触发

    在使用jquery validate.js 插件时,发现,如果是用onclick事件捕获提交按钮的动作,并且ajax动态提交form,验证不会被触发,而是直接提交了form. 后来发现,需要手动调用该 ...

  8. 用ajax提交form表单及乱码问题

    要求 1. form里是习题和选择的答案包含内容较多,直接用ajax获取页面元素较多,麻烦. 2. 也不能直接用form提交,form提交后会跳转页面,如果出错想在本页面获取错误信息(ajax提交)且 ...

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

    前言 使用ajax请求数据,很多人都会,比如说: $.post(path,{data:data},function(data){ ... },"json"); 又或者是这样的aja ...

随机推荐

  1. 根据UIColor对象,获取对应的RGBA值

    - (NSArray *)getRGBWithColor:(UIColor *)color { CGFloat red = 0.0; CGFloat green = 0.0; CGFloat blue ...

  2. 最好的vim教程莫过于vimtutor

    最好的vim教程莫过于vimtutor 直接运行vimtutor即可

  3. 使用Template控制Editor显示方式

    @Html.EditorFor可以由Template决定显示 虽然都是EditorFor,页面上显示却不同,ReleaseDate是一个Jquery DatePicker: 怎么实现的呢?就是Temp ...

  4. Python笔记——break的注意事项

    在python中有个控制流的语句:break 它是用来终止循环语句的,不管此时循环体进行到哪,只要碰到break都停止执行循环语句. 1.举例脚本: #!/usr/bin/env python for ...

  5. JAVA基础知识之Collections工具类

    排序操作 Collections提供以下方法对List进行排序操作 void reverse(List list):反转 void shuffle(List list),随机排序 void sort( ...

  6. AsyncTask和Handler对比

    AsyncTask和Handler对比 1 ) AsyncTask实现的原理,和适用的优缺点 AsyncTask,是android提供的轻量级的异步类,可以直接继承AsyncTask,在类中实现异步操 ...

  7. sed替换单引号

    echo "Cfoo'barxml" | sed "s/'/::/g" |  sed 's/::/\\:/g' |  sed "s/:/'/g&quo ...

  8. [HIve - LanguageManual] Union

    Union Syntax select_statement UNION ALL select_statement UNION ALL select_statement ... UNION is use ...

  9. easyui 初体验

    简介 jQuery EasyUI是一组基于jQuery的UI插件集合体,而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面.开发者不需要编写复杂的javas ...

  10. Android稳定性测试之Log分析

    做手机自动化测试已经快两年了,很久没写Blog了.今天抽空总结一下. 用自动化做稳定性测试,主要是为了发现系统或者应用出现FC/ ANR/ Reboot/ Freeze等问题. 先详细说下各种问题对应 ...