一.form交互
(1).jQuery通过ajax获得后台json数据给form表单赋值
1.form
<form class="print-info clearfix" id="print-info">
<div class="print-info-row">
<label>姓名:</label>
<input type="text" name="brxm00" value="小小高">
</div>
<div class="print-info-row" style="width: 190px;">
<label>门 诊 号:</label>
<input type="text" name="zyhghh" value="12345678" >
</div>
<div class="print-info-row" style="width: 214px;">
<label>申请医生:</label>
<input type="text" name="sqysxm" value="小高高" >
</div>
<div class="print-info-row" style="width: 220px;margin: 0px 0 0px;">
<label>申请时间:</label>
<input type="text" name="sqrqsj" value="2018-01-16 10:36" >
</div>
<div class="print-info-row">
<label>性别:</label>
<input type="text" name="brxb00" value="女">
</div>
</form>
2.json.txt (接口数据格式)
{
"brxm00": "陈步卜",
"brxb00": "男",
"zyhghh": "0987654321",
"sqysxm":"吴聊聊",
"sqrqsj": "2018-01-17 10:36:17",
}
3.js
$(function () {
$.getJSON('json.txt',function(data){
console.log(data)
$("#print-info").setForm(data);
});
});
$.fn.setForm = function(jsonValue){
var obj=this;
$.each(jsonValue, function (name, ival) {
var $oinput = obj.find("input[name=" + name + "]");
if ($oinput.attr("type")== "radio" || $oinput.attr("type")== "checkbox"){
$oinput.each(function(){
if(Object.prototype.toString.apply(ival) == '[object Array]'){//是复选框,并且是数组
for(var i=0;i<ival.length;i++){
if($(this).val()==ival[i])
$(this).attr("checked", "checked");
}
}else{
if($(this).val()==ival)
$(this).attr("checked", "checked");
}
});
}else if($oinput.attr("type")== "textarea"){//多行文本框
obj.find("[name="+name+"]").html(ival);
}else{
obj.find("[name="+name+"]").val(ival);
}
});
}
(2).提交form的数据
1.防止页面跳转 action=" " ,同时提交按钮改成input type="button" 或是改成<button type="button" ></button>
同时要注意input 时 在ios 上可能出现按钮颜色问题及点击问题 所以记得改成<button type="button" ></button>
<form class="modalNew-form form-horizontal" id="zbqwzForm ">
<div class="row">
<div class="col-md-4 col-lg-4">
<div class="zblist-group ">
<label for="cryzd0">出入院诊断符合率</label>
<input name="cryzd0" type="text" />
<span>%</span>
</div>
</div>
<div class="col-md-4 col-lg-4">
<div class="zblist-group ">
<label for="ssqhzd">手术前后诊断符合比率</label>
<input name="ssqhzd" type="text" />
<span>%</span>
</div>
</div>
<div class="col-md-4 col-lg-4">
<div class="zblist-group ">
<label for="lcblzd">临床和病理诊断符合比率</label>
<input name="lcblzd" type="text"/>
<span>%</span>
</div>
</div>
</div>
<button type="button" class="btn fk-btn-29a2ff" id="saveBtn">保存</button>
</form>
$("#saveBtn").click(function(){
var data = $("#zbqwzForm input").serializeArray();
data = JSON.stringify(data);
})
2.注意:如果要提交成:{ "lcblzd":"100%","ssqhzd":"90%"}
function mapToModel(formData, isTrim, isLowerCase) {
var oData = new Object();
if (formData == undefined || formData == "")
return oData;
$.each(formData, function (index, data) {
if (data.value !== undefined && data.value !== "")
if (isLowerCase === true)
oData[data.name.toUpperCase()] = isTrim === true ? data.value.trim() : data.value;
else if (isLowerCase === false)
oData[data.name.toLowerCase()] = isTrim === true ? data.value.trim() : data.value;
else if (isLowerCase == undefined)
oData[data.name] = isTrim === true ? data.value.trim() : data.value;
});
return oData;
};
//使用方式是:
var oData = $("#zbqwzForm").serializeArray();
oData= mapToModel(oData,true);
var jsonStr = JSON.stringify(oData); //js对象转成json对象
二.span [data-name="brnl00"]时候
<form role="form" class="jgcx-main_form clearfix">
<div class="jgcx-main_form_row jgcx-main_form_row-sty1">
<label>姓名:</label><span data-name="brxm00"></span>
</div>
<div class="jgcx-main_form_row jgcx-main_form_row-sty2">
<label>条 形 码:</label><span data-name="txm000"></span>
</div>
</form>
$(function () {
$.getJSON('js/jsonForm.txt',function(data){
console.log(data)
$(".jgcx-main_form").setForm(data);
});
})
$.fn.setForm = function(jsonValue){
var obj=this;
$.each(jsonValue, function (name, ival) {
obj.find("span[data-name=" + name + "]").text(ival);
});
}
效果跟form一样
三.table
(1).table 显示json 数据
1.table
<table class="print-table print-table-A4">
<tr>
<th>编号</th>
<th>报告项目名称</th>
<th>结果</th>
<th>提示(结果正常标志)</th>
<th>单位</th>
<th>参考区间</th>
</tr>
</table>
2.json
[{
"id": "1",
"bgxmmc": "血压测试1",
"jyjg00":"正常",
"jgzcbz":"正常",
"dw0000":"次",
"ckfw00":"10-23"
}, {
"id": "2",
"bgxmmc": "血压测试2",
"jyjg00":"超出",
"jgzcbz":"低于参考值",
"dw0000":"次",
"ckfw00":"10-36"
}, {
"id": "3",
"bgxmmc": "血压测试3",
"jyjg00":"低于",
"jgzcbz":"高于参考值",
"dw0000":"次",
"ckfw00":"10-23"
}]
3.js
$.ajax({
url: 'jsonTable.txt',
type: 'get',
dataType: 'json',
success: function(json) {
console.log('ll')
var item;
$.each(json, function(i, result) {
item = "<tr><td>" + result['id'] + "</td>"+
"<td>" + result['bgxmmc'] + "</td>"+
"<td>" + result['jyjg00'] + "</td>"+
"<td>"+ result['jgzcbz'] + "</td>"+
"<td>" + result['dw0000'] + "</td>"+
"<td>"+ result['ckfw00'] +"</td></tr>";
$('.print-table').append(item);
});
},
error:function(res){
console.log('失败')
}
})
(2).table 提交数据
html
<table class="table tableList2-table table-new-xz" id="zzdJS">
<thead>
<tr>
<th width="5%">序号</th>
<th width="15%">主诊断编码</th>
<th width="15%">主诊断名称</th>
<th width="15%">主诊断匹配</th>
<th width="15%">从属诊断码</th>
<th width="15%">从属诊名称</th>
<th width="15%">从属诊匹配</th>
<th width="5%">操作</th>
</tr>
</thead>
<tbody>
<tr>
<td><span name="pxxh00">1</span></td>
<td data-id="zdbmjs" class="td_zdbm_1">
<input type="text" name="zdssbm" placeholder="输入编码" class="form-control" autocomplete="off" data-id="C69.503">
</td>
<td>
<input type="text" class="form-control" name="zdssmc" readonly="readonly">
</td>
<td data-id="csbmjs" class="td_csbm_1">
<input type="text" name="zdssbm2" placeholder="输入从属编码" class="form-control" autocomplete="off" data-id="A19.800">
</td>
<td>
<input type="text" class="form-control" name="zdssmc2" readonly="readonly">
</td>
</tr>
<tr>
<td><span name="pxxh00">2</span></td>
<td data-id="zdbmjs" class="td_zdbm_2">
<input type="text" name="zdssbm" placeholder="输入编码" class="form-control" autocomplete="off" data-id="A19.901">
</td>
<td>
<input type="text" class="form-control" name="zdssmc" readonly="readonly">
</td>
<td data-id="csbmjs" class="td_csbm_2">
<input type="text" name="zdssbm2" placeholder="输入从属编码" class="form-control" autocomplete="off" data-id="A19.803">
</td>
<td><input type="text" class="form-control" name="zdssmc2" readonly="readonly">
</td>
</tr>
</tbody>
</table>
js:
var zzdData =[];
var zzdObj = document.getElementById("zzdJS");
for(var i=1; i<zzdObj.rows.length; i++){
var jsonTr = {};
for(var j=1; j<zzdObj.rows[i].cells.length-1; j++){
//我写的table中每一个td里面都有一个input框,所以要先用children[0]获取input框对象
name = zzdObj.rows[i].cells[j].children[0].name;
value = zzdObj.rows[i].cells[j].children[0].value;
jsonTr[name] = value;
}
zzdData.push(jsonTr);
}
console.log(zzdData)
四.ul li
<ul id="list"></ul>
<script>
$(function() {
$.getJSON('table.json',function(data){
for(var i=0;i<data.length;i++){
$("#list").append('<li>'+data[i].name+'</a></li>');
}
});
})
</script>
或是
<div class="newUl"></div>
<script>
$(function() {
$.getJSON('table.json',function(data){
var html='<ul id="list">'
for(var i=0;i<data.length;i++){
html+='<li>'+data[i].name+'</a></li>';
}
+'<ul>';
$('.newUl').append(html)
});
})
</script>