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-7(JavaScript-1)

    放在函数里面 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <ti ...

  2. 2023浙江省大学生信息安全竞赛决赛 Cry+Misc wp

    搞到了一些附件,做做看难度如何. CRYPTO R_r 1.题目信息 查看代码 from Crypto.Util.number import * import random from gmpy2 im ...

  3. Johnson 最短路算法

    Johnson 算法 全源最短路径求解其实是单源最短路径的推广,求解单源最短路径的两种算法时间复杂度分别为: Dijkstra 单源最短路径算法:时间复杂度为 \(O(E + VlogV)\),要求权 ...

  4. C语言实现输入的时间,屏幕显示一秒后的时间。显示格式为HH:MM:SS。

    #include <stdio.h> int main() { int HH, MM, SS; scanf("%d:%d:%d",&HH,&MM,&am ...

  5. Vue01-简介与入门

    Vue 01. 简介 1.1 前端三大框架 目前前端最流行的三大框架: Vue React angular 1.2 Vue简介 Vue (读音 /vjuː/,类似于 view) ,也可以写成Vue.j ...

  6. js根据某属性对json数组分类

    原数据: var arr = [ {name: '张三', age: 23, work: '计算机'}, {name: '王五', age: 29, work: '计算机'}, {name: '张兴' ...

  7. Codeforces Round 905 (Div. 3)

    Codeforces Round 905 (Div. 3) A. Morning 题意:操作:显示,向前走都为一次操作:目标:显示这四个数 思路:0->10,然后依次作差就行 #include ...

  8. 【源码系列#03】Vue3计算属性原理(Computed)

    专栏分享:vue2源码专栏,vue3源码专栏,vue router源码专栏,玩具项目专栏,硬核推荐 欢迎各位ITer关注点赞收藏 语法 传入一个 getter 函数,返回一个默认不可手动修改的 ref ...

  9. [UOJ216][UNR#2 2A] Jakarta Skyscrapers

    印尼首都雅加达市有 $10^{18}$ 座摩天楼,它们排列成一条直线,我们从左到右依次将它们编号为 $1$ 到 $10^{18}$ .除了这 $10^{18}$ 座摩天楼外,雅加达市没有其他摩天楼. ...

  10. 效率工具:Hutool 嘎嘎香,被秀到了!

    在日常开发中,我们会使用很多工具类来提升项目开发的速度,而国内用的比较多的 Hutool 框架,就是其中之一. 先来看官方对于 Hutool 的定义: Hutool 是一个小而全的 Java 工具类库 ...