web前端开发，ajax请求后台数据库并返回显示

已于 2023-08-01 14:53:41 修改
阅读量525 收藏 1
点赞数 1
文章标签： ajax js javascript vue jquery
于 2021-01-04 10:48:22 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42562567/article/details/112170044
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>土壤污染重点管控系统</title>
    <link rel="stylesheet" href="css/mapIndex.css"/>
    <link rel="stylesheet" href="css/panel.css"/>
    <link rel="stylesheet" href="css/font/iconfont.css"></link>
	<link rel="stylesheet" type="text/css" href="lib/bootstrap/css/bootstrap.min.css">
	<link rel="stylesheet" type="text/css" href="lib/bootstrapTable/bootstrap-table.css">
	<link rel="stylesheet" href="lib/fancybox/jquery.fancybox-2.1.7.css" />
	<link rel="stylesheet" href="css/jquery.fancybox.css" />
	
	<script src="lib/vue/dist/vue.js"></script>
    <script type="text/javascript" src="lib/jquery/jquery.js"></script>
	<script type="text/javascript" src="lib/bootstrapTable/bootstrap-table.js"></script>
	<script type="text/javascript" src="lib/bootstrapTable/locale/bootstrap-table-zh-CN.js"></script>
    <script type="text/javascript" src="configs/publicConfig.js"></script>
	<script type="text/javascript" src="lib/jQueryPlugin/panel/panel.js"></script>
	<script type="text/javascript" src="lib/dialog/js/jquery.dialog.js"></script>
	<script type="text/javascript" src="lib/fancybox/jquery.fancybox-2.1.7.pack.js"></script>
	<!-- <script type="text/javascript" src="subhtml/quanshuifenbu/Main.js"></script> -->

    <style>
        html {
            width: 100%;
            height: 100%;
            margin: 0;
        }

        body {
            width: 100%;
            height: 100%;
            margin: 0;
        }
        
    </style>

</head>
<body>
<div style="width: 100%;height: 100%;">
	
    <!--顶部-->
    <div style="position: relative;height: 80px;z-index: 99;">
        <div class="header_tit">
            <div style="float: right;width: 50%;height: 80px;">
            </div>
        </div>
    </div>
    
	<!--表格控件-->
	<div id="mainTable" class="iframeDiv" style="padding: 10px;">
	   <div id="dataD" class="dataD" style="">
	   	<table id="mainLength" class="table table-bordered scrollTable">
			<thead>
			    <tr>
					<th data-sortable="true" data-field=""></th>
			        <th data-sortable="true" data-field="">名称</th>
			        <th data-sortable="true" data-field="">编码</th>
			        <th data-sortable="true" data-field="">县（区、市、旗）</th>
					<th data-sortable="true" data-field="">行业类别</th>
					<th data-sortable="true" data-field="">地块占地面积（m2）</th>
					<th data-sortable="true" data-field="">复核后风险等级</th>
					<th data-sortable="true" data-field="">系统判定超标地块</th>
					<th data-sortable="true" data-field="">地块规划用途</th>
			    </tr>
		    </thead>
		</table>
	   </div>
	</div>
	
