form 转json最佳示例

时间：2023-02-27 12:54:08
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script type="application/javascript" src="js/jquery-2.0.3.js"></script>

<title>无标题文档</title>

<script type="application/javascript">

$.fn.serializeObject = function()

{

   var o = {};

   var a = this.serializeArray();

   $.each(a, function() {

       if (o[this.name]) {

           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;

};

function onClik(){

        //var data = $("#form1").serializeArray(); //自动将form表单封装成json

        //alert(JSON.stringify(data));

        var jsonuserinfo = $('#form1').serializeObject();

        alert(JSON.stringify(jsonuserinfo));

}

</script>

</head>

<body>

<form id="form1" name="form1" method="post" action="">

  <p>进货人 :

    <label for="name"></label>

    <input type="text" name="name" id="name" />

  </p>

  <p>性别:

    <label for="sex"></label>

    <select name="sex" size="" id="sex">

      <option value="">男</option>

      <option value="">女</option>

    </select>

  </p>

  <table width="" border="">

    <tr>

      <td width="">商品名</td>

      <td width="">商品数量</td>

      <td width="">商品价格</td>

    </tr>

    <tr>

      <td><label for="pro_name"></label>

        <input type="text" name="pro_name" id="pro_name" /></td>

      <td><label for="pro_num"></label>

        <input type="text" name="pro_num" id="pro_num" /></td>

      <td><label for="pro_price"></label>

        <input type="text" name="pro_price" id="pro_price" /></td>

    </tr>

    <tr>

      <td><input type="text" name="pro_name2" id="pro_name2" /></td>

      <td><input type="text" name="pro_num2" id="pro_num2" /></td>

      <td><input type="text" name="pro_price2" id="pro_price2" /></td>

    </tr>

  </table>

  <p> </p>

  <input type="button" name="submit" onclick="onClik();" value="提交"/>

</form>

</body>

</html>
<span style="font-size:32px;"><strong>代码效果演示：</strong></span>

form 转json最佳示例

===============================================================================================================================

jQuery是在web应用中使用的脚本语言之一，因其具有轻量级,易学易用等特点，已广泛应用，其中的ajax封装简化了我们的应用，对其表单数据序列化用如下方法：

1.serialize()方法

　　格式：var data = $("#formID").serialize();

　　功能：将表单内容序列化成一个字符串。

　　这样在ajax提交表单数据时，就不用一一列举出每一个参数。只需将data参数设置为 $("form").serialize()即可。

2.serializeArray()方法

　　格式：var jsonData = $("#formID").serializeArray();

　　功能：将页面表单序列化成一个JSON结构的对象。注意不是JSON字符串。

　　比如，[{"name":"lihui"},{...}] 获取数据为 jsonData[0].name

3.$.param()方法，可以把json格式数据序列化成字符串形式

varobj={a:1,b:2}

vars=$.param(obj);

会形成a=1&b=2的形式

    $.fn.serializeObject = function()

    {

       var o = {};

       var a = this.serializeArray();

       $.each(a, function() {

           if (o[this.name]) {

               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;

    };

form 转json最佳示例的更多相关文章

  1. 002-06-RestTemplate-请求示例-form、json、multipart、okhttp3

    一.概述 请求示例集合 服务端:https://github.com/bjlhx15/common-study.git 中的 http-client-webserver 服务端:RequestBody ...

  2. （转）基于jQuery的form转json示例

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. 实用ExtJS教程100例-011：ExtJS Form 使用JSON数据赋值和取值

    上一节中我们演示了ExtJS Form的异步加载和提交数据,本节中我们将演示如何使用JSON数据为ExtJS Form中的字段赋值和取值. 系列ExtJS教程持续更新中,点击查看>>最新E ...

  4. JavaWeb 发送post请求的2种方式（form、json）

      JavaWeb 发送post请求的2种方式(form.json) CreationTime--2018年6月20日10点15分 Author:Marydon 前提:通过HttpClient来实现 ...

  5. jQuery中读取json文件示例代码

    json文件是一种轻量级的数据交互格式.一般在jquery中使用getJSON()方法读取,具体示例代码如下,感兴趣的朋友可以参考下哈,希望可以帮助到你   json文件是一种轻量级的数据交互格式.一 ...

  6. form 转json，将form表单中的数据序列化数组后转换为Json

    页面中引用了jquery,第一想到的就是序列化,但是序列化后的表单字段为a=1&b=2这种. 这里写一个jquery的扩展方法 $.fn.serializeObject = function( ...

  7. form转化json

    ;(function($){ /** * 依赖jquery-1.4.2 * 依赖jquery.json-2.2,参考http://code.google.com/p/jquery-json/ * 用于 ...

  8. jsp&plus;ajax&plus;servlet&plus;jquery从后台取json数据示例

    <span style="font-size:18px;"><%@ page language="java" import="jav ...

  9. Request&period;Form to JSON

    原文发布时间为:2012-03-21 -- 来源于本人的百度文章 [由搬家工具导入] NameValueCollection nvc =newNameValueCollection(Request.F ...

随机推荐

  1. C&num; Thread 线程状态知识

    .NET 基础类库的System.Threading命名空间提供了大量的类和接口支持多线程.这个命名空间有很多的类.System.Threading.Thread类是创建并控制线程,设置其优先级并获取 ...

  2. Android Handler值传递（文）

    发送消息: public static class TimeReceiver extends BroadcastReceiver { @Override public void onReceive(C ...

  3. 第四章&colon;JQuery选择器

    一.使用选择器的目的 从页面上的万万千千个元素中选择自己需要的. 二.选择器的分类 1.基本选择器 *:标签 *:类 *:ID 交集  AB   AB共同的部分    并集  A,B  AB使用相同的 ...

  4. Servlet过滤器简单探索

    过滤器的工作时机介于浏览器和Servlet请求处理之间,可以拦截浏览器对Servlet的请求,也可以改变Servlet对浏览器的响应. 其工作模式大概是这样的: 一.Filter的原理 在Servle ...

  5. javascript&sol;TypeScript 生成GUID

    export const guid = () => { return `xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx`.replace(/[xy]/g, functi ...

  6. 大牛推荐的30本经典编程书籍，从Python到前端全系列。

    注:为了方便阅读与收藏,我们也制作了30本书籍完整清单的Markdown.PDF版以及思维导图版,大家可以在实验楼公众号后台回复关键字"书籍推荐"获取. Python 系列(10本 ...

  7. cenos6&period;5安装vsftp

    1.安装 yum install vsftpd 2.配置 vi /etc/vsftpd/vsftpd.conf 检查是否如下配置 anonymous_enable=NO #禁止匿名访问 chroot_ ...

  8. jQuery：validate表单验证基本使用

    jquery.validate是jquery的一个验证框架,可以迅速验证一些常见的输入,并且可以自己扩充自己的验证方法! 这里先从介绍简单的使用方法:jquery.validate.js下载地址 1. ...

  9. Power Desginer系列02【转载】

    在概念模型中主要有以下几个操作和设置的对象:实体(Entity).实体属性 (Attribute).实体标识(Identifiers).关系(Relationship).继承(Inheritance) ...

  10. vue的路由初识01

    今天就做了一个vue-router的实例,(路由跳转,参数的传递[一个参数,多个参数])<!DOCTYPE html> <html> <head> <meta ...

相关文章