html jquery from 表单提交 application/x-www-form-urlencoded 改成 json
html jquery from 表单提交 $(form).ajaxSubmit application/x-www-form-urlencoded 改成 json
要使用 jQuery 根据 name 属性找出被选中的 checkbox 的值,你可以使用以下的方法:
- 遍历所有的 checkboxes 并检查哪个是被选中的。
- 使用 jQuery 的
.val()方法来获取被选中的 checkbox 的值。
<form class="form form-horizontal" id="form-admin-add">
<div class="row cl">
<label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>管理员:</label>
<div class="formControls col-xs-8 col-sm-9">
<input type="text" class="input-text" value="" placeholder="" id="adminName" name="adminName">
</div>
<div class="row cl">
<label class="form-label col-xs-4 col-sm-3">角色:</label>
<div class="formControls col-xs-8 col-sm-9">
<div class="check-box">
<input type="checkbox" id="chkAnalysis" name="doctorRole" value="Analysis">
<label for="chkAnalysis">报告医生</label>
</div>
<div class="check-box">
<input type="checkbox" id="chkAudit" name="doctorRole" value="Audit">
<label for="chkAudit">审核医生</label>
</div>
<div class="check-box">
<input type="checkbox" id="chkReview" name="doctorRole" value="Review">
<label for="chkReview">高级审核</label>
</div>
</div>
</div>
<div class="row cl">
<div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3">
<input class="btn btn-primary radius" type="submit" value=" 提交 ">
<input type="hidden" id="hidId" value="" />
</div>
</div>
</div>
</form>
application/x-www-form-urlencoded js
<script type="text/javascript">
$(function(){
$('.skin-minimal input').iCheck({
checkboxClass: 'icheckbox-blue',
radioClass: 'iradio-blue',
increaseArea: '20%'
}); $("#form-admin-add").validate({
rules:{
adminName:{
required:true,
minlength:4,
maxlength:16
},
password:{
required:true,
},
password2:{
required:true,
equalTo: "#password"
},
sex:{
required:true,
},
phone:{
required:true,
isPhone:true,
},
email:{
required:true,
email:true,
},
adminRole:{
required:true,
},
},
onkeyup:false,
focusCleanup:true,
success:"valid",
submitHandler:function(form){
$(form).ajaxSubmit({
type: 'post',
url: "xxxxxxx" ,
success: function(data){
layer.msg('添加成功!',{icon:1,time:1000});
var index = parent.layer.getFrameIndex(window.name);
parent.$('.btn-refresh').click();
parent.layer.close(index);
},
error: function(XmlHttpRequest, textStatus, errorThrown){
layer.msg('error!',{icon:1,time:1000});
}
});
}
});
});
</script>
POST 改成 JSON
submitHandler:function(form){} 的代码修改如下:
submitHandler:function(form){
var userRoleList = new Array();
$('input[type="checkbox"][name="doctorRole"]').each(function(){
if(this.checked){
var userRole = {}
userRole.roleCode = $(this).value();
userRoleList.push(userRole);
}
});
var obj = {};
obj.id = $("#hidId").val().trim();
obj.adminName = $("#adminName").val().trim();
obj.roleList = userRoleList;
//$(form).ajaxSubmit({ //这个要换掉,不然不起作用
$.ajax({
type: 'post',
url: "xxxxxxx" ,
dataType: 'json',
contentType: "application/json;charset=utf-8",
headers: {
'AccessToken': 'TokenValue'
},
data: JSON.stringify(obj), // 将 JSON 对象转换为 JSON 字符串作为请求数据
beforeSend: function (XMLHttpRequest) {
layer.msg("数据提交中....", { icon: 16, time: 60000, shade: 0.1 });
},
success: function(data){
layer.msg('添加成功!',{icon:1,time:1000});
var index = parent.layer.getFrameIndex(window.name);
parent.$('.btn-refresh').click();
parent.layer.close(index);
},
error: function(XmlHttpRequest, textStatus, errorThrown){
layer.msg('error!',{icon:1,time:1000});
}
});
}
html jquery from 表单提交 application/x-www-form-urlencoded 改成 json的更多相关文章
- jquery插件-表单提交插件-jQuery.Form
1.介绍 JQuery Form插件是一款强大的Ajax表单提交插件,可以简单方便的实现让我们的表单 由传统的提交方式转换成Ajax无刷新提交! 他提供了两个核心的方法ajaxForm以及ajaxSu ...
- JQuery阻止表单提交的方法总结 - 使用onsubmit()验证表单并阻止非法提交
方法1:<form onsubmit="javascript:confirm()"> 方法内返回false阻止表单提交 示例:代码检测textarea内填写的长度,未填 ...
- jquery mobile 表单提交 图片/文件 上传
jquerymobile 下面 form 表单提交 和普通html没区别,最主要是 <form 要加一个 data-ajax='false' 否则 上传会失败 1 html代码 <!do ...
- Jquery 实现表单提交按钮变灰,防止多次点击提交重复数据
表单提交时候我们应该控制提交按钮,不能点击多次进行数据的重复提交.要不然就会有冗余的重复的数据在系统中,造成系统出现数据垃圾.jQuery很简单的就可以实现对表单提交按钮控制,下面就是相关的例子和代码 ...
- jQuery异步表单提交
有时在A页面点击按钮弹出一个form表单,在填完表单后提交成功后,需要关闭表单页并将表单中的某些值反应在A页面上,这时就需要异步提交表单.其实也挺简单,只是需要把表单数据序列化. $("#f ...
- 用jquery控制表单提交
可以监听表单submit提交事件给form一个id 吧button的type为submit $(form的id).submit(function(){ if(window.confirm('你确定要取 ...
- Java后台使用httpclient入门HttpPost请求(form表单提交,File文件上传和传输Json数据)
一.HttpClient 简介 HttpClient 是 Apache Jakarta Common 下的子项目,用来提供高效的.最新的.功能丰富的支持 HTTP 协议的客户端编程工具包,并且它支持 ...
- flask用宏渲染表单模板时,表单提交后,如果form.validate_on_submit()返回的是false的可能原因
flask用宏渲染表单模板时,表单提交后,提交的内容符合DataRequired()校验, 但是form.validate_on_submit()返回的是False, 原因可能是表单模板中的<f ...
- jQuery ajax表单提交实现局部刷新
jQuery Ajax 异步提交 Form 表单,如果使用 get 请求,注意中文乱码问题,jquery 会先使用 iso8859-1 解码,然后发给服务器,如果使用 post 请求,则直接将中文内容 ...
- jQuery ajax表单提交
Jquery的$.ajax方法可以实现ajax调用,要设置url,post,参数等. 如果要提交现有Form需要写很多代码,何不直接将Form的提交直接转移到ajax中呢. 以前的处理方法 如Form ...
随机推荐
- 彻底搞懂CAP理论(电商系统)
1.理解CAP CAP是 Consistency.Availability.Partition tolerance三个词语的缩写,分别表示一致性.可用性.分区容忍性. 下边我们分别来解释: 为了方便对 ...
- Acwing127周赛第三题 构造矩阵 (套路)
题目链接:构造矩阵 题目描述 我们希望构造一个 n×m 的整数矩阵. 构造出的矩阵需满足: 每一行上的所有元素之积均等于 k. 每一列上的所有元素之积均等于 k. 保证 k 为 1 或 −1. 请你计 ...
- (Good topic)压缩字符串 (3.16 leetcode每日打卡)
字符串压缩.利用字符重复出现的次数,编写一种方法,实现基本的字符串压缩功能.比如,字符串aabcccccaaa会变为a2b1c5a3.若"压缩"后的字符串没有变短,则返回原先的字符 ...
- git推送时报错:fatal: unable to access 'https://github.com/xxx/xxx.git/': Failed to connect to 127.0.0.1 port 31181 after 2063 ms: Connection refused
一.报错原因 1.因为git在拉取或者提交项目时,中间会有git的http和https代理,但是我们本地环境本身就有SSL协议了,所以取消git的https代理即可,不行再取消http的代理. 2.当 ...
- 明解Java第二章练习题答案
练习2-1 请对代码清单2-6的2处进行修改,将带有小数部分的实数值赋给x和y,查看结果如何? 答案:编译器会报错,因为小数的默认类型double是比int更大的类型.如果给double类型的变量赋值 ...
- C++ Qt开发:Charts折线图绘制详解
Qt 是一个跨平台C++图形界面开发库,利用Qt可以快速开发跨平台窗体应用程序,在Qt中我们可以通过拖拽的方式将不同组件放到指定的位置,实现图形化开发极大的方便了开发效率,本章将重点介绍QCharts ...
- 踩坑ffmpeg录制的mp4无法在浏览器上播放
前言 使用ffmpeg编译好的程序在电脑上进行音视频转换,可以参考这篇:<windows电脑FFmpeg安装教程手把手详解_windows安装ffmpeg>,而我们要做的是在游戏引擎中集成 ...
- Mybatis源码4 Cache的实现和其原理
Mybatis CachingExecutor, 二级缓存,缓存的实现 一丶二级缓存概述 上一章节,我们知道mybaits在构造SqlSession的时候,需要让SqlSession持有一个执行器,如 ...
- 文心一言 VS 讯飞星火 VS chatgpt (62)-- 算法导论6.5 1题
文心一言 VS 讯飞星火 VS chatgpt (62)-- 算法导论6.5 1题 一.试说明 HEAP-EXTRACT-MAX在堆A=(15,13,9,5,12,8,7,4,0,6,2,1)上的操作 ...
- Flutter Getx 路由管理
GetX 为我们封装了 Navigation ,无需 context 可进行跳转,使用 GetX 进行路由跳转非常的简单, 只需要调用 Get.to() 即可进行路由跳转, GetX 路由跳转简化了跳 ...