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

简介: 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>
相关文章
|
3月前
|
JavaScript 前端开发
jquery怎么给循环出来的列表(类似于text框)取值和赋值
jquery怎么给循环出来的列表(类似于text框)取值和赋值
22 0
jquery怎么给循环出来的列表(类似于text框)取值和赋值
|
4月前
|
存储 Java
数据结构:图文详解顺序表的各种操作(新增元素,查找元素,删除元素,给指定位置元素赋值)
数据结构:图文详解顺序表的各种操作(新增元素,查找元素,删除元素,给指定位置元素赋值)
124 0
|
5月前
|
JSON JavaScript 数据格式
jQuery将json性别数据int类型进行格式化渲染
jQuery将json性别数据int类型进行格式化渲染
26 0
|
5月前
|
JavaScript BI
jQuery根据填写的input的数值导出excel表格
jQuery根据填写的input的数值导出excel表格
23 0
|
5月前
|
JavaScript
jQuery数据渲染,每行显示4个数据,超过四条数据自动换行
jQuery数据渲染,每行显示4个数据,超过四条数据自动换行
21 0
|
5月前
|
JavaScript
jQuery数据结构渲染(4):复选框checkbox赋值
jQuery数据结构渲染(4):复选框checkbox赋值
40 1
|
19天前
|
消息中间件 存储 搜索推荐
深入理解栈和队列(二):队列
深入理解栈和队列(二):队列
33 0
|
1月前
【栈】数据结构栈的实现
【栈】数据结构栈的实现
|
1月前
|
存储
数据结构--栈和队列
数据结构--栈和队列
|
1月前
|
存储 算法 数据处理
数据结构从入门到精通——栈
栈,作为一种后进先出(LIFO)的数据结构,在计算机科学中扮演着重要的角色。它的特性使得它在处理函数调用、括号匹配、表达式求值等问题时具有得天独厚的优势。然而,如果我们跳出传统思维的束缚,会发现栈的用途远不止于此。
58 0