前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >jQuery数据结构渲染(3):文本和input/textarea框赋值

jQuery数据结构渲染(3):文本和input/textarea框赋值

作者头像
王小婷
发布2020-05-18 15:31:59
8600
发布2020-05-18 15:31:59
举报
文章被收录于专栏:编程微刊

json数据格式如下: data.json:

代码语言:javascript
复制
{   
    "configName": "英语测试作业",
    "promoter": "王小婷",  
    "suggestion": "单词量不够,多背诵一点哦"
}

1:div等文本或者textarea多行文本框赋值,使用.text()的方法赋值

代码语言:javascript
复制
$("#promoter").text(data.promoter);                 
$("#suggestion").text(data.suggestion); 

2:input框里面,使用.val()的方法赋值

代码语言:javascript
复制
  $("#configName").val(data.configName);
代码语言:javascript
复制
<!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>
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档