精华内容
下载资源
问答
  • 前端获取后端数据

    千次阅读 2021-04-16 23:49:54
    前端获取后端数据 前阵子做个项目,因为涉及到前端代码,奈何前端知识有限,有个问题搞了好久。 前端的js里需要一个数组,我后端都封装好了,但是这短短的距离我却不知道怎么拿过去前端的js。 用了网上一个不太友好...

    前端获取后端数据

    前阵子做个项目,因为涉及到前端代码,奈何前端知识有限,有个问题搞了好久。

    前端的js里需要一个数组,我后端都封装好了,但是这短短的距离我却不知道怎么拿过去前端的js。

    用了网上一个不太友好的方法:

    • 先用input从后端拿到前端的body

      <input type="hidden" th:value="${address}" id="address"/>
      
    • 再用document.getElementById拿到js,但是这样如果是传数组会出错

      var address = document.getElementById("address").value;
      

    正好今晚周末,宿舍的前端大佬实习回来,我问了一下前端一般都是怎么拿到后端传过来的数据。

    接下来便是一顿操作:

    • 首先导入JQuery

    • 再写ajax代码访问后端接口

      $.ajax({
              url:'/heap',	//这是后端接口的url
              method:'get',
              success:function (res) {
                  //res便是的数据便是后端拿到的数据
                  //这里需要注意:res为局部变量,
                  //所以需要在方法外定义一个变量把res赋值给他,才能在方法之外使用。
              },
          })
      
    • 后端接口便是我们java开发最熟悉不过的controller类了

      //测试接口
          @RequestMapping("/heap")
          public String heap(){
              String adds = "前端获取的res为该值";
              return adds;
          }
      

    大功告成!
    掌声

    展开全文
  • Hbuilder X 前端获取后端数据

    千次阅读 2020-09-14 13:43:59
    Hbuilder X 前端获取后端数据 1.创建appUser.js文件 // 如果没有通过拦截器配置域名的话,可以在这里写上完整的URL(加上域名部分) let getAppUserUrl = '/user/getAppUser'; // 此处第二个参数vm,就是我们在页面...

    Hbuilder X 前端获取后端数据

    1.创建appUser.js文件

    // 如果没有通过拦截器配置域名的话,可以在这里写上完整的URL(加上域名部分)
    let getAppUserUrl = '/user/getAppUser';
    
    // 此处第二个参数vm,就是我们在页面使用的this,你可以通过vm获取vuex等操作,更多内容详见uView对拦截器的介绍部分:
    // https://uviewui.com/js/http.html#%E4%BD%95%E8%B0%93%E8%AF%B7%E6%B1%82%E6%8B%A6%E6%88%AA%EF%BC%9F
    const install = (Vue, vm) => {
    	// 此处使用了传入的params参数,一切自定义即可
    	let getAppUser = (params = {}) => vm.$u.post(getAppUserUrl, params);
    	
    	// 将各个定义的接口名称,统一放进对象挂载到vm.$u.api(因为vm就是this,也即this.$u.api)下
    	vm.$u.apiAppUser = {getAppUser};
    }
    
    export default {
    	install
    }
    

    2.在mian.js中引入appUser.js文件并且use

    // http接口API抽离,免于写url或者一些固定的参数
    import httpApi from '@/common/api/appUser.js'
    Vue.use(httpApi, app)
    app.$mount()
    

    3.vue文件书写前端获取界面

    <template>
    	<view class="content">
    		<view class="">
    			<u-button @click="btnClick" data-name="3333" :loading="btnStyle.loading" :plain="btnStyle.plain" :shape="btnStyle.shape" 
    			:size="btnStyle.size" :ripple="btnStyle.ripple"
    			:hairLine="btnStyle.hairLine" :type="btnStyle.type">获取后台用户数据</u-button>
    		</view>
    		<view class="text-area">
    			<text class="title">
    				{{appUser}}
    			</text>
    		</view>
    		<view class="link-demo">
    		</view>
    	</view>
    </template>
    
    <script>
    	export default {
    		data() {
    			return {
    				title: '后端返回用户信息',
    				appUser: {userName: '初始化信息'},
    				btnStyle: {
    					hairLine: true,
    					type: 'default',
    					size: 'default',
    					shape: 'square',
    					plain: false,
    					ripple: false,
    					loading: false,
    				},
    				zcarRegist: {registName: '获取信息'},
    				hotelUser: {registName: '获取信息'}
    			}
    		},
    		onLoad() {
    			
    		},
    		methods: {
    			btnClick () {
    				this.$u.apiAppUser.getAppUser().then(req => {
    					console.log('获取用户信息', req)
    					if (req) {
    						this.appUser = req
    					}
    				})
    			},
    		}
    	}
    </script>
    
    <style lang="scss" scoped>
    	.content {
    		display: flex;
    		flex-direction: column;
    		align-items: center;
    		justify-content: center;
    		padding: 40rpx;
    	}
    
    	.logo {
    		height: 200rpx;
    		width: 200rpx;
    		margin-top: 100rpx;
    		margin-left: auto;
    		margin-right: auto;
    		margin-bottom: 50rpx;
    	}
    
    	.text-area {
    		display: flex;
    		justify-content: center;
    	}
    
    	.title {
    		font-size: 28rpx;
    		color: $u-content-color;
    	}
    
    	.link-demo {
    		margin-top: 80rpx;
    	}
    </style>
    
    

    4.后端服务层

    package com.smzz.modules.app.service;
    
    import org.springframework.stereotype.Service;
    
    import com.smzz.modules.app.domain.ZcarRegist;
    
    @Service
    public class ZcarRegistService {
    	public static ZcarRegist getZcarRegist () {    //初始化
    		ZcarRegist zcarRegist = new ZcarRegist();  //new一个对象
    		/** 赋值*/
    		zcarRegist.setZcarType("奥迪");
    		zcarRegist.setZcarStyle("SUV");
    		zcarRegist.setZcarPut((float) 1.0);
    		zcarRegist.setZcarPai("自动挡");
    		zcarRegist.setZcarSafe("商业险");
    		zcarRegist.setZcarStyle("SUV");
    		zcarRegist.setZcarPay((float) 220);
    		zcarRegist.setZcarArea("乌鲁木齐");
    		zcarRegist.setZcarSet((long) 7);
    		return zcarRegist; 
    	}
    }
    
    
    展开全文
  • 微信小程序前端获取后端数据

    千次阅读 2019-01-26 19:57:37
    <!--index.wxml--> <view>{{webMessage}} <button bindtap="getMessage"> 测试 ... protected void service...这个测试是对于小程序如何获取到服务器内容并输出   如有错误望告知,非常感谢

     

    <!--index.wxml-->
    <view>{{webMessage}}</view>
    <button bindtap="getMessage"> 测试 </button>
    

     

    //index.js
    Page({
      getMessage: function(){
        var self = this
        wx.request({
          url: 'http://localhost:8080/demo', // 仅为示例,需填写自己服务器的地址
          data: {
          },
          header: {
            'content-type': 'application/json' // 默认值
          },
    
          success(res) {
            console.log(res.data);      //打印到控制台
            self.setData({
              webMessage : res.data      //发送到wxml
            })
          }
        })
    
      }
    
    })
    
    
    
      
    

     

    此处使用jsp,服务器为tomcat 

    
    import java.io.IOException;
    
    import javax.servlet.ServletException;
    import javax.servlet.http.HttpServlet;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    
    public class DemoServlet extends HttpServlet{
    
    	@Override
    	protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    		response.getWriter().write("hello world");  //在service对请求进行响应
    	}
    	
    }

     

    这个测试是对于小程序如何获取到服务器内容并输出

     

    如有错误望告知,非常感谢

    展开全文
  • 首先安装axios npm install axios 定义request.js request.js import axios from 'axios' const instance = axios.create({ baseURL: "http://localhost:8081", //服务器ip...import request from '@/utlis/r

    首先安装axios

     npm install axios

    定义request.js

    import axios from 'axios'
    
    const instance = axios.create({
        baseURL: "http://localhost:8081", //服务器ip及端口号
        timeout: 3000,
    })
    
    
    export default instance;

    请求工具类

    import request from '@/utlis/request' //引入定义的request.js
    
    export function getMapping(query) {
        return request({
            url: url,
            method: 'get',
            params: query
        })
    }
    
    export function postMapping(data) {
        return request({
            url: url,
            method: 'post',
            data
        })
    }
    
    export function deleteMapping(query) {
        return request({
            url: url,
            method: 'delete',
            params: query
        })
    }
    
    export function putMapping(data) {
        return request({
            url: url,
            method: 'put',
            data
        })
    }

    项目中使用

    import {postMapping} from '@/utils/requestUtils'
    
    methods:{
          getUserList () {
            postMapping('/system/user',this.queryList)
              .then(res => {
                this.userList = res.data.data
              })
          },
    }
    
    

    点我查看跨域问题解决方案

    展开全文
  • 第一种情况,比如后端传给前端的是{2:"abc"} 第二种情况,比如后端传给前端的是{"01":abc}
  • 前端获取后端本地代码调试之路

    千次阅读 2019-08-29 17:57:08
    前端获取后端本地代码调试之路 本人刚入码圈的第一年时光,平时记录下自己工作中遇到的问题,顺便给大家分享一下解决方式~ 请多多指教交流 *_* 与前端的联调 因为项目是前后分离的,要与前端进行接口联调,想在...
  • 以ASP.NET的MVC为例,利用jQuery的Ajax方法,1.前端后端分别获取文本数据及数据库数据;2.前端数据传递给后端
  • 前端获取后端16位主键id,后3位四舍五入 项目开发中,前端获取到数据中的16位主键id后,后3位自动四舍五入。排除后发现问题。 https://www.zhihu.com/question/36680964 有说明。 原因的是后端数据是BigDecimal类型...
  • 前端后端请求数据,而返回的Bean中有的属性为Null值,如图 一般遇到这种情况,是要尽量避免向前端传Null值的,因为前端对这样的数据处理起来很麻烦,所以一般情况下我们要么选择不返回这条属性,或者返回一个空...
  • 前端请求后端接口获取BigDecimal类型字段数值时丢失精度,例如:5999.00变成5999、5999.50变成5999.5。 2、解决方法: 在字段上添加 @JsonFormat(shape = JsonFormat.Shape.STRING)注解,在序列化数据时会以String...
  • 前端笔记-freemarker模板获取后端数据及提交数据

    千次阅读 多人点赞 2019-12-09 10:54:52
    这里面表单的数据都是从后端获取的,点获取数据,会调用getRecord方法从数据库获取数据。 点击提交备注,是备注可以让用户填写。 提交后,更新数据库中的数据。 在freemarker中使用${xxxx},这种方式获取单条的...
  • application.yml中进行以下配置 spring: jackson: date-format: yyyy-MM-dd hh:mm:ss time-zone: GMT+8 使用注解 @JsonFormat(pattern = "yyyy-MM-dd",time-zone="GMT-8") private Date createDate;...
  • //获取cookie中的参数 function getCookiesPbyName(s) { var strcookie = document.cookie; strcookie = strcookie.replace(/\ +/g, ""); strcookie = strcookie.replace(/[\r\n]/g, ""); var ...
  • 前端后端数据交互的方式之ajax

    千次阅读 2019-10-02 23:33:36
    前端后端数据交互的方式之Ajax  对于前端学习而言,CSS+HTML+JavaScript的学习在自我学习的情况下掌握也不是很难,但是想要实现前后端的数据交互在没有指导的情况下学习会是一头雾水。接下来就让我来浅谈一下...
  • 下面举的例子就是使用jQuery Ajax和Python Flask进行前后端交互时,前端提交表单数据后端后端返回JSON数据前端前端GET提交表单数据: # GET请求 var data = { "name": "test", &...
  • APICloud前端后端数据传递

    万次阅读 2017-03-28 19:13:17
    这里只是简单了解了一下APICloud,可能说的不完整。APICloud提供了api.ajax方法来实现和后台交互...服务端提供json格式的API接口,通过api.ajax获取服务端数据(json格式),解析后填充到APP中实现前台和后台数据交互。
  • 现在前端开发过程中,使用到树结构的概率还是很高的,现在的后端开发往往是直接返回一个大的数组给你自 己组合你想要的数据结构,而不会帮你组装你想要到数据结构返回的,那么就需求前端自己处理数据, 将一个大的数组...
  • 前端后端数据交互的方式之Ajax

    千次阅读 2020-03-11 18:01:19
    web前端后端是怎么连接的 网站数据处理主要分为三层。 第一层,表示层,这部分可以用HTML代码,CSS/Javascript代码来实现等。通过前端代码可以实现网页的布局和设计。这层又可以称为显示层。也就是你用浏览器打开...
  • 后端接口数据处理,对于数组对象 下面为后端转过来的一个扁平数据 var data = [ { id: '1', staffName: '陈三三', trueProRank: { id: "11", description: "交警", codeIndex: 11, category: "警务人员", ...
  • 从api接口正确返回中写入 methods:{ btn () { queryservice(list) .then((res) => { this.serve = res.data for (let i = 0 ;i < this.serve.length;... this.serve[i].createTime = this.serve[i]....
  • 效果图: js ajax请求到后端获取到map,然后在ajax success 返回函数通过$("#id").val(data.key) 后端传值:
  • 比如数据分为A/B/C/D/E五种类型甚至更多,五种数据类型的属性大部分相同,但是每一种都有自己的特殊属性,现在需要实现另个相关功能,需要前端提供从接口中获取回来的数据,但是每一种类型要传给后端数据都不相同...
  • 前端后端获取数据的三种方法:ajax、axios、fetch 1、jQuery中的ajax get方法: $.ajax({ url:"v4/api/film/now-playing?t=1539401039415&page=1&count=5",  type:"GET",  success:(result)=>...
  • 回忆一下遇到的坑: 1.<form>标签下的<input>、<textarea>等标签必须带有name属性才能被form捕捉提交。 2.POST方法提交时要用request.form来获取,而用GET方法则用...前端后端数据交互,最常用...
  • thymeleaf获取后端数据

    千次阅读 2019-12-17 09:19:56
    通常需要从后端拉取数据形成下拉框 当返回元素是 list userNameList = userServiceImpl.findUserName() <select> <option th:each="value,iter:${@userServiceImpl.findUserName() }" th:value="${value}...
  • 大家要用到Handlebars 这里推荐教程网站 http://www.cnblogs.com/iyangyuan/p/3471300.html
  • vue 获取后端数据

    千次阅读 2018-03-18 16:01:00
    1、vue-resource从后端请求我们...模拟后端数据,启动测试服务器 注意哦:最新的(我用的3.6)webpack 的build目录下删除了dev-server.js , 在webpack.dev.conf.js这个文件中编辑。 圈1//webpack.dev.conf.js ...
  • 前端后端接口的交互案例

    万次阅读 多人点赞 2018-07-12 21:35:01
    一、案例描述 ...前端访问后端接口通过后端提供的的URL 二、主要代码 1、前端页面 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;login.h...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 138,343
精华内容 55,337
关键字:

前端获取后端数据