zoukankan      html  css  js  c++  java
  • 利用jQuery中的serialize方法大量获取页面中表单的数据,发送的服务器

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Document</title>
    </head>
    <body>
    <form id="ifm" name="ifm">
    <table>
    <tr>
    <td>姓名:</td>
    <td><input type="text" name="name" value="李四"/></td>
    </tr>
    <tr>
    <td>年龄:</td>
    <td><input type="text" name="age" value="22"/></td>
    </tr>
    <tr>
    <td>密码:</td>
    <td><input type="password" name="pwd" value="123456"/></td>
    </tr>
    <tr>
    <td>性别:</td>
    <td>
    <input type="radio" name="sex" value="male" id="male" checked="" />
    <label for="male">男</label>
    <input type="radio" name="sex" value="female" id="female"/>
    <label for="female">女</label>
    </td>
    </tr>
    <tr>
    <td>地区:</td>
    <td>
    <select name="area" id="area">
    <option value="锦江区" selected>锦江区</option>
    <option value="金牛区">金牛区</option>
    <option value="青羊区">青羊区</option>
    </select>
    </td>
    </tr>
    <tr>
    <td>爱好</td>
    <td>
    <input type="checkbox" id="move" value="move" name="habb" checked/>
    <label for="move">电影</label>
    <input type="checkbox" id="music" value="music" name="habb" checked/>
    <label for="music">音乐</label>
    <input type="checkbox" id="basketball" value="basketball" name="habb[]"/>
    <label for="basketball">篮球</label>
    </td>
    </tr>
    <tr>
    <td>个人介绍:</td>
    <td><textarea name="txt" id="txt" cols="30" rows="2">WEB前段攻城师</textarea></td>
    </tr>
    <tr>
    <td></td>
    <td><input type="button" value="提交" id="btn"/></td>
    </tr>
    <tr>
    <td><button>123</button></td>
    <td></td>
    </tr>
    </table>
    </form>
    <script src="jquery-1.11.1.js"></script>
    <script>
    function getData(){
    var frm = $('#ifm');
    var data = frm.serialize();
    var arr = data.split('&');
    var item,key,value,newData = {};
    for(var i = 0; i < arr.length; i++){
    item = arr[i].split('=');
    key = decodeURI(item[0]);
    value = decodeURI(item[1]);
    if(key.indexOf('[]')!= -1){
    key.replace('[]','');
    if (!newData[key]){
    newData[key]=[];
    }
    newData[key].push(value);
    }else{
    newData[key]=value;
    }
    }
    return newData;
    }
    $('#btn').bind('click',function(){
    var newdata=getData();
    $.post('test.php',newdata,function(){
    console.log('success');
    });
    });
    </script>
    </body>
    </html>

    test.php响应的数据是这样的

  • 相关阅读:
    C# 5.0 CallerMemberName CallerFilePath CallerLineNumber 在.NET4中的使用
    Protocol Buffers 语法指南
    ERP、SCM及电子商务关系分析
    ]进程注入是王道之为NhibernateProfiler增加“附加到进程”功能原理(源码)
    架构师职位与软件文档的思考
    OSGI:从面向接口编程来理解OSGI
    开源的.NET桌面程序自动更新组件 ——Sharp Updater 2.1发布
    C#开源文件实时监控工具Tail&TailUI
    SQL 存储过程入门(变量)
    Python入门笔记(2):基础(上)
  • 原文地址:https://www.cnblogs.com/ww-ervin-72/p/5089277.html
Copyright © 2011-2022 走看看