网页

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"><title>欢迎使用查询系统</title><link rel="stylesheet" href="./layui/css/layui.css"><script src="/layui/layui.js"></script><script src="/jquery/jquery-3.2.1.js"></script><script src="/js/excel.js"></script><div class=layui-field-box><table class="layui-table"><colgroup><col width="150px"><col width="150px"><col width="150px"><col width="150px"></colgroup><thead><tr><th>ID</th><th>NAME</th><th>WEIGHT</th> <th>PRICE</th> </tr> </thead> <tbody></tbody></table>
</div> </body>
</html>

js中动态生成数据到前台(加载时执行)

$(function(){var tabletTbody = $(".layui-table").find('tbody');tabletTbody.empty();$.getJSON("/goods/showGoods",function(json){// 下面使用each进行遍历$.each(json, function(i, item) {var vTr = "<tr><td>" + item.id + "</td><td>" + item.name+ "</td><td>" + item.weight+"</td><td>" + item.price+ "</td></tr>"tabletTbody.append(vTr);});})
})

controller定义为可返回object类似@RestController

package com.yayun.controller;import javax.annotation.Resource;import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;import com.yayun.service.GoodsService;@RestController
@RequestMapping("/goods")
public class GoodsController {@Resourceprivate GoodsService goodsService;@RequestMapping("/showGoods")public Object toIndex(String name){return goodsService.getGoodsByName(name);}
}

其中在spring-mvc中需要配置自动转换，能将object成json(使用的是fastjson)

<!-- 启用默认配置 --><mvc:annotation-driven><mvc:message-converters register-defaults="true"><bean class="org.springframework.http.converter.StringHttpMessageConverter"><property name="supportedMediaTypes">     <list>     <value>text/plain;charset=UTF-8</value>     <value>text/html;charset=UTF-8</value>     </list>     </property></bean><!-- 配置Fastjson支持 --><bean class="com.alibaba.fastjson.support.spring.FastJsonHttpMessageConverter"><property name="features"><list><value>WriteMapNullValue</value><value>QuoteFieldNames</value></list></property></bean></mvc:message-converters></mvc:annotation-driven>

jquery 后台数据到前台展示相关推荐

解决vant sku 后台数据与前台数据绑定以及金额以分为单位问题
小白一只,在做电商项目使用vant的sku组件时遇到了很多问题,其中主要的就是数据的的绑定与格式问题,并不知道后台如何来传给我sku的数据格式,在网上大多都是前台简单的死数据实现的基础sku,并没有后 ...
vue 动态路由的实现（后台数据，前台拿到数据生成侧边栏）
之前开发的vue项目路由都是写在前台的,现在公司需要把路由放在后台生成,前台用接口拿到数据,渲染成路由数据,生成左侧菜单,我之前也是参照大师兄的一篇博文,写的,然后用的过程中就有一些问题出现,比如登录 ...
simditor存储数据到前台展示去掉标签
怎么处理都是在前台带标签的,后来在数据库中看数据是这样的: <p>服务</p> 展示到页面也时把这个字段传过去的值变成了字符串,这个可以我最后就是直接在后台将这个字段的内容进行 ...
js前台与后台数据交互-前台调后台
网站是围绕数据库来编程的,以数据库中的数据为中心,通过后台来操作这些数据,然后将数据传给前台来显示出来(当然可以将后台代码嵌入到前台).即: 下面就讲前台与后台进行数据交互的方法,分前台调用后台方 ...
easyui panel异步获取后台数据在前台显示
我在使用easyui的时候,想做一个向下图所示的效果,这个panel的样式已经做好了,想从后台异步获取json数据,然后填入到文本框中,不知道哪位大神能给点指导?万分感谢! 放入表单中,使用form对 ...
ajax数据字符串拼接,ajax请求到后台数据，前台不用拼接字符串，一样显示到页面...
pageEncoding="utf-8"%> String path = request.getContextPath(); String basePath = reques ...
servlet向ajax传递数据库,一、JSP、servlet、SQL三者之间的数据传递(前台与后台数据交互)...
背景: 目前业界很流行的MVC(model-view-control)开发模式,理解为模型是Bean, 视图是 Html/Jsp, 控制是Servlet, 关联数据库的Dao web的运行机制: 数 ...
vue绑定后台数据ajax,vueJS 获取后台数据绑定data
//vue 环境安装 http://blog.csdn.net/u013182762/article/details/53021374 一开始使用安装环境配置一些东西 ,后来发现太麻烦了 . 直接C ...
【wpf】如果让Bingding 如何让后台数据强制更新界面
前言这里讲的不是简单的后台数据通知前台变换,而是在一段代码中,我的一个属性发生多次变化,前台也必须发生多次变化. 需求我调用http,有个接收返回值的TextBox,但是我想在点击Post按键一开 ...

jquery 后台数据到前台展示

网页

js中动态生成数据到前台(加载时执行)

controller定义为可返回object类似@RestController

其中在spring-mvc中需要配置自动转换，能将object成json(使用的是fastjson)

jquery 后台数据到前台展示相关推荐

最新文章

热门文章