jQuery对json快速赋值，重点在于将input的id取跟JSON同样的名称。

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>jQuery对json快速赋值</title>

    <!--引用jQuery库-->

    <script src="js/jquery-1.11.3.min.js"></script>

</head>

<body>

<div>

    姓名:<input type="text" id="name">

    出生日期:<input type="date" id="birthday">

    其他:<input type="text" id="other">

</div>

<div>

    性别:<input type="hidden" id="sex">

    <input type="radio" name="user_sex" value="男">男

    <input type="radio" name="user_sex" value="女">女

</div>

<button id="btn">按钮</button>

<script>

    $(function () {

        $('#btn').on('click',function(){

            json_assignment();

        });

        radio_event();

        //性别单选值赋给input

        function radio_event(){

            //checkbox或select都可以用同样的方法

            $('input[name="user_sex"]').on('change', function () {

                var tt=$('#sex');

                tt.val($("input[name='user_sex']:checked").val())

            })

        }

        function json_assignment(){

            var con={name:'',birthday:'',other:'',sex:''};

            var parse={name:'姓名',birthday:'出生日期',sex:'性别'};

            for(var ii in con){

                con[ii]=$('#'+ii).val();

                if(con[ii]==''){

                    if(ii in parse){

                        alert(parse[ii]+'不能为空');

                        return;

                    }

                }

            }

            //控制台输出

            console.log(con);

        }

    });

</script>

</body>

</html>

第一篇博客，希望跟大家好好交流。

jQuery对json快速赋值的更多相关文章

  1. ObjC 巧用反射和KVC实现JSON快速反序列化成对象

    1.简单的KVC介绍 KVC是一种间接访问对象属性的机制,不直接调用getter 和 setter方法,而使用valueForKey 来替代getter 方法,setValue:forKey来代替se ...

  2. [转] jQuery 操作 JSON 数据

    jquery下json数组的操作用法实例: jquery中操作JSON数组的情况中遍历方法用的比较多,但用添加移除这些好像就不是太多了. 试过json[i].remove(),json.remove( ...

  3. jquery下json数组的操作用法实例

    jquery下json数组的操作用法实例: jquery中操作JSON数组的情况中遍历方法用的比较多,但用添加移除这些好像就不是太多了. 试过json[i].remove(),json.remove( ...

  4. 用jquery解析JSON数据的方法以及字符串转换成json的3种方法

    用jquery解析JSON数据的方法,作为jquery异步请求的传输对象,jquery请求后返回的结果是 json对象,这里考虑的都是服务器返回JSON形式的字符串的形式,对于利用JSONObject ...

  5. [转]jquery 对 Json 的各种遍历

    原文地址:http://caibaojian.com/jquery-each-json.html 概述 JSON(javascript Object Notation) 是一种轻量级的数据交换格式,采 ...

  6. 字典的快速赋值 setValuesForKeysWithDictionary

    字典的快速赋值 setValuesForKeysWithDictionary ​ 前言 在学习解析数据的时候,我们经常是这么写的:PersonModel.h文件中    @property (nona ...

  7. jQuery.parseJSON(json) 使用方法

    jQuery.parseJSON(json) 接受一个JSON字符串,返回解析后的对象. 返回值:String传入一个畸形的JSON字符串会抛出一个异常.比如下面的都是畸形的JSON字符串:{test ...

  8. JQuery 获取json数据$.getJSON方法的实例代码

    这篇文章介绍了JQuery 获取json数据$.getJSON方法的实例代码,有需要的朋友可以参考一下 前台: function SelectProject() { var a = new Array ...

  9. [Javascript,JSON] JQuery处理json与ajax返回JSON实例

    转自:http://www.php100.com/html/program/jquery/2013/0905/5912.html [导读] json数据是一种经型的实时数据交互的数据存储方法,使用到最 ...

随机推荐

  1. bzoj1468 Tree

    最经典的点分治题目,在递归子树的时候减去在算父亲时的不合法方案. #include<iostream> #include<cstdio> #include<cstring ...

  2. 搭建centos测试环境：window安装xshell,WinSCP 。 centos安装jdk tomcat

    通过ssh实现远程访问linux系统: 由于xshell 连接centos,需要centos开启ssh服务.所以先启动SSH服务,没有ssh需要先安装. 1 . 查看SSH是否安装命令:rpm -qa ...

  3. About_PHP_文件的上传

    在form表单中,我们上传文件用的是:<input type="file" name="fileUpload" />,当然,光是这样是不行的. 我们 ...

  4. chrome浏览器 模拟访问移动端

    谷歌Chrome浏览器,可以很方便地用来当3G手机模拟器.在Windows的[开始]-->[运行]中输入以下命令,启动谷歌浏览器,即可模拟相应手机的浏览器去访问3G手机网页: 谷歌Android ...

  5. Remoting and web services using Spring[摘自官网]

    spring document url: http://docs.spring.io/spring/docs/ Using Hessian First we’ll have to create a n ...

  6. ajax请求的封装

    前端的工作,免不了要用到交互,请求后端的数据,可能大多人一直选择用jq封装好的方法直接使用,要知道封装这个事我们自己也可以的,今天给大家介绍一种封装方法,而且连跨域问题都不在话下,有了这个函数,是不是 ...

  7. supervisorctl error: <class 'socket.error'>

    http://stackoverflow.com/questions/18859063/supervisor-socket-error-issue supervisorctl reread error ...

  8. IO复用三种方式

    简介 IO复用技术,简单来说就是同时监听多个描述符.在没有用到IO复用以前,只能是一个线程或一个 线程去监听,服务端同时有多个连接的时候,需要创建多个线程或者进程.而且,并不是所有的连 接是一直在传输 ...

  9. C# 日期格式转【转】

    使用:DateTime.ToString的方法(String, IFormatProvider)转换格式 using System; using System.Globalization; Strin ...

  10. 在Mac OS X 下快速安装Nginx

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 15.0px Helvetica; color: #8e68ff } p.p2 { margin: 0.0p ...