html jquery from 表单提交 application/x-www-form-urlencoded 改成 json

简介: html jquery from 表单提交 application/x-www-form-urlencoded 改成 json

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});
    }
  });
}
目录
相关文章
|
1月前
|
XML 存储 JSON
Twaver-HTML5基础学习(19)数据容器(2)_数据序列化_XML、Json
本文介绍了Twaver HTML5中的数据序列化,包括XML和JSON格式的序列化与反序列化方法。文章通过示例代码展示了如何将DataBox中的数据序列化为XML和JSON字符串,以及如何从这些字符串中反序列化数据,重建DataBox中的对象。此外,还提到了用户自定义属性的序列化注册方法。
39 1
|
2月前
|
JSON 前端开发 JavaScript
|
15天前
|
XML JavaScript 数据格式
jquery中html()方法的使用
jquery中html()方法的使用
15 1
|
16天前
|
JSON 数据格式
LangChain-20 Document Loader 文件加载 加载MD DOCX EXCEL PPT PDF HTML JSON 等多种文件格式 后续可通过FAISS向量化 增强检索
LangChain-20 Document Loader 文件加载 加载MD DOCX EXCEL PPT PDF HTML JSON 等多种文件格式 后续可通过FAISS向量化 增强检索
42 2
|
26天前
|
JSON Java 数据格式
java操作http请求针对不同提交方式(application/json和application/x-www-form-urlencoded)
java操作http请求针对不同提交方式(application/json和application/x-www-form-urlencoded)
41 1
|
28天前
|
XML 前端开发 JavaScript
jQuery HTML / CSS 方法
jQuery HTML / CSS 方法
11 2
|
15天前
|
机器学习/深度学习 JSON JavaScript
LangChain-21 Text Splitters 内容切分器 支持多种格式 HTML JSON md Code(JS/Py/TS/etc) 进行切分并输出 方便将数据进行结构化后检索
LangChain-21 Text Splitters 内容切分器 支持多种格式 HTML JSON md Code(JS/Py/TS/etc) 进行切分并输出 方便将数据进行结构化后检索
17 0
|
1月前
|
存储 JavaScript 前端开发
使用jQuery实现Form表单提交
【9月更文挑战5天】
|
2月前
|
存储 JSON 前端开发
jQuery Get 请求参数转换为 JSON
【8月更文挑战第22天】
|
1月前
|
XML 前端开发 JavaScript
jQuery HTML / CSS 方法
jQuery HTML / CSS 方法
25 0