</div>
<script type="text/javascript">
	var typeD="zhongyaoInfo";
	initVue();
	
	//初始化列表
	function initVue() {
		V = new Vue({
			el: "#mainTable",
			data:{
				dialogVisible: false
			},
			mounted: function() {
				this.init();
			},
			methods: {
				init: function() {
				var self = this;
					
	            //连接WebServer服务
				var serviceUrl = ServiceUrl + "/GetDataListMX";
				
				var param = {
					code: "",
					name: "",
					type: typeD
				};
							
				//通过AJAX进行数据访问
				$.ajax({
					type: "GET",
					url: serviceUrl,
					data: {info: JSON.stringify(param)},
					dataType: 'jsonp',
					success: function(result) {
						if(result) {
							staticInfoList = result.result.Table;
	
							//加载数据
							self.showData(typeD);
						} else {
							PANEL.hideLoading();
							PANEL.alert("加载数据失败");
							return;
						}
	
					},
					error: function(aa, bb, result) {
	
						PANEL.hideLoading();
						PANEL.alert("加载数据失败");
						return;
					}
				});
	                
	          },
				//将请求回的数据同步到展示页面
				showData: function() {
					$('#mainLength').bootstrapTable('destroy').bootstrapTable({
						columns: [
							[{
								align: 'center',
								formatter: function(value, row, index) {
									var rowJson = JSON.stringify(row).replace(/"/g, '&quot;');
									return "<button type='button' class='btn btn-success' style='' οnclick='showMap(" + rowJson + ")'>进入地图</button>";
								}
							},
								{
								field: 'Name',
								halign: 'center',
								align: 'center',
								rowspan: 1,
							},
							{
								field: 'Code',
								halign: 'center', 
								align: 'center',
								rowspan: 1
							},
							{
								field: 'District',
								halign: 'center', 
								align: 'center',
								rowspan: 1
							},
							{
								field: 'HY_Type',
								halign: 'center', 
								align: 'center',
								rowspan: 1
							},
							{
								field: 'DK_Area',
								halign: 'center', 
								align: 'center',
								rowspan: 1
							},
							{
								field: 'FHH_FXDJ',
								halign: 'center', 
								align: 'center',
								rowspan: 1
							},
							{
								field: 'XTPD_CBDK',
								halign: 'center', 
								align: 'center',
								rowspan: 1
							},
							{
								field: 'DK_GHYT',
								halign: 'center', 
								align: 'center',
								rowspan: 1
							}
							]
						],
						
						data: staticInfoList,
						striped: true,
						search: true, //搜索框
						searchAlign: 'right',
						//visible-search:true,//仅在可见列/数据中搜索
						pagination: true, //设置为 true 会在表格底部显示分页条。
						paginationLoop: true, //设置为 true 启用分页条无限循环的功能。
						pageSize: 12, //每页初始显示的条数
						pageList: [15, 50, 100],
					
						// showFooter:true,//显示列脚
						customSearch: function customSearch(text) { //搜索--搜索指定列
								if(text == undefined) {
								   return false;
								}
								this.data = staticInfoList;//以防前一次的搜索对后边的搜索有影响
								var arr = []//用来暂存符合搜索条件的数据
								$.each(this.data, function(index, item) { //逐个比较
									if(item.Name.indexOf(text) >= 0) {
										arr.push(item)
									}
								})
								this.data = arr;
								$('#mainLength').bootstrapTable('refresh');
								
						},
							
					});
					
				},
	
			}
			
		});
	
	}
	
	//进入地图
	function showMap(obj) {
		// alert('a')
		// return;
		window.open("index.html?ID=" + obj.ID + "",'_self');
		
	}
	
</script>

</body>
</html>

在这里插入图片描述

王八八。
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
ajax实现从后端查询数据库，把数据显示在HTML前端【回显】
云度
03-27 1万+
HTML页面，ajax是基于id的，所有用id表示。 拿到的数据会显示在这里 <div id="test"></div> ajax代码： $(document).ready(function() { $.ajax({ url : "admin/get_banji.php",//后台请求的数据，用的是PHP ...
Ajax异步请求技术实例讲解
12-09
AJAX的全称是Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。 AJAX不是新的编程语言，而是一种使用现有标准的新方法。ajax是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。 ajax是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。 ajax是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换。ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。而传统的网页（不使用ajax）如果需要更新内容，必须重载整个网页面。 在Web应用开发过
我用ajax获取后台数据并展示在前端页面的方法【源码】.pdf
11-14
我用ajax获取后台数据并展示在前端页面的方法【源码】.pdf
前端js调取数据库总结
2302_80391964的博客
03-10 545
其实一开始是完全看不懂学习计划内容是什么，也不知道怎么使用接口。之前学的ajax感觉跟这个很不一样，所以可能被网络上的视频以及文档误导了。说真的，这三周时间大部分是花在熟悉接口，使用接口上，以及怎么使用ajax。我刚开始也不知道页面一点进去要渲染的，所以这个部分写的不太好。一部分原因是我不熟悉接口，一部分是这段时间事情也有点多，请的假有点多。网上资料确实挺多的。还有一部分就是知识点不牢固，比如怎么传这个参数，怎么取消勾选，以前没有遇到过的。完善增删改查功能，复习html布局，css一些属性，以及es6。
ajax后台数据怎么返回,后台获取ajax参数 怎么返回数据
weixin_35922953的博客
08-05 2310
后台获取ajax参数后，可以通过参数查询数据库，返回一个javabean对象，然后转换成json格式返回页面：ajax部分：$(function(){$("#userlist a").bind("click",function(){var hol = $(this).attr("rel");var data = "action=getlink&id="+hol;$.getJSON("ser...
Ajax从后台获取数据在前端显示（原生js与jQuery）
热门推荐
何故的博客
05-16 2万+
1、Ajax简介 Ajax(Asynchronous Javascript And XML)=异步的 javascript 和XML ，使网页在不重新加载整个页面的情况下，对页面的局部进行刷新，传统的网页(若不使用AJAX)在打开页面时，是需要加载出此页面所有的内容。Ajax是一种新的思想， 是与服务器交换数据并更新网页局部的艺术。 2、Ajax实现步骤js原生 使用JavaScript获取浏览器XMLHttpRequest内置对象，Ajax的核心。 let xml=new XMLHttpRe
ajax根据ID查询数据库并返回Json格式数据返回js，使用append显示到页面。判断json值为[]或者[[]]的问题。
@必意玲
05-16 7638
ajax根据ID查询返回json并显示，值为[]或者[[]]怎么判断 Java后台代码 @ResponseBody @RequestMapping(value=&quot;/queryCouponState&quot;,produces = &quot;text/html;charset=utf-8&quot;) public String queryCoupon( HttpServletR
使用ajax将后台返回的json数据类型在前端页面显示
qq_53542496的博客
06-19 4405
使用ajax将后台返回的json数据类型在前端页面显示
如何用ajax请求后台数据的两种全网最实用且详细的写法
前端程序员、项目经理、人工智能博主
10-31 4656
第一种用最简介方便的$.post请求后端数据 $.post("你的url地址",{ data//填写后台给的参数 },function(res){ console.log(res) }) 第二种通过$.ajax的写法请求后端数据 $.ajax({ type: 'post', url: "你的url地址", cache: false, data: {//后台给的参数}, dataType: 'json',//通过json格式返回
ajax取到data的值
qq7758521fang的博客
03-29 1万+
var zhuceFlag=JSON.stringify(data);文章来源：https://blog.csdn.net/t0404/article/details/534254171  获取Ajax请求返回的类型为map  a   直接用逗号点返回map的key(result)，就可以获取value值了      success:function(data){          alert(d...
通过ajax查询mysql数据并将查询数据返回
jiweidelu的博客
10-23 754
通过ajax查询mysql数据，并将返回的数据显示在待选列表中，再通过选择最终将选项加入到已选区，可以用在许多后台管理系统中。调用Multiselect插件。MYSQL数据表结构。Ajax查询数据操作。
基于微信小程序的美容预约平台（小程序前端源码+后端源码+数据库+运行截图）.zip
04-01
本项目是一个前后端分离的一个项目，前端是微信小程序语言，后端是java语言写的Java web程序。 技术栈： 用到了spring boot技术栈。即springboot+springmvc+mybatis-plus为主要技术。Mybatis-plus可以在操作单表时极大优化效率，无需写sql语句。 ②　数据库：Mysql数据库 ③　前后端交互：前后端交互主要前端使用微信小程序中ajax请求，即wx.request以json格式向后台传递数据。后端接收后进行相应处理。 小程序功能： ①　信息页： 主要是根据服务类型进行服务项目的展示，用户点击服务项目可以查看项目详细信息，点击预定可以进行服务的预定。 ②　订单页： 订单页允许用户查看自己至今的订单列表，点击订单可以查看订单详细信息。如果订单未过期允许取消订单。 我的页： ③　允许用户登陆后查看自己的信息即钱包余额。点击修改资料即可跳转到资料修改页。 注意：小程序大部分页面会检查用户登陆状态，未登录提示用户登陆后操作！！！
Ajax异步请求实战案例讲解
06-17
本动手实战项目介绍了如何在前端使用Ajax向后端请求数据并展示在Web页面，并且在Web页面提供了“增、删、查、改”的功能。 ? 一、融汇贯通 将Python语言和Django基础知识，以实际应用为媒介，有机组织、融汇贯通。让你的理论与实践结合起来，由知道变成会用。使用了大量的Django高级特性和Bootstrap前端框架，展示了真实的项目部署过程。 ? 二、贴近实战 本系列课程为练手项目实战：学生管理系统v3.0的开发，项目包含了如下几个内容：项目的总体介绍、当前项目的介绍，Ajax介绍和应用场景、Ajax常见的应用案例讲解、实战项目的初始化和项目准备、使用Ajax访问后台的接口并获得数据展示在web页面、在前端使用Ajax对后端进行请求完成对学生数据的增删改查。课程具有极强的实战性。 ? 三、课程亮点 在本案例中，最大的亮点在于使用了Ajax的异步请求，理解Ajax的使用场景和常见的语法规范，对Ajax理解后，为后期前后端分离的架构做了技术储备 ? 学习收获： 在学习完本系列中所有的课程后，从前端页面的实现，到后台代码的编写，再到数据库的管理，一人可以搞定一个公司网站的所有事情，
MVC+WebAPI+EasyUI+Knockout后台管理系统.zip
09-22
基于Asp.Net MVC4.0 + WebAPI + Knockout 技术，采用EasyUI为前台开发展示UI，Knockout主要负责前端的逻辑交互，再结合jQuery Ajax进行提交数据请求。 1、基于 ASP.NET MVC4.0 + WebAPI + EasyUI + Knockout 的架构...
《Java-Web应用开发基础》教学课件08课程设计实例.pptx
05-30
能够综合运用前面7个模块所学的知识进行Java Web项目开发，能够把前端开发技术运用到项目的开发过程中。 《Java-Web应用开发基础》教学课件08课程设计实例全文共73页，当前为第3页。 8.1回顾和思考 经过前面7个模块...
2024-04-22(AJAX)
cxr的博客
04-22 965
使用浏览器的XMLHttpRequest对象和服务器进行通信浏览器网页中，使用Ajax技术（XMLHttpRequest对象）发起获取服务器数据的请求，服务器将数据给前端，前端拿到数据后，展示到网页。事件委托，会把一个或者一组元素的事件委托到它的父层或者更外层元素上，真正绑定事件的是外层元素，而不是目标元素。当事件响应到目标元素上时，会通过事件冒泡机制从而触发它的外层元素的绑定事件上，然后在外层元素上去执行函数。
AJAX——案例
最新发布
weixin_48719464的博客
04-23 332
需求：尽可能同时展示所有商品分类到页面上index.html代码index.css代码。
AJAX——事件循环（EventLoop）
weixin_48719464的博客
04-23 421
1.什么是事件循环？执行代码和收集异步任务，在调用栈空闲时，反复调用任务队列里回调函数执行机制2.为什么有事件循环？JavaScript是单线程的，为了不阻塞JS引擎，设计执行代码的模型3.JavaScript内代码如何执行？执行同步代码，遇到异步代码交给宿主浏览器环境执行异步有了结果后，把回调函数放入任务队列排队当调用栈空闲后，反复调用任务队列里的回调函数。
eclipse ajax 与后台数据交互
05-09
Eclipse是Java开发工具中广泛应用的一款集成开发环境，Ajax是一种基于JavaScript和XML技术的前端开发方案，而后台数据交互则是指前端与后端进行数据交互的过程。在使用Eclipse进行Ajax与后台数据交互的开发过程中，需要注意以下几点。 首先，在Eclipse开发环境中需要引入所需的Ajax框架和相关依赖库，例如jQuery、Prototype、Dojo等，以便支持前端与后端进行数据交互。 其次，需要编写相应的JavaScript代码，通过Ajax技术向后端发送请求并获取数据。这些代码需要结合后端提供的API接口进行开发，以确保数据交互过程的正确性和准确性。 接着，需要在Eclipse中编写后端代码，实现API接口中定义的处理逻辑，例如从数据库中获取数据、对数据进行格式化等。对于Java开发者而言，可以使用Servlet、Struts、Spring等框架来实现后端代码的编写。 最后，在将前端和后端代码整合之前，需要进行一系列的调试和测试过程，以确保代码的运行稳定性和可靠性。 总之，通过在Eclipse中使用Ajax技术与后端进行数据交互，可以有效地提高前端开发的效率和可靠性，从而实现更为优秀的Web应用程序的开发。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

王八八。

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值