ajax接收后台传来的JSON类型数据，可通过循环遍历为input赋值（input的ID需要和返回来的数据名相同）

最新推荐文章于 2025-05-29 11:56:13 发布

IT小白007

最新推荐文章于 2025-05-29 11:56:13 发布

阅读量6.1k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/wangxinaz/article/details/77338161

本文介绍如何通过Ajax调用获取后台返回的JSON数据，并利用JavaScript或jQuery遍历数据，将内容赋值给对应ID的input元素，要求输入字段ID与JSON键名匹配。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

$.ajax({

url:"${ctx}/commonquery/query/getDataJsonArray",
type:"post",
dataType:"json",
data:{
"fileName":"Management/sysManagement_SelectUpd",
"redirect":"modules/sysManagement/AntennaModelUpdateForm",
"sqlIds":"list_1,list_2,list_3",
"ANTENNA_MODEL_ID":"${ANTENNA_MODEL_ID}"
},
success:function(data){
var test1 = data.returnJson[0].list_1[0]; //循环遍历品牌表数据并赋给input
$.each(test1,function(key,item){
$("#"+key).val(item||""); //返回结果为null时，转换成空字符串
})
if(data.returnJson[0].list_2.length != 0){
var test2 = data.returnJson[0].list_2[0]; //循环遍历机械参数表数据并赋给input
$.each(test2,function(key,item){
$("#"+key).val(item||"");
})
}
if(data.returnJson[0].list_3.length != 0){
for(i = 0 ; i < data.returnJson[0].list_3.length;i++){
if(i == 0){ //为频段1赋值
var test3 = data.returnJson[0].list_3[i]; //循环遍历机械参数表数据并赋给input
$.each(test3,function(key,item){
$("input[name="+key+"_a]").val(item||"");
})
}
if(i == 1){ //为频段2赋值
var test4 = data.returnJson[0].list_3[i]; //循环遍历机械参数表数据并赋给input
$.each(test4,function(key,item){
$("input[name="+key+"_b]").val(item||"");
})
}
if(i == 2){ //为频段3赋值
var test5 = data.returnJson[0].list_3[i]; //循环遍历机械参数表数据并赋给input
$.each(test5,function(key,item){
$("input[name="+key+"_c]").val(item||"");
})
}
}
}
$("#jixieData").val(data.returnJson[0].list_2.length);
$("#dianqiData").val(data.returnJson[0].list_3.length);
$("input[name=ANTENNA_MODEL_ID]").val(data.returnJson[0].list_1[0].ANTENNA_MODEL_ID);
closeLoading();
}
})