利用JS向页面中添加数据

最新推荐文章于 2024-04-25 00:00:00 发布
最新推荐文章于 2024-04-25 00:00:00 发布
阅读量1.6k 收藏
点赞数 1
分类专栏： java web 文章标签： JS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hhwyyda/article/details/9469997
版权 
1234567891011121314151617181920212223242526272829 <script type="text/javascript">     $(document).ready(         $.get("../interface/jnes/opr_res.jsp",             {                 flag:"getResList",                 groupid:"4"             },             function(data){                 var obj = eval( "(" + data + ")" );                 $.each(obj,function(index,d){                     var groupid = obj[index]["groupid"];                     var id = obj[index]["id"];                     var isSubscibe = obj[index]["isSubscibe"];                     var ordertype = obj[index]["ordertype"];                     var picture = obj[index]["picture"];                     var resname = obj[index]["resname"];                     var state = obj[index]["state"];                     $("#infolist").append('<br>'+groupid+'<br>'+id+'<br>'+isSubscibe+'<br>'+ordertype+'<br>'+picture+'<br>'+resname+'<br>'+state+'<br>');                     })                           }));     </script>     <body>         <div id="infolist">                       </div>                        </body>

开灰机撞猪
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
使用js向HTML页面动态添加数据（一）
qq_42477391的博客
12-23 3332
需求：JQuery请求的后端多个数据后，赋值给前端页面，以列表的形式展示出来 完成的简单模板 <html> <head> <script src="G:/js/jquery-3.5.1.js"></script> <script> $(function(){ var html = $("#div0").html(); $("#btn").click(function(){
js把页面内容写入页面
m0_48541096的博客
05-25 945
这是效果图，但是没有其他效果，仅仅是一种将内容用js写入页面的方法。 在data里面给出我们想要写到页面的内容，这里注意需要进行页面初始化，写一个工具函数，在工具函数里面遍历循环，创建6个Li,然后innerHTMl写入页面数据结构中 <script> var data ={ imgArr:["./image/img/1.jpg","./image/img/2.jpg","./image/img/3.jpg","./image/img/4.jpg","....
通过新建浏览器书签的方式给网页注入js代码
weixin_42318668的博客
01-03 2670
通过在浏览器中新建标签，点击新建标签的方式执行注入的js代码，可以用于解除网页复制，也可以用于制作一些小脚本去除广告之类的。
JS 添加数组元素（ 4种方法 ）
最新发布
大剑师兰特的GIS世界
04-25 6457
ush() 和 unshift() 方法会直接修改原数组。 splice() 方法同样会直接修改原数组，但它还可以用来同时删除和插入元素。 concat()方法不会改变原数组，而是返回一个新的数组。
JavaScript向页面输出内容的四种方法
热门推荐
默茉的博客
04-22 3万+
javascript可以通过不同的方式来输出数据 1.使用window.alert()输出警告框 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>弹出框</title> </head> <script> aler...
js和jq向浏览器写入的方式区别
jx1234562的博客
09-02 327
首先我在这里写一个需求，用jq在浏览器固定位置输入和修改数据？ 那再这里我就介绍一下js的几种向浏览器输出文本的方法 1.alert() 2.dociment.getELementById(id).innerHTML="要输入的文本";这个方法是向修改指定浏览器位置修改文本 3.第三种document.write(); 那么jq的输出流是怎么样的呢？ 其实原理是一样的都是获取先获取指定...
通过js动态向HTML页面填入数据
qigeshenmemingne的博客
03-03 3316
正常情况下在JSP页面完成功能会更方便一些，相对来说JSP页面功能更多一些，用起来比较方便，也会有特殊情况，需要使用HTML页面来展示数据，而且数据需要动态获取并展示，所以使用js方法与HTML页面进行数据交互。 1.在HTML页面引入css样式、jQuery等必须文件，并且要在HTML页面引入对应数据处理的js(也可以在HTML页面引入script标签，直接使用js方法，但是代码量较大，所以将H...
JS中利用localStorage防止页面动态添加数据刷新后数据丢失
12-09
非常不多说了，直接给大家贴代码了，具体代码如下所示： <!...<... <head>...meta charset="UTF-8" />...meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,...
javascript操作向表格中动态加载数据
10-14
表格的主体部分（`<tbody>`）被赋予了一个ID `tbBody`，这将是我们插入数据的目标区域。 接着，我们创建了一个JavaScript数组 `per`，它包含了多个对象，每个对象代表一行表格数据，对象的属性与表格列对应，例如 `...
JS实现动态生成表格并提交表格数据向后端
11-24
在JavaScript（JS）中动态生成表格并提交数据到后端是一项常见的前端开发任务，它涉及到DOM操作、事件处理以及与服务器的交互。以下是对这个过程的详细解释： 首先，为了实现动态生成表格，我们需要引入一个...
jsp 使用request为页面添加静态数据的实例
01-20
总结来说，这个例子展示了如何在JSP页面中利用Servlet来处理和传递数据，以及如何在JSP页面中使用这些数据来动态生成内容。这种方法使得静态HTML页面可以展示动态获取的信息，增强了网页的功能性和交互性。在实际...
向html文档写入内容的方法,localStorage使用、val()和text()取值的区别、通过js将html文档加入页面中、js(jquery)实时监听input输入框值的变化、路径传参、代码提...
weixin_39789525的博客
06-04 725
1.localStorage写入数据，三种方法var storage=window.localStorage; #需要先定义一个storage对象//方法一：写入a字段storage["a"]=1;//方法二：写入b字段storage.b=1;//方法三：写入c字段storage.setItem("c",3); #一般使用这个写入console.log(typeof storage["a"...
javascript网页自动填表_JavaScript脚本实现网页批量自动勾选及内容填写
weixin_39752941的博客
12-20 2324
我们知道，大部分学校每个学期都有教学评估。对于我这种习惯性好评，老师又真心不错的人，十多个老师的评价都是good，这是赤裸裸的重复劳动啊。于是我动了歪念头...嘿嘿嘿1.登录教学评估的网页，选择一位老师：如：2.右键查看元素，选择控制台：3.在控制台输入代码：(第一次会有安全警告，按提示输入允许的命令即可)成功！总结：我是通过js脚本获取网页元素进行点击和赋值的，因为选项非常有规律，所以代码也很简...
巧用F12调试工具js修改页面加载数目
qq284489030的博客
07-31 1万+
背景： 有147页、每页显示8条记录的总数据量，在这些数据中查找是否存在指定的一条数据。 查找：页面使用CTR+F功能可以快速查找确定是否存在目标数据，或者在F12reponse里查找，都可以。 翻页：但是需要翻页140多次；我懒，就考虑有没有每页多显示一些数据、少翻页的可能性。 步骤： 我用chrome操作，先F12打开调试工具；定位列表加载的js文件；复制js文件内容
javascript网页自动填表_学个锤子 | 从零开始填表刷票
weixin_30069113的博客
12-11 925
晚上好，同学们。之前和大家一起研究了几个在线报名表平台，随之而来又有了一个问题，当我们需要填写大量数据来完成领导安排的任务时，应该怎么办呢？接下来我们以问卷星为例。教程演示用表单地址为：https://www.wjx.cn/jq/78425667.aspx四个很简单的基础题型，两个单选，一个多选，一个填空。分析表单接下来我们来研究怎么进行自动填表。在上一节课上，我们教过大家用审查元素的方...
网页复选框设置只能选一个_网页自动填表基础教程从简单开始
weixin_39597262的博客
11-21 1110
通常来说，网页自动填表包含单选框、复选框、文本框、多行文本框、下拉列表框的自动填写。本文讲讲这些项目的自动填写方法。所用到的工具是网页自动操作通用工具。一、文本输入框及多行文本输入框的自动填写下面来说说网页需要填表的情况，比如注册页面呀，论坛页面呀等等。需要填写每项内容，如何实现文本输入框和多行文本输入框的自动填写呢。我们请出网页自动操作通用工具。然后看看需要自动填写的页面。需要在姓名和内容框实现...
NodeJs实战-待办列表(3)-前端页面填充待办数据
modelmd的博客
11-18 562
NodeJs实战-待办列表(3)-前端页面填充待办数据
原生JS向html页面添加内容节点元素代码段
奇乐软件开发踩坑日志
04-20 2万+
var div = document.createElement("div"); div.innerHTML = '&lt;a href="http://www.baidu.com/"&gt;&lt;img style="max-width:100%;" src="https://www.baidu.com/img/baidu_jgylogo3.gif"&gt;&lt;/a&gt;
【javascript 动态添加数据到 HTML 页面】
weixin_34244102的博客
04-21 1135
今天简单的学习了一下有关对象字面量的定义和 javascript 如何取出对象字面量的值的知识，javascript 动态添加数据到 HTML 页面的问题。 【学习目标】有如下的一组数据通过 Ajax 传递过来： var dataList = [ { state: 2, // 0:sharing 1:unJoin 2:sharingEnd ...
利用js将数据插入数据库
04-01
很抱歉，作为AI语言模型，我无法访问和修改数据库，这需要服务器端的编程语言和数据库管理系统。如果您需要将数据插入数据库，您需要使用服务器端编程语言（如PHP、Python、Node.js等）编写API，并使用数据库管理系统（如MySQL、MongoDB等）来存储数据。在JavaScript中，您可以使用AJAX或Fetch API将数据从客户端发送到服务器端。以下是一个使用PHP和MySQL将数据插入数据库的示例： 1. 创建一个HTML表单： ``` <form> <label for="name">Name:</label> <input type="text" id="name" name="name"> <label for="email">Email:</label> <input type="text" id="email" name="email"> <button type="submit">Submit</button> </form> ``` 2. 使用JavaScript监听表单的提交事件，并使用AJAX或Fetch API将数据发送到服务器端： ``` const form = document.querySelector('form'); form.addEventListener('submit', (event) => { event.preventDefault(); // 防止表单提交刷新页面 const name = document.querySelector('#name').value; const email = document.querySelector('#email').value; const data = { name, email }; fetch('/api/insert.php', { method: 'POST', body: JSON.stringify(data), headers: { 'Content-Type': 'application/json' } }) .then(response => response.json()) .then(data => console.log(data)) .catch(error => console.error(error)); }); ``` 3. 在服务器端使用PHP处理请求并将数据插入数据库： ``` <?php header('Content-Type: application/json'); $data = json_decode(file_get_contents('php://input'), true); $name = $data['name']; $email = $data['email']; $servername = "localhost"; $username = "username"; $password = "password"; $dbname = "myDB"; $conn = new mysqli($servername, $username, $password, $dbname); if ($conn->connect_error) { die("Connection failed: " . $conn->connect_error); } $sql = "INSERT INTO MyGuests (firstname, email) VALUES ('$name', '$email')"; if ($conn->query($sql) === TRUE) { echo json_encode(array('status' => 'success')); } else { echo json_encode(array('status' => 'error', 'message' => $conn->error)); } $conn->close(); ?> ``` 请注意，此示例仅用于演示目的，实际应用程序需要考虑安全性和可伸缩性等问题。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值