jQuery使用serializeArray()方法取得表单数据并附加json数据

转载自:http://blog.csdn.net/zheng963/article/details/49156395

一、serialize()方法
1、格式
var data = $("form").serialize();
2、功能
将表单内容序列化成一个字符串。
3、返回结果
username=forrest&passwd=1234&gender=0&interest=swimming&interest=running&interest=readBook
二、serializeArray()方法
1、格式
var jsonData = $("form").serializeArray();

2、功能
将页面表单序列化成一个JSON结构的对象。注意不是JSON字符串。
 
3、返回结果:
[{"name":"lihui", "age":"20"},{...}] 获取数据为 jsonData[0].name。



jquery扩展函数:



$.fn.serializeObject = function(para)    
{    
var serializeObj={}; // 目标对象 
var tempObj={};//临时对象
    var array=this.serializeArray(); // 转换数组格式
    if(para!=null&&para!=undefined){
    $.each(para,function(name,value) {
    array.push({"name":name,"value":value});
    });
    }
    console.log(para);
    console.log(array);
    $(array).each(function(){ // 遍历数组的每个元素 {name : xx , value : xxx} 
        if(serializeObj[this.name]){ // 判断对象中是否已经存在 name,如果存在name 
              if($.isArray(serializeObj[this.name])){ 
                 serializeObj[this.name].push(this.value); // 追加一个值 hobby : [‘音乐‘,‘体育‘] 
              }else{ 
                      // 将元素变为 数组 ,hobby : [‘音乐‘,‘体育‘] 
                 serializeObj[this.name]=[serializeObj[this.name],this.value]; 
              } 
        }else{ 
            serializeObj[this.name]=this.value; // 如果元素name不存在,添加一个属性 name:value 
        } 
    });     
   return serializeObj;    
};



附:

字符串转对象(strJSON代表json字符串)

  var
obj = eval(strJSON);

  var
obj = strJSON.parseJSON();

  var
obj = JSON.parse(strJSON);

json对象转字符串(obj代表json对象)

  var
str = obj.toJSONString();

  var
str = JSON.stringify(obj)

运用时候需要除了eval()以外需要json.js包(切记哦)

原文地址:https://www.cnblogs.com/Thinkingcao/p/8183444.html

时间: 2024-11-09 02:46:07

jQuery使用serializeArray()方法取得表单数据并附加json数据的相关文章

jQuery使用serialize(),serializeArray()方法取得表单数据+字符串和对象类型两种表单提交的方法

原始form表单值获取方式(手动): $.ajax({ type: "POST", url: "ajax.php", data: "Name=摘取天上星&position=IT技术", success: function(msg){alert(msg);}, error: function(error){alert(error);} }); JQ serialize()方法取值: $.ajax({ type: "POST&quo

jQuery ajax - serializeArray() 方法

定义和用法 serializeArray() 方法通过序列化表单值来创建对象数组(名称和值). 您可以选择一个或多个表单元素(比如 input 及/或 textarea),或者 form 元素本身. 语法 $(selector).serializeArray() 详细说明 serializeArray() 方法序列化表单元素,返回 JSON 数据结构数据. 注意:此方法返回的是 JSON 对象而非 JSON 字符串.需要使用插件或者第三方库进行字符串化操作,如: var formInfo = $

jquery的attr方法禁用表单元素

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <ti

jQuery中serializeArray方法的使用及对象与字符串的转换

使用jQuery中的serializeArray()方法可以方便的将表单中的各个信息,转化为多个{name:xx,value:xx}对象的数组, 再使用遍历的方式可以方便的将数组转化为json对象, 代码如下 <p id="results"><b>Results: </b> </p> <form> <select name="single"> <option>Single</o

jquery中$.ajax方法提交表单

function postdata(){                        //提交数据函数 $.ajax({                                //调用jquery的ajax方法 type: "POST",                       //设置ajax方法提交数据的形式 url: "ok.php",                      //把数据提交到ok.php data: "writer=

Java中上传文件和表单数据提交如何保持数据的一致性?

学生申请学科竞赛活动,表单中有学科竞赛的申报信息和部分附件,需要做到将上传文件和表单数据提交保持一致性. 将上传文件和插入表单数据放到事务汇总去处理,由于表单的数据我们可以控制,但是上传的文档不好控制.一方面我就把表单数据提交放置在文件上传前面,这样当表单数据提交发生异常我们可以回滚,文件并未上传,当文件上传发生异常时,我们可以回滚数据库的数据,只有当文件正常上传时我们才提交数据库数据... ----------------------------------------------------

Flask 框架 重定向,捕获异常,钩子方法及使用jsonify在网页返回json数据

Flask 框架中常用到重定向方法来实现路由的跳转 ,路由跳转又分为站内跳转和站外跳转 常用的站内跳转方法为url_for  而常用的站外跳转为redirect 在这里提示一下: 在使用两种方法是须调用相对应的包: redirect对应的为redirect包  而url_for对应url_for 例: 具体代码为: 捕获异常:即在服务器没有相应的时候用来进行友好提示,提高用户体验 具体代码为: 钩子方法:分为第一次请求之前,每一次请求之前和请求之后在后台返回的数据 jsonify:在页面返回js

jQuery的serializeArray()方法详解

<script type="text/javascript"> //验证不为空提交 function editSubmitcheck() { var cityID = $("#editCityID").val().trim(); var cityName = $("#editCityName").val().trim(); var comment = $("#editComment").val().trim();

PHP实例————表单数据插入数据库及数据提取

网站在进行新用户注册时,都会将用户的注册信息存入数据库中,需要的时候再进行提取.今天写了一个简单的实例. 主要完成以下几点功能: (1)用户进行注册,实现密码重复确认,验证码校对功能. (2)注册成功后,将用户进行插入数据库中进行保存. (3)将数据库表中数据进行提取,并打印. 1.注册表单 在以前的几篇博客中,分享过注册及登录表单的代码.这次的代码,大致相同,只是略有变化.仅作为实例探讨 <html> <head> <title>注册页面</title>