form通过ajax提交表单,Jquery通过Ajax方式来提交Form表单

今天刚好看到Jquery的ajax提交数据到服务器的方法,原文是:

保存数据到服务器，成功时显示信息。

jQuery 代码:

$.ajax({

type: "POST",

url: "some.php",

data: "name=John&location=Boston",

success: function(msg){

alert( "Data Saved: " + msg );

}

});

后来我就想了一下,我要提交form表单有没有办法呢?但是我不可能每个fom的input都写一次var demo=$("#divname").val();的.

后来,今天我看到一个方法,就是.map,就做出一下想法了,可以借鉴哟;

html代码如下,下面我要提交Form 的id为dlg_form的所有input数据,

房间:

建筑:

部门:

空调控制器

端口:

地址:

工作方式:

是否启用:

灯光控制器

端口:

地址:

工作方式:

是否启用:

安装了总表:

总表电能节点:

是不是很多,如果要你每个input都写的话,是不是要吐血?

看看我的方法,首先我们把所有的input的name和value都取下来,

js代码如下:

var str_data=$("#dlg_form input").map(function(){

return ($(this).attr("name")+'='+$(this).val());

}).get().join("&") ;

alert(data);

ps:你alert一下,你会发现,这里面的架构就是divname=xxx&divname2=xxxx等等,

然后在回头看看ajax提交的:

$.ajax({

type: "POST",

url: "some.php",

data: "name=John&location=Boston",

success: function(msg){

alert( "Data Saved: " + msg );

}

});

有没有发现,只要我们把我们上面获取到的,放到data里面就可以了?

完整的代码,修改后应该是

$.ajax({

var str_data=$("#dlg_form input").map(function(){

return ($(this).attr("name")+'='+$(this).val());

}).get().join("&") ;

type: "POST",

url: "some.php",

data: str_data,

success: function(msg){

alert( "Data Saved: " + msg );

}

});

ok,就这么简单,如果适用的话,可以拿去用哟...

呵呵.

如果有问题,也欢迎提出来.

通过jQuery的Ajax方式来提交Form表单

通过jQuery的Ajax方式来提交Form表单 $.ajax({ url:ajaxCallUrl, type:"POST", cache:true, async:false, d ...

导出excel用ajax不行，提交form表单可以

导出excel用ajax不行,提交form表单可以. 一直用ajax找原因,网页不出现下载提示框 写了 response.setContentType("application/binary ...

DEDE使用AJAX无刷新提交Form表单，PHP返回结果

$query = "INSERT INTO `{$diy->table}` (`id`, `ifcheck` $addvar)  VALUES (NULL, 0 $addvalue); ...

jquery ajax方式直接提交整个表单

$.ajax({ type: "POST", url: url, data: $('#form1').serialize(), success: function(msg){ al ...

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

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

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

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

Ajax提交form表单内容和文件(jQuery.form.js)

jQuery官网是这样介绍form.js A simple way to AJAX-ify any form on your page; with file upload and progress s ...

jquery实现ajax提交form表单的方法总结(转)

方法一: 复制代码 代码如下: function AddHandlingFeeToRefund() {            var AjaxURL= "../OrderManagement ...

随机推荐

使用SFTP工具下载文件

1. 打开SFTP会话 File->Connect SFTP Session  2. cd 到文件目录下 3. get 文件名称 sftp> get catalina.out 4. lpw ...

as3 Point

首先我们看看Point类的属性:x:Number——该点的水平坐标y:Number——该点的垂直坐标length:Number——从(0,0)到此点的线段长度(只读属性)从length属性我们可以看到 ...

zw版【转发·台湾nvp系列Delphi例程】HALCON FillUpShape1

zw版[转发·台湾nvp系列Delphi例程]HALCON FillUpShape1 procedure TForm1.Button1Click(Sender: TObject);var img : ...

Codeforces Round #326 (Div. 2) D. Duff in Beach dp

D. Duff in Beach Time Limit: 1 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/588/probl ...

Hibeernate中的两种分页方式

1. return getHibernateTemplate().executeFind(new HibernateCallback() { public Object doInHibernate(S ...

matlab练习程序(曲面拟合)

这里用到的还是最小二乘方法,和上一次这篇文章原理差不多. 就是首先构造最小二乘函数,然后对每一个系数计算偏导,构造矩阵乘法形式,最后解方程组. 比如有一个二次曲面:z=ax^2+by^2+cxy+dx ...

struts2之配置文件struts.xml详解

struts配置文件 struts.xml配置参数详解 struts.xml中很大一部分配置默认配置就好了 但是有些还是需要做了解  以便于理解 和修改 <?xml version=" ...

LeetCode&colon; Pow&lpar;x&comma; n&rpar; 解题报告

Pow(x, n) Implement pow(x, n). SOLUTION 1: 使用二分法. 1. 负数的情况,使用以下的公式转化为求正数power,另外,考虑到MIN_VALUE可能会造成越界 ...

TreeCollection2

Tree Collection 2 Table of Contents Introduction Structure Interfaces Data Node structure Tree struc ...