form表单的提交与数据渲染
简单界面：
html代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form id="formDialog" class="uk-form" method="post" action="./js.json">
<div>
<label>用户名</label>
<input name="loginName" field="loginName" type="text" placeholder="输入">
</div>
<div>
<label class="uk-width-1-6">姓名</label>
<input name="name" field="name" type="text" placeholder="输入">
</div>
<div field="type">
<label><input type="radio" name="type" value="0">电话</label>
<label><input type="radio" name="type" value="1">门诊</label>
<label><input type="radio" name="type" value="2">微信</label>
<label><input type="radio" name="type" value="3">电子邮件</label>
<label><input type="radio" name="type" value="4">其他</label>
</div>
<div>
<label class="uk-width-1-6">性别</label>
<select name="sex" field="sex">
<option value="1">男</option>
<option value="0">女</option>
</select>
</div>
<div>
<label>出生日期</label>
<input name="birthday" placeholder="输入" type="text" field="birthday">
</div>
<div>
<label>电话</label>
<input name="phone" type="text" placeholder="输入" field="phone">
</div>
<div>
<label>email</label>
<input name="email" field="email" type="text" placeholder="输入">
</div>
<input type="submit" value="登录"/>
<input type="button" id="button" value="渲染"/>
</form>
</body>
</html>
js代码：
<script type="application/javascript" src="./jquery-3.2.1.min.js"></script>
<script>
$("#button").click(function () {
$.ajax({
url: "./js.json",
type: "get",
success: function (data) {
if (data.respCode == 0) {
applyDrawing(data.respBody);
} else {
console.log(data.respMsg);
}
}
})
})
function applyDrawing(data) {
var field = $("#formDialog [field]");
field.each(function () {
var value = data[$(this).attr("field")];
$(this).val(value);
});
if (field.find('input[type="radio"]')) {
field.find('input[type="radio"]').filter("[value='" + data.type + "']").attr("checked", true);
}
}
</script>
json假数据：