html jquery from 表单提交 $(form).ajaxSubmit  application/x-www-form-urlencoded  改成 json

要使用 jQuery 根据 name 属性找出被选中的 checkbox 的值,你可以使用以下的方法:

  1. 遍历所有的 checkboxes 并检查哪个是被选中的。
  2. 使用 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="&nbsp;&nbsp;提交&nbsp;&nbsp;">
<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的更多相关文章

  1. jquery插件-表单提交插件-jQuery.Form

    1.介绍 JQuery Form插件是一款强大的Ajax表单提交插件,可以简单方便的实现让我们的表单 由传统的提交方式转换成Ajax无刷新提交! 他提供了两个核心的方法ajaxForm以及ajaxSu ...

  2. JQuery阻止表单提交的方法总结 - 使用onsubmit()验证表单并阻止非法提交

    方法1:<form onsubmit="javascript:confirm()"> 方法内返回false阻止表单提交 示例:代码检测textarea内填写的长度,未填 ...

  3. jquery mobile 表单提交 图片/文件 上传

    jquerymobile 下面 form 表单提交 和普通html没区别,最主要是 <form 要加一个 data-ajax='false' 否则 上传会失败 1  html代码 <!do ...

  4. Jquery 实现表单提交按钮变灰,防止多次点击提交重复数据

    表单提交时候我们应该控制提交按钮,不能点击多次进行数据的重复提交.要不然就会有冗余的重复的数据在系统中,造成系统出现数据垃圾.jQuery很简单的就可以实现对表单提交按钮控制,下面就是相关的例子和代码 ...

  5. jQuery异步表单提交

    有时在A页面点击按钮弹出一个form表单,在填完表单后提交成功后,需要关闭表单页并将表单中的某些值反应在A页面上,这时就需要异步提交表单.其实也挺简单,只是需要把表单数据序列化. $("#f ...

  6. 用jquery控制表单提交

    可以监听表单submit提交事件给form一个id 吧button的type为submit $(form的id).submit(function(){ if(window.confirm('你确定要取 ...

  7. Java后台使用httpclient入门HttpPost请求(form表单提交,File文件上传和传输Json数据)

    一.HttpClient 简介 HttpClient 是 Apache Jakarta Common 下的子项目,用来提供高效的.最新的.功能丰富的支持 HTTP 协议的客户端编程工具包,并且它支持 ...

  8. flask用宏渲染表单模板时,表单提交后,如果form.validate_on_submit()返回的是false的可能原因

    flask用宏渲染表单模板时,表单提交后,提交的内容符合DataRequired()校验, 但是form.validate_on_submit()返回的是False, 原因可能是表单模板中的<f ...

  9. jQuery ajax表单提交实现局部刷新

    jQuery Ajax 异步提交 Form 表单,如果使用 get 请求,注意中文乱码问题,jquery 会先使用 iso8859-1 解码,然后发给服务器,如果使用 post 请求,则直接将中文内容 ...

  10. jQuery ajax表单提交

    Jquery的$.ajax方法可以实现ajax调用,要设置url,post,参数等. 如果要提交现有Form需要写很多代码,何不直接将Form的提交直接转移到ajax中呢. 以前的处理方法 如Form ...

随机推荐

  1. 高性能渲染——详解Html Canvas的优势与性能

    本文由葡萄城技术团队原创并首发.转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. 一.什么是Canvas 想必学习前端的同学们对Canvas 都不陌生,它是 ...

  2. (数据科学学习手札155)基于martin为在线地图构建字体切片服务

    本文示例代码已上传至我的Github仓库https://github.com/CNFeffery/DataScienceStudyNotes 1 简介 大家好我是费老师,在之前的一篇文章(基于mart ...

  3. Flutter搭建

    目录 下载 Flutter SDK 配置 Flutter 环境变量及镜像 检查开发环境 参考 下载 Flutter SDK flutter官网下载:https://flutter.io/sdk-arc ...

  4. C/C++ 运用Npcap发送UDP数据包

    Npcap 是一个功能强大的开源网络抓包库,它是 WinPcap 的一个分支,并提供了一些增强和改进.特别适用于在 Windows 环境下进行网络流量捕获和分析.除了支持通常的网络抓包功能外,Npca ...

  5. Python读取Ansible playbooks返回信息

    一.背景及概要设计 当公司管理维护的服务器到达一定规模后,就必然借助远程自动化运维工具,而ansible是其中备选之一.Ansible基于Python开发,集合了众多运维工具(puppet.chef. ...

  6. 如何给el-table中某一列加指定内容和点击事件

    背景: 小颖最近在写项目时遇到了要给  element-ui 中的  el-table 在 v-for  el-table-column 标签时给某列加内容和点击事件,项目忙完了想着总结一下,下面一起 ...

  7. BS页面设计 | 寻梦环游记电影介绍

  8. classpath 和 classpath* 的区别

    classpath 和 classpath* 的区别 classpath 和 classpath* 是两种不同的类路径搜索模式,它们在寻找资源文件时有所不同: classpath:classpath ...

  9. [GDOIpj222B] 网页浏览

    第二题 网页浏览 提交文件: webpage.cpp 输入文件: webpage.in 输出文件: webpage.out 时间空间限制: 1 秒, 256 MB 我们在上网时,从一个网页上的链接打开 ...

  10. 神经网络优化篇:机器学习基础(Basic Recipe for Machine Learning)

    机器学习基础 下图就是在训练神经网络用到的基本方法:(尝试这些方法,可能有用,可能没用) 这是在训练神经网络时用到地基本方法,初始模型训练完成后,首先要知道算法的偏差高不高,如果偏差较高,试着评估训练 ...