form 转json最佳示例

简介:
<!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="1" id="sex">
      <option value="1">男</option>
      <option value="2">女</option>
    </select>
  </p>
  <table width="708" border="1">
    <tr>
      <td width="185">商品名</td>
      <td width="205">商品数量</td>
      <td width="296">商品价格</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>&nbsp;</p>
  <input type="button" name="submit" onclick="onClik();" value="提交"/>
</form>
</body>
</html>
目录
相关文章
|
JSON 数据格式
okhttp3 模拟get、post(json参数传递,form表单提交)
本文是博主学习okhttp3 的记录,希望对大家有所帮助。
1564 0
|
7月前
|
JSON Java PHP
Spring Boot 一个接口同时支持 form 表单、form-data、json 优雅写法
网上很多代码都是千篇一律的 cvs,相信我只要你认真看完我写的这篇,你就可以完全掌握这个知识点,这篇文章不适合直接 cvs,一定要先理解。
|
12月前
|
数据采集 JSON Java
stream流式JSON数据的特点及Java示例
流式JSON数据是指将JSON数据分成小块进行传输或处理的方式。与传统的JSON数据不同,流式JSON不需要将所有数据一次性读取到内存中进行处理,而是可以在数据流中逐个读取并处理。这种方式可以有效地避免内存溢出和性能问题,同时也可以使数据传输更加高效和可靠。流式JSON数据适用于许多场景,包括大数据处理、网络传输、实时数据处理和日志处理。在这些场景中,流式JSON可以显著提高数据处理和传输的效率和可靠性。同时,流式JSON还可以帮助开发人员更好地管理和处理JSON数据,并使得处理大量JSON数据变得更加容易和高效。
313 0
|
JSON 前端开发 数据格式
前端提升生产力系列一(vue3 element-plus 配置json快速生成form表单组件)
在PC端日常的使用中,使用最多的莫过于表单和列表了,故此对table列表和form表单进行了统一的封装,通过json配置就可以快速适配table列表和form表单。
294 0
前端提升生产力系列一(vue3 element-plus 配置json快速生成form表单组件)
|
XML JSON 数据格式
【Gin】gin json渲染,获取querystring参数,获取form参数,获取path参数,参数绑定
访问:http://localhost:9090/user?username=dahe&password=admin 控制台输出:main.UserInfo{Username:“dahe”, Password:“admin”} ShouldBind会按照下面的顺序解析请求中的数据完成绑定: 如果是 GET 请求,只使用 Form 绑定引擎(query)。 如果是 POST 请求,首先检查 content-type 是否为 JSON 或 XML,然后再使用 Form(form-data)。
175 0
【Gin】gin json渲染,获取querystring参数,获取form参数,获取path参数,参数绑定
|
JSON C# 数据格式
C#编程-101:读写Json文件示例
C#编程-101:读写Json文件示例
182 0
|
JSON 前端开发 JavaScript
react + antd 封装通过json数组形式的Form表单
最近在搞react + antd,在弄form表单的时候,觉得没写一次都要重新写一次Form, Form.Item,感觉有些麻烦;就想啊,能不能像vue+element那样通过json配置的方式,实现一个form组件
react + antd 封装通过json数组形式的Form表单
|
JSON 数据格式
JSON的C代码示例
JSON的C代码示例
120 0
|
JSON 前端开发 .NET
如何构建ASP.NET MVC4&JQuery&AJax&JSon示例
背景:   博客中将构建一个小示例,用于演示在ASP.NET MVC4项目中,如何使用JQuery Ajax。 步骤: 1,添加控制器(HomeController)和动作方法(Index),并为Index动作方法添加视图(Index.cshtml),视图中HTML如下: 输入你的姓名: 输入你的年龄: 提交 清空   视图中包含两个文本框,分别用来输入名字和年龄,包含连个按钮,分别用来提交信息和清空文本框的内容,同时包含一个段落,用来显示Ajax返回的数据信息。
1051 0