json数据格式如下:
data.json:
{ "configName": "英语测试作业", "promoter": "王小婷", "suggestion": "单词量不够,多背诵一点哦" }
1:div等文本或者textarea多行文本框赋值,使用.text()的方法赋值
$("#promoter").text(data.promoter); $("#suggestion").text(data.suggestion);
2:input框里面,使用.val()的方法赋值
$("#configName").val(data.configName);
<!DOCTYPE HTML> <html xmlns:th="http://www.thymeleaf.org"> <head> <title>jQuery数据结构渲染(3):文本和input/textarea框赋值</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> <script src="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body> 作业名称:<input type="text" id="configName"> 发起人:<div id="promoter"></div> 审批意见:<textarea id="suggestion" rows="4" cols="30"></textarea> </body> <script type="text/javascript"> $.ajax({ url: "data.json", type: 'GET', dataType: 'json', success: function(data) { $("#configName").val(data.configName); $("#promoter").text(data.promoter); $("#suggestion").text(data.suggestion); } }); </script> </html>