-
2020-03-27 14:30:27
HTML页面,ajax是基于id的,所有用id表示。
拿到的数据会显示在这里
<div id="test"></div>
ajax代码:
$(document).ready(function() { $.ajax({ url : "admin/get_banji.php",//后台请求的数据,用的是PHP dataType : "json",//数据格式 type : "post",//请求方式 async : false,//是否异步请求 success : function(data) { //如果请求成功,返回数据。 var html = ""; for(var i=0;i<data.length;i++){ //遍历data数组 var ls = data[i]; html +="<span>测试:"+ls.name+"</span>"; } $("#test").html(html); //在html页面id=test的标签里显示html内容 }, }) })
php后端接收ajax请求处理:
<?php include "test2.php";//这是链接数据的。 $result = mysql_query("SELECT * FROM online where class =1 "); $dataarr = array(); while($row = mysql_fetch_array($result)){ array_push($dataarr, $row); } mysql_close($con); echo json_encode($dataarr); ?>
可以测试下。记得加载JQ插件
更多相关内容 -
html前端打印
2018-02-26 19:36:57var newstr = document....//得到需要打印的元素HTML var oldstr = document.body.innerHTML;//保存当前页面的HTML document.body.innerHTML = newstr; $(".pic").offset({top:0,left:0}); $(".p...var newstr = document.getElementById("picOutDiv").innerHTML;//得到需要打印的元素HTML var oldstr = document.body.innerHTML;//保存当前页面的HTML document.body.innerHTML = newstr; $(".pic").offset({top:0,left:0}); $(".pic").width("100%"); $(".pic").height("100%"); window.print(); //document.body.innerHTML = oldstr; location.reload();
第一种打印方法:将需要打印html取出来,然后再将body的html放到变量里备用。这时可以将需要打印的html放到body中然后调整位置大小,进行打印。最后再将保存在变量里的html放回body中。这样做,body中如果引入了js,会使页面的js失效。所以不能直接放回,要直接重新加载。
var printHtml = document.getElementById("picOutDiv").innerHTML; var wind = window.open("",'newwindow', 'height=300, width=700, top=100, left=100, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=n o, status=no'); wind.document.body.innerHTML = printHtml; wind.document.getElementsByClassName("pic")[0].style.width = "100%"; wind.document.getElementsByClassName("pic")[0].style.height = "100%"; wind.print();
第二种打印方法:为了避免出现第一种方法的js失效或者重新加载,我们将再打开一个窗口来实现打印。在新的窗口中填充要打印的元素。这种方法打印的效果会有问题,高度没有100%。图片高度只有一小半。
var newstr = document.getElementById("picOutDiv").innerHTML;//得到需要打印的元素HTML $('body').children().hide(); var imgDom = $(newstr); $('body').append(imgDom); $(".pic").offset({top:0,left:0}); $(".pic").width("100%"); $(".pic").height("100%"); window.print(); $('body').children().show(); imgDom.remove();
第三种打印方法:为了避免上两种方法的缺陷,我们采用隐藏body子元素的方法。将body子元素进行隐藏,打印后再显示。
-
HTML前端接收JSON数据
2019-11-09 12:13:18从以上数据显示,前端已经拿到了后台发送过来的JSON数据,但遍历报错 对接收到的数据不再进行格式化处理,即不使用JSON.parse()格式化数据,因为后台发过来的数据已经JSON格式化了,直接传值即可。 ...从以上数据显示,前端已经拿到了后台发送过来的JSON数据,但遍历报错
对接收到的数据不再进行格式化处理,即不使用JSON.parse()格式化数据,因为后台发过来的数据已经JSON格式化了,直接传值即可。
-
html前端使用高德地图入门教程,并在地图上标记位置
2019-04-09 17:29:17准备工作 ... ... ... 为应用添加 Key,「服务平台」一项请选择「 Web 端 ( JSAPI ) 」 ... 记住这个Key,等会要用,以后可能也会用,一定要记住。...新建一个DIV,作为地图的容器(这一步和使用其他插件一样,必...准备工作
注册Key
-
首先,注册开发者账号,成为高德开放平台开发者
-
登陆之后,在进入「应用管理」 页面「创建新应用」
-
为应用添加 Key,「服务平台」一项请选择「 Web 端 ( JSAPI ) 」
-
记住这个Key,等会要用,以后可能也会用,一定要记住。
页面上的准备
- 新建一个DIV,作为地图的容器(这一步和使用其他插件一样,必须新建一个挂载点)。
- 给这个新建的div设置好宽高(这里提醒一下,可以使用弹性布局,没有影响)。
- 在body后面引入高德地图的js。
- 最后,异步初始化高德地图插件,一定要异步,使用window.onLoad。(去获取标记点的经纬度)
【注】 高德地图Api入门指南
<!-- 二、设置宽和高--> <head> <style> #container{ width: 500px; height: 500px; } </style> </head> <body> <!-- 一、新建一个容器 --> <div id="container" ></div> </body> <!--三、引入高德地图的js--> <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.8&key=您申请的key值"></script> <!--四、异步初始化高德地图插件--> <script> //初始化地图插件 window.onload = function(){ var map = new AMap.Map("container", { zoom: 15, //设置地图显示的缩放级别 center: [116.44927, 39.9584] //设置地图中心点坐标 }); // 创建一个 Marker 实例:(标记点) var marker = new AMap.Marker({ position: new AMap.LngLat(116.44927, 39.9584), // 经纬度对象,也可以是经纬度构成的一维数组[116.39, 39.9] title: "位置标题" }); // 将创建的点标记添加到已有的地图实例: map.add(marker); } </script>
好了,现在你的页面上已经出现了高德地图
-
-
HTML前端界面懒加载
2018-04-04 20:38:34DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="X-... -
在html前端页面中密码输入框,输入一个字符显示明文,过一秒后再变*号的效果如何用js实现
2018-12-07 08:00:04需要实现在修改密码的业务中,在输入框输入一个字符,先显示该字符的明文,过一秒后再转变为“*”,请问这个用js该如何实现?各位高手麻烦指导。 -
【前端】HTML详细教程(上篇)
2021-10-11 07:26:32❤️HTML必备知识详解❤️第一部分:HTML框架简介1.是什么&怎么学&用什么工具(1)什么是HTML?(2)怎么学HTML?(3)使用的工具:2.HTML的基本结构3.HTML文件的规范4.HTML的基本模板第二部分:标签1.标签... -
简单学生管理系统HTML前端页面
2020-12-01 16:40:14DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>学生管理系统</title> <style type="text/css"> *{ margin: 0; padding: 0; font-... -
html前端显示tiff
2019-09-30 15:38:19我们需要把这样的tif文件展示在前端。 后端会从某处下载这个tif文件,可以用字节数组表示这个文件。 1. 思路 思路1:修改扩展名。把tif修改为jpg,png之类的扩展名 失败,修改后直接用Chrome都无法正常展示。... -
七夕情人节表白HTML前端代码
2020-08-25 10:57:41小伙伴们七夕来了,还是单人吗?赶紧拿着代码去表白试试,说不定能成功呢?小猪在这里祝福有情人终成... 先演示一下(源码在下面) 愿意就放烟火了 下载链接: 七夕HTML5代码(改良版)_html-互联网文档类资源-CSDN下载 -
从零开始学WEB前端——HTML实战练习
2022-02-09 23:10:19在此项目中我会和大家一起从零基础开始学习前端,从后端程序员的视角来看前端,受限于作者的水平本项目暂时只会更新到前端框架VUE,不会涉及node.js。该项目适合零基础的小白或者和我一样开发网站没人写前端所以自学... -
html前端几种加密方式的整理
2016-07-20 11:48:58最近在做几个项目和银行相关的,用的加密方式是Rsa,但是发现网上找的一些库都是没办法...上面就是前端加密的几种方式,Rsa的会比较复杂,Rsa初始化的时候需要给它一个公钥,千万要记得! 文件打包下载链接: js下载 -
html前端命名规则
2017-11-18 10:51:32前端布局规范细则 一、命名规范: 1、基本要求:1)文件编码统一使用 UTF-8 编码; 2)命名时以符合语义为主要参考指标,CSS属性书写规范,采用统一风格及命名方法; 3)结构清晰,层级关系明朗,以不超过三级为... -
html前端获取Flask的session值
2019-11-01 13:37:55Flask的session值是存在于后端的,所以前端要获取需要主动向后端请求,在页面加载时,执行ajax即可。 $.ajax({ url: '/getSession', type:'POST', data:{}, dataType: 'text', success: function (data) ... -
前端(HTML css JS)开发工具及常用插件推荐
2021-11-10 00:04:21前端编程工具有很多,例如Visual Studio Code(简称VS code),hbuilder,sublime text3,notepad,webstorm等等,今天给大家推荐的是VS code VS code是一个完全免费的软件,页面简介大方,是前端开发者最受欢迎的... -
HTML前端页面颜色的四种方法,色号表
2019-01-02 09:39:50HTML前端页面颜色的四种方法,色号表 颜色的三种表示方式: (1)单词:red green black…用法: <font color="pink" size="7">AA</font> (2)rgb三原色(红绿蓝):... -
简单快速的用Java动态生成jsp/html前端页面。
2018-01-07 23:04:08首先给大家说说动态生成jsp、html的好处,大家都应该见过“淘宝”和“京东”,在每个节日会将他们菜单栏变成与节日相匹配的图片,和页面。这样就避免了项目修改完成之后再从新部署。 首先给大家看一下看一下效果图: ... -
后台返回完整html代码,前端展示
2020-11-21 16:39:08后台返回完整html代码,前端展示 如图所示: 在Response里可以看到后台返回的是完整的html文件。 若想展示在iframe框架里,可直接把请求url赋值给iframe标签里的src,如下图所示: 展示效果: -
Web前端——HTML中的超链接
2020-07-03 16:59:50DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>超链接</title> </head> <body> <!-- 超链接可以让我们从一个页面跳转到其他页面, ... -
php返回json数据到html前端
2014-07-29 11:29:04php返回json数据到html前端 简单明了,就直接贴代码了: header('Content-Type:text/json;charset=utf-8'); $str = array ( 'Name'=>'xiaolou', 'Age'=>20 ); $jsonencod -
什么是前端?前端与后端的区别?
2021-06-13 05:14:34随着互联网技术的发展,HTML5,CSS3,前端框架的应用,跨平台响应式网页设计能够适应各种屏幕分辨率,完美的动效设计,给用户带来极高的用户体验。前端技术一般分为前端设计和前端开发,前端设计一... -
web前端论文参考文献
2021-06-13 00:45:30我们 论文 结束的最后一项就是 参考文献 的撰写,很多人都不清楚怎样写 参考文献 ,下面是小编采编收集的关于web前端 论文 参考文献,欢迎大家阅读欣赏。 参考文献: [1]张璇.MOOC在线教学模式的启示与再思考[J].... -
win10 nginx部署前端项目(静态资源服务器和HTML)
2021-01-07 10:51:16win10 nginx部署前端项目(静态资源服务器和HTML) niginx的安装和启停操作参照博客:https://blog.csdn.net/qq_26666947/article/details/112272058 1、nginx部署静态资源服务器 (1)在nginx的根目录下,点击conf... -
C#后端和静态HTML前端交互的问题
2016-06-21 14:07:05大家好: 公司叫我用C#做网站的后端,负责接收json数据查询...要不要填充到前端的HTML文件显示?这些前端的HTML要不要用IIS搭建网站?还是我后台监听时响应不同的请求并调用前端不同的静态HTML文件显示回去?谢谢! -
200套web前端期末大作业 HTML+CSS+JavaScript网页设计实例 企业网站制作
2021-10-08 10:48:03一、200套HTML期末学生结课大作业作品(HTML+CSS+JS) 这五年来做了200多套(HTML+CSS+JS)网页设计的学生期末大作业,都是给学生定制的都符合学校或者学生考试期末作业的水平,都是div+css框架原创代码写的,有的有js... -
前端开发与后台交互机制
2021-06-11 15:16:16传统开发模式:一般传统上的开发协作模式有两种:一种是前端先写一个静态页面,写好后,让后端去套模板。静态页面可以本地开发,也无需考虑业务逻辑只需要实现View即可。不足是还需要后端套模板,这些前端代码后端... -
ajax实现从后台拿数据显示在HTML前端
2018-01-14 12:44:25HTML页面,ajax是基于id的,所有用id表示。 拿到的数据会显示在这里 ajax源码: $(document).ready(function() { $.ajax({ url : "admin/get_online_ganbu.php",//后台请求的数据,用的是PHP data... -
web前端html实例-实现文本框输入内容提示
2019-09-29 21:53:35比较人性化的网站一般都是比较讲究细节的,比如文本框输入内容具有提示效果,在默认情况下,文本框有提示文本,当...DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name... -
前端如何生成二维码
2022-01-10 14:47:23待完成 总结 我在网上一共查询到了三种在前端生成二维码的方式,只选择了其中一种进行了实验,其他的也应该差不多,但是得注意二维码生成之后好像要做一些清理工作。 顺便学了一下npm和webpack的打包。 欢迎访问的我... -
前端移动html网页,怎么用手机预览效果
2019-11-26 11:57:03如果仅仅是想预览直接使用chrome开发者工具就好。 如果是想在手机端访问,可以在电脑端启动server服务。然后在手机上通过访问电脑端...做好把文件改为index.html 2.命令行执行 browser-sync start --server --files ...