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. vivo 网络端口安全建设技术实践

    作者:vivo 互联网安全团队 - Peng Qiankun 随着互联网业务的快速发展,网络攻击的频率和威胁性也在不断增加,端口是应用通信中的门户,它是数据进出应用的必经之路,因此端口安全也逐渐成为了 ...

  2. [Jetson Nano]SSH连接Jetson Nano时出现Xlib: extension NV-GLX missing on display localhost:10.0

    解决SSH连接Jetson Nano时遇到的"Xlib: extension "NV-GLX" missing on display 'localhost:10.0'&q ...

  3. 自定义Graph Component:1.2-其它Tokenizer具体实现

      本文主要介绍了Rasa中相关Tokenizer的具体实现,包括默认Tokenizer和第三方Tokenizer.前者包括JiebaTokenizer.MitieTokenizer.SpacyTok ...

  4. pnpm 管理依赖包是如何节省磁盘空间的?

    npm 存在的问题 我们经常使用 npm 来管理 node 项目中的包,从 package.json 中读取配置将依赖下载到本地,以保障项目的正常运行. 当项目数量多时,这样的包管理方式会非常的占用电 ...

  5. Leetcode回文数

    直接上python代码 class Solution: def isPalindrome(self, x: int) -> bool: if x<0: //负数必不是回文数 return ...

  6. 飞码LowCode前端技术之画布的设计

    简介 本章节从精准定位.分层设计.异步组件.拖拽四个方面分析飞码画布设计. 一.精准定位设计 飞码画布是一个套件,可对外提供画布能力.精准定位有两种情况,一是目标组件无子组件,而是目标组件有子组件. ...

  7. 主界面(零基础适合小白)基础javaweb前端项目实战【包含增删改查,mysql】三

    首先编写sp文件(index.jsp) <%@ page contentType="text/html;charset=UTF-8" language="java& ...

  8. AutoCAD ObjectARX 二次开发(2020版)--1,下载和部署开发环境--

    教程说明: 本教程为2019年10月开始编撰,使用CAD官方最新版本的软件和库.对旧版本仍有参考价值. 本教程中使用的各种软件版本为官方指定匹配版本. 本教程需要你拥有编程基础,对于普通编程常识不再敷 ...

  9. SQLBI_精通DAX课程笔记_03_计算列

    计算列是由DAX在表中生成的列,逐行计算并储存在模式之中. 以下链接是采悟老师关于度量值和计算列的区别的文章,可以同步查看. https://zhuanlan.zhihu.com/p/75462046 ...

  10. WinForm窗体间传值的方法

    窗体间传递数据,无论是父窗体操作子窗体,还是子窗体操作符窗体,有以下几种方式: 1.公共静态变量:2.使用共有属性:3.使用委托与事件:4.通过构造函数把主窗体传递到从窗体中: 一.通过静态变量特点: ...