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响应的数据是这样的

  • 相关阅读:
    Python代码项目目录规范v1.0
    博客自定义
    Linux之查看CPU信息
    Python字符界面函数库
    数组的遍历你都会用了,那Promise版本的呢
    NPM实用指北
    如何从0开发一个Atom组件
    使用JavaScript实现一个俄罗斯方块
    使用PostMan进行API自动化测试
    一个有味道的函数
  • 原文地址:https://www.cnblogs.com/ww-ervin-72/p/5089277.html
Copyright © 2011-2022 走看看