今天刚好看到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数据,
<form id="dlg_form" method="post">
    <div class="fitem">
      <label> 房间:</label>
      <input name="RoomName" style="padding: 2px; width: 135px; border: 1px solid #A4BED4;" required />
    </div>
    <div class="fitem">
      <label> 建筑:</label>
      <input name="RoomName" class="easyui-combobox" style="padding: 2px; width: 141px; " required />
    </div>
    <div class="fitem">
      <label> 部门:</label>
      <input name="RoomName" class="easyui-combobox" style="padding: 2px; width: 141px; " required />
    </div>
    <fieldset>
      <legend>
      <label>
        <input type="checkbox" id="ktkzq" name="ktkzq" value="ktkzq"/>
        空调控制器</label>
      </legend>
      <div class="fitem">
        <label> 端口:</label>
        <input name="kt_dk" id="kt_dk" disabled="disabled" class="easyui-combobox" style="padding: 2px; width: 141px; " required />
      </div>
      <div class="fitem">
        <label> 地址:</label>
        <input name="kt_dz" id="kt_dz" disabled="disabled" class="easyui-combobox" style="padding: 2px; width: 141px; " required />
      </div>
      <div class="fitem">
        <label> 工作方式:</label>
        <input name="kt_gzfs" id="kt_gzfs" disabled="disabled" class="easyui-combobox" style="padding: 2px; width: 141px; " required />
      </div>
      <div class="fitem">
        <label> 是否启用:</label>
        <input name="kt_sfqy" id="kt_sfqy" disabled="disabled" class="easyui-combobox" style="padding: 2px; width: 141px; " required />
      </div>
    </fieldset>
    <fieldset>
      <legend>
      <label>
        <input type="checkbox" id="dgkzq" name="dgkzq" value="dgkzq"/>
        灯光控制器</label>
      </legend>
      <div class="fitem">
        <label> 端口:</label>
        <input name="dg_dk" id="dg_dk" disabled="disabled" class="easyui-combobox" style="padding: 2px; width: 141px; " required />
      </div>
      <div class="fitem">
        <label> 地址:</label>
        <input name="dg_dz" id="dg_dz" disabled="disabled" class="easyui-combobox" style="padding: 2px; width: 141px; " required />
      </div>
      <div class="fitem">
        <label> 工作方式:</label>
        <input name="dg_gzfs" id="dg_gzfs" disabled="disabled" class="easyui-combobox" style="padding: 2px; width: 141px; " required />
      </div>
      <div class="fitem">
        <label> 是否启用:</label>
        <input name="dg_sfqy" id="dg_sfqy" disabled="disabled" class="easyui-combobox" style="padding: 2px; width: 141px; " required />
      </div>
    </fieldset>
    <div class="fitem">
      <label style=" width:100px;">
        <input type="checkbox" id="zongbiao" name="zongbiao" value="zongbiao"/>
        安装了总表:</label>
    </div>
    <div class="fitem">
      <label> 总表电能节点:</label>
      <input name="zbdnjd" id="zbdnjd" disabled="disabled" class="easyui-combobox" style="padding: 2px; width: 141px; " required />
    </div>
  </form>
是不是很多,如果要你每个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表单的更多相关文章

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

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

  2. 导出excel用ajax不行,提交form表单可以

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

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

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

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

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

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

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

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

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

  7. 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 ...

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

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

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

    使用ajax提交form表单,包括ajax文件上传 前言 使用ajax请求数据,很多人都会,比如说: $.post(path,{data:data},function(data){ ... },&qu ...

随机推荐

  1. IDEA+Tomcat+JRebel热部署

    在完成idea工程简单应用后,接下来实现热部署. 简单应用地址:http://wibiline.iteye.com/admin/blogs/2072454 一.安装JRebel插件 1. 在线安装 F ...

  2. MSSQL数据库表加锁

    所指定的表级锁定提示有如下几种: 1. HOLDLOCK: 在该表上保持共享锁,直到整个事务结束,而不是在语句执行完立即释放所添加的锁. 2. NOLOCK:不添加共享锁和排它锁,当这个选项生效后,可 ...

  3. asp.net mvc3登录验证

    1,在web.config中  <system.web>节点下面增加: <authentication mode="Forms"> <forms na ...

  4. ZOJ1913 Euclid's Game (第一道简单的博弈题)

    题目描述: Euclid's Game Time Limit: 2 Seconds      Memory Limit: 65536 KB Two players, Stan and Ollie, p ...

  5. Python之路Day13--堡垒机

    一.前景介绍 到目前为止,很多公司对堡垒机依然不太感冒,其实是没有充分认识到堡垒机在IT管理中的重要作用的,很多人觉得,堡垒机就是跳板机,其实这个认识是不全面的,跳板功能只是堡垒机所具备的功能属性中的 ...

  6. Python之路第一课Day4--随堂笔记(迭代生成装饰器)

    上节回顾: 1.集合 a.关系测试 b.去重 2.文件操作及编码 3.函数 4.局部变量和全局变量 上节回顾 本节课内容: 1.迭代器生成器 2.装饰器 3.json pickle数据序列化 4.软件 ...

  7. CentOS 安装 gcc-c++

    由于网络环境的问题,很难在线安装,可以 直接挂载安装盘文件,然后在Pacakage 中进行本地安装

  8. oracle 全文检索创建脚本示例

    --创建全文索引 grant execute on ctx_ddl to username;--使用其他帐号对username授权exec ctx_ddl.create_preference('my_ ...

  9. 串口实现FIFO接受数据

    基本原理:静态队列 /* * 串口的FIFO简单读取实现 * 功能,实现串口的FIFO实现 * 使用方法: * 版本:v1.0.0 * */ #include "sys.h" #i ...

  10. js将数字转成大写中文

    <script type="text/javascript"> //主函数 function DX(n) { if (!/^(0|[1-9]\d*)(\.\d+)?$/ ...