jquery拼接ajax 的json和字符串拼接

jquery拼接字符串ajax

<form id="myForm" action="#"><input name="name"/><input name="age"/><input type="submit"/>
</form>
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script>(function($){$.fn.serializeJson=function(){var serializeObj={};$(this.serializeArray()).each(function(){serializeObj[this.name]=this.value;});return serializeObj;};$('#myForm').bind('submit',function(e){console.log($(this).serializeJson())})})(jQuery)</script>

或者直接用$("#表单id").serialize()直接序列化。。。

上面的插件，不能适用于有多个值的输入控件，例如复选框、多选的select。下面，我将插件做进一步的修改，让其支持多选。代码如下：

Js代码

(function($){$.fn.serializeJson=function(){var serializeObj={};var array=this.serializeArray();var str=this.serialize();$(array).each(function(){if(serializeObj[this.name]){if($.isArray(serializeObj[this.name])){serializeObj[this.name].push(this.value);}else{serializeObj[this.name]=[serializeObj[this.name],this.value];}}else{serializeObj[this.name]=this.value;}});return serializeObj;};
})(jQuery);

这里，我将多选的值封装为一个数值来进行处理。如果大家使用的时候需要将多选的值封装为“,”连接的字符串或者其他形式，请自行修改相应代码。

表单：

 Html代码<form id=”myForm” action=”#”><input name=”name”/><input name=”age”/><select multiple=”multiple” name=”interest” size=”2″><option value =”interest1″>interest1</option><option value =”interest2″>interest2</option><option value=”interest3″>interest3</option><option value=”interest4″>interest4</option></select><input type=”checkbox” name=”vehicle” value=”Bike” /> I have a bike<input type=”checkbox” name=”vehicle” value=”Car” /> I have a car<input type=”submit”/></form>测试结果：{age: “aa”,interest: ["interest2", "interest4"],name: “dd”,vehicle:["Bike","Car"]}

<form id="myForm" action="#"><input name="name" value="name"/><input name="age" value="age"/><button type="submit">提交</button>
</form>
</body><script src="../js/jquery-1.11.0.min.js"></script>
<script>var dataId = $("#myForm input").map(function (){return($(this).attr("name")+'='+$(this).val());}).get().join("&");</script>

jquery拼接ajax 的json和字符串拼接相关推荐

id jquery 拼接_jquery拼接ajax的json和字符串的方法
整理文档,搜刮出一个jquery拼接ajax 的json和字符串拼接的代码,本文主要介绍了jquery拼接ajax 的json和字符串拼接的方法,这里整理了详细的代码,有需要的小伙伴可以参考下. jQ ...
基于jQuery的AJAX和JSON实现纯html数据模板
通过jQuery内置的AJAX功能,直接访问后台获得JSON格式的数据,然后通过jQuer把数据绑定到事先设计好的html模板上,直接在页面上显示. 我们先来看一下html模板: <table ...
java json html模板,基于jQuery的AJAX和JSON实现纯html数据模板（转载）
来自:http://www.cnblogs.com/linzheng/archive/2010/10/14/1851799.html 通过jQuery内置的AJAX功能,直接访问后台获得JSON格式的 ...
jQuery、ajax添加Json数据
需求说明: 简单的演示ajax提交json数据. 代码说明: ajax在传输数据的时候基本格式大都是固定的,只需要修改传输类型即可.下面介绍基本的参数提交. 步骤一:建立一个html或者jsp页面,引 ...
mysql 拼接符是什么_mysql 字符串拼接
1.CONCAT() 2.CONCAT_WS() 3.GROUP_CONCAT() 为了方便下面举例,这里放个student表供下面使用 s_ids_names_sex 01张三男 02李四男 03王 ...
java 字符拼接_七种java字符串拼接详解
01."+"号操作符要说姿势,"+"号操作符必须是字符串拼接最常用的一种了,没有之一. String chenmo = "沉默"; Str ...
SpringBoot加Jquery实现ajax传递json字符串并回显消息（已实践）
场景 inspinia 前端页面模板+thymeleaf模板+jquery+springboot 点击提交将当前选中行的id以json字符串传到后台,后台实现状态更改并刷新表格. 实现提交按钮的点击 ...
jstl json数据 ajax,JSTL，JQuery，Ajax，Json
JSTL 的定义 1 JSP 标准标签库 (JavaServerPage Standard Tag Library) 2 JSTL 通常会与EL 表达式合作实现JSP页面的编码 JSTL 的环境搭 ...
jQuery通过ajax方法获取json数据不执行success的原因及解决方法
1.jquery通过ajax方法获取json数据不执行success回调问题描述:jquery通过ajax方法获取json数据不执行success回调方法问题原因:json格式存在问题或不符合标准 ...

jquery拼接ajax 的json和字符串拼接

jquery拼接ajax 的json和字符串拼接相关推荐

最新文章

热门文章