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. Windows上的多jdk版本管理工具

    前言 Java在Windows上因为版本太多导致难以管理,这个项目可以很好的解决这点 项目地址 GitHub - ystyle/jvms: JDK Version Manager (JVMS) for ...

  2. .net core下优秀的日志框架使用解析,附源代码

    在 .NET Core 中,日志是一个非常重要的组件,它可以帮助我们记录应用程序的运行情况,以便在出现问题时进行排查.在本文中,我们将介绍五个优秀的 .NET Core 日志框架,它们分别是 Seri ...

  3. execl表格if函数and和or的使用方法?

    当在Excel中处理数据时,IF函数是非常有用的函数之一.它允许您根据指定的条件执行不同的操作.在IF函数中,AND和OR函数可以帮助您组合多个条件以实现更复杂的逻辑判断.接下来,我将详细描述IF函数 ...

  4. vertx的学习总结4之异步数据和事件流

    一.异步数据和事件流 1.为什么流是事件之上的一个有用的抽象? 2.什么是背压,为什么它是异步生产者和消费者的基础? 3.如何从流解析协议数据? 1.  答:因为它能够将连续的事件序列化并按照顺序进行 ...

  5. ssm整合-项目异常处理方案

    项目异常分类: 项目异常处理方案: 需要自定义异常处理 然后在处理器中加入 package com.itheima.controller; import com.itheima.exception.B ...

  6. 【scikit-learn基础】--『预处理』之 数据缩放

    数据的预处理是数据分析,或者机器学习训练前的重要步骤.通过数据预处理,可以 提高数据质量,处理数据的缺失值.异常值和重复值等问题,增加数据的准确性和可靠性 整合不同数据,数据的来源和结构可能多种多样, ...

  7. 基于Docker Desktop搭建Kafka集群并使用Java编程开发

    一.引言 前段时间因课业要求使用Docker Desktop 部署Kafka集群并编写生产者消费者程序,折磨了我好几天,在查找大量资料后终于是把整个集群搭建完成了.现在我想要分享其中搭建的历程,希望能 ...

  8. 聊聊流式数据湖Paimon(二)

    当前的问题 Apache Paimon 最典型的场景是解决了 CDC (Change Data Capture) 数据的入湖:CDC 数据来自数据库.一般来说,分析需求是不会直接查询数据库的. 容易对 ...

  9. libgdx摄像头的移动

    要知道,做一个游戏,摄像头是必不可少的.接下来,我将讲解libgdx里面摄像头的移动 2d摄像头OrthographicCamera也叫做正交相机 结果展示: 按上下左右是可以移动的 Orthogra ...

  10. 从零玩转Nginx-从零玩转nginx

    title: 从零玩转Nginx date: 2023-05-13 23:08:49.074 updated: 2023-05-13 23:17:26.474 url: https://www.yby ...