利用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 对象，比如 , 以及 。不过，选择 标签本身进行序列化一般更容易些：

标签：URL,resp,serialize,表单,message,序列化,type,dataStr
来源： https://blog.csdn.net/weixin_44955631/article/details/95643759