• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营
  • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    通过构造AJAX参数实现表单元素JSON相互转换

    ajax提交服务器数据, 整理一下转换方法。

    HTML:

    form id="fm" name="fm" action="">
    input name="UserName" type="text" value="UserName1"/>
    /form>
    input name="UserId" id="UserId" type="text" value="UserId1"/> 

    1.表单元素转QueryString

    var q = $('#fm,#UserId').serialize(); //q = UserName=UserName1UserId=UserId1 

    2.字符串, JSON 互相转换

    var obj = jQuery.parseJSON('{"name":"John"}');
    alert( obj.name === "John" ); 

    可以利用jquery-json插件实现转换,直接引用示例

    var thing = {plugin: 'jquery-json', version: 2.3};
    var encoded = $.toJSON( thing );
    // '{"plugin":"jquery-json","version":2.3}'
    var name = $.evalJSON( encoded ).plugin;
    // "jquery-json"
    var version = $.evalJSON(encoded).version;
    // 2.3 

    3.表单,元素转Name,Value数组

    var arr = $("#fm,#UserId").serializeArray();
    /*[ 
    {name: 'UserName', value: '"UserName"1'}, 
    {name: 'UserId', value: 'UserId'}
    ] */ 

    4. 表单元素转JSON

    $.fn.serializeObject = function()
    {
    var o = {};
    var a = this.serializeArray();
    $.each(a, function() {
    if (o[this.name] !== undefined) {
    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;
    };
    var obj = $('form').serializeObject();
    /*obj: Object
    UserId: "UserId1"
    UserName: "UserName1"
    __proto__: Object*/ 

    5. JSON2FORM

    $.getJSON('url_to_file', function(data) {
    for (var i in data) {
    $('input[name="'+i+'"]').val(data[i]);
    }
    }

    Google过程中发现一个更强大的插件 http://code.google.com/p/jquery-load-json/

    data = {
    "Name":"Emkay Entertainments",
    "Address":"Nobel House, Regent Centre",
    "Contact":"Phone"
    } 
    $('div#data').loadJSON(data);
    div id="data">
    h1 id="Name">Emkay Entertainments/h1>
    label for="Address">Address:/label>
    span id="Address">Nobel House, Regent Centre/span> 
    label for="Contact">Contact by:/label>
    span id="Contact">Phone/span>
    /div> 

    您可能感兴趣的文章:
    • JS简单循环遍历json数组的方法
    • js实现将json数组显示前台table中
    • JS实现给json数组动态赋值的方法示例
    • js 获取json数组里面数组的长度实例
    • 用javascript对一个json数组深度赋值示例
    • js对象转json数组的简单实现案例
    • JS实现的JSON数组去重算法示例
    • JS实现键值对遍历json数组功能示例
    • JavaScript实现构造json数组的方法分析
    上一篇:SpringMVC环境下实现的Ajax异步请求JSON格式数据
    下一篇:Ajax实现异步用户名验证功能
  • 相关文章
  • 

    © 2016-2020 巨人网络通讯 版权所有

    《增值电信业务经营许可证》 苏ICP备15040257号-8

    通过构造AJAX参数实现表单元素JSON相互转换 通过,构造,AJAX,参数,实现,