jQuery数据结构渲染（3）：文本和input/textarea框赋值

上山打老虎

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>

[jQuery] jQuery数据结构渲染（3）：文本和input/textarea框赋值

相关帖子

HMS Core 3D Engine助您实现逼真3D渲染效果，构筑大型3D数字世界

Android-Json文件解析(GSON,JSONOBJECT)

干货| 四种渲染到底是啥？终于有人讲明白了！（上）

在工作中离屏真的不重要吗，代码优化就真的不考虑0.1%的离屏问题吗，懂得离屏渲染原理，让你程序员之后走的更长

Cube 技术解读 | Cube 渲染设计的前世今生

HMS Core音频编辑服务音源分离与空间音频渲染，助力快速进入3D音频的世界

HTML5 placeholder美化input背景提示文字

HTML5 input新增的几种类型（数字、日期、颜色选取、范围）

使用HTML/CSS/JS做一个恋爱计时小挂件

常用jquery右健禁止命令

上山打老虎 LV4