利用jQury的serialize()属性序列化表单值，创建 URL 编码文本字符串

现需要做一个需求如图

通过点击禁用和可用将数据传输到数据库
html代码

<div class="modal-body">
<form class="form-horizontal"  id="editForm">
<div class="form-group">
<label class="col-sm-2 control-label">角色名称</label>

<div class="col-sm-10">
<input data-bv-trigger="blur" type="text" class="form-control" id="edit_rolename"  name="rolename" placeholder="请输入角色名称必须唯一">
</div>
</div>

<div class="form-group">
<label class="col-sm-2 control-label">角色状态</label>

<div class="col-sm-10">
<select class="form-control" id="edit_state" name="state">
<option  value="0" selected>禁止</option>
<option value="1">可用</option>
</select>
</div>
</div>

</form>
</div>

ajax传输数据

//异步 ajax(remote)效验需要有一个延迟处理的时间
setTimeout(function(){
var result=bsv.isValid();
console.log("saveFormData:"+result);
//验证不成功
if(!result){
return;
}
//表单序列化
var dataStr=$("#editForm").serialize()
//修改就要协带主键
if(primarykey>0){
dataStr+="&id="+primarykey;
}
// dataStr += "&state" + $("#edit_state").val() + "="
console.log(dataStr);

//向后台服务器发送ajax请求
$.ajax({
type: "POST",
url:projectName+ "/admin/manage/sysRole/save",
//向后台发送的数据
data: dataStr,
//返回json格式
dataType:"json",
success: function(resp){
console.log(resp);
//{"code":0,"message:"添加数据成功"}
if(resp.code===0){
//隐藏模态框
$('#myModal').modal('hide');

BootstrapDialog.show({
title: '提示',
message: resp.message,
draggable: true,
type:"type-success"
});
//重新加载数据
$tb.bootstrapTable('refresh');

}else{
//提示错误
BootstrapDialog.show({
title: '提示',
message: resp.message,
draggable: true,
type:"type-success"
});
}
}
});

},100);

}

注意：1. serialize() 方法通过序列化表单值，创建 URL 编码文本字符串。
您可以选择一个或多个表单元素（比如 input 及/或 文本框），或者 form 元素本身。
序列化的值可在生成 AJAX 请求时用于 URL 查询字符串中。
2.serialize() 方法可以操作已选取个别表单元素的 jQuery 对象，比如 , 以及 。不过，选择 标签本身进行序列化一般更容易些：