精华内容
下载资源
问答
  • 后端交互
    2020-07-22 14:27:13

    一、首先在前端创建ajax

    $.ajax({
            url:root+'/app/desktop/getData.action',
            async:false,
            success:function (data,type) {
                var obj = eval('('+data+')');
                news = obj.newsCount;
                report = obj.reportCount;
                userReport = obj.findAccount;
            }
        });
    

    这里设置async为false的目的是可以把json的值赋值给函数外部变量,同时使用eval函数使得可以使用obj.key得到value

    二、在后端处理ajax请求

        @ResponseBody
        @RequestMapping("/getData.action")
        public Object getDate(){
            //平台文章待审查数
            Map map = new HashMap();
            Map<String, Object> params1 = new HashMap<>();
            params1.put("isApprovalSearch",0);
            params1.put("isDeleted",0);
            List<TAppSysNews> news = appSysNewsService.getList(params1);
            int newsCount = news.size();
            return map;
    

    采用@ResponseBody可以直接以json的格式返回给前端,而不需要其他的复杂处理

    三、前端处理返回的json串并且使用

        document.getElementById("approveNews").innerText="待审查的平台文章("+news+")";
        document.getElementById("roadReport").innerText="路况上报记录("+report+")";
        document.getElementById("approveFind").innerText="待审核的用户文章("+userReport+")";
    

    这里是希望把得到的json数值赋值给jsp页面,在jsp中已经有相关的id

    <td width="33%"><a id="approveNews" href=javascript:void(0)></a></td>
    <td width="33%"><a id="roadReport" href=javascript:void(0)></a></td>
    <td><a id="approveFind" href=javascript:void(0)></a></td>
    

    如果是希望只添加文本内容,则使用innerText的方式,如果是希望加入html标签,则需要使用innerHtml

    更多相关内容
  • 前端和后端交互过程

    千次阅读 2022-03-01 11:02:57
    后端接收到请求之后,后端通过node里面的mysql模块链接数据库, ③数据库检测到请求,通过node的mysql模块给后端服务器返回数据, ④后端服务器接收到数据之后,将数据响应到前台页面, ⑤前台页面通过art...

    1.通过html和css编写前台页面,通过js添加动态效果

    2.通过node.js和express框架搭建静态服务器

    3.通过mysql进行数据的存储

    过程:

    ①前端通过ajax发起请求给后端,

    ②后端接收到请求之后,后端通过node里面的mysql模块链接数据库,

    ③数据库检测到请求,通过node的mysql模块给后端服务器返回数据,

    ④后端服务器接收到数据之后,将数据响应到前台页面,

    ⑤前台页面通过artTemplate模板引擎渲染到前台页面上。

    展开全文
  • Layui form与后端交互

    千次阅读 2022-06-14 09:19:25
    通过AJAX与后端交互 1.以下代码是,点击提交按钮后弹框 2.截图如下: 3.通过AJAX与后端交互,修改前端代码如下: 4.后端flask接收前端提交的数据: from flask import Flask, render_template, request, jsonify app...

    一. Layui form 

    1.Layui 表单-form

    <div class="layui-form-item">
      <label class="layui-form-label">标签区域</label>
      <div class="layui-input-block">
        <input type="text" name="title" required lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">  
      </div>
    </div>

    type-value对应值属性

    form-type类型
    text输入框
    password密码框
    checkbox

    复选框;加参数

    lay-skin:"primary" 原始风格

    lay-skin:"switch"  开关风格,lay-text="开启|关闭" 开关风格设置文本内容

    radio单选框

    layui字段

    required注册浏览器所规定的必填字段
    lay-verify注册form模块需要验证的类型
    class="layui-input"layui.css提供的通用CSS类

    2.Layui 选择框

    <select name="city" lay-verify="" lay-search>
      <option value="">请选择</option>
      <option value="010">layer</option>
      <option value="021" disabled>form</option>
      <option value="0571" selected>layim</option>
      <optgroup label="其他">
        <option value="0001">0001</option>
      </optgroup>
    </select> 
    lay-search开启搜索匹配功能
    value=""预留“请选择”的提示空间
    disabled禁用选择
    selected默认选择项
    optgroup给select分组

    3.文本域

    <textarea name="" required lay-verify="required" placeholder="请输入" class="layui-textarea"></textarea>

    class="layui-textarea":layui.css提供的通用CSS类

    二. 利用工具快速构建表单

    打开网址:Pear Admin Layui

    找到开发工具--》表单构建

    将代码复制到html文件中,修改对应name的值,代码如下:

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>layui-form</title>	
    		<link rel="stylesheet" href="../static/layui-v2.6.8/layui/css/layui.css">
    	</head>
    	<body>
    		<div class="layui-form">
    			
    			<form class="layui-form" action="" onsubmit="return false">
    			  <div class="layui-form-item">
    			    <label class="layui-form-label">输入框</label>
    			    <div class="layui-input-block">
    			      <input type="text" name="inputText" required  lay-verify="required" placeholder="请输入输入框内容" autocomplete="off" class="layui-input">
    			    </div>
    			  </div>
    			  <div class="layui-form-item">
    			    <label class="layui-form-label">密码框</label>
    			    <div class="layui-input-block">
    			      <input type="password" name="inputPassword" required  lay-verify="required" placeholder="请输入密码框内容" autocomplete="off" class="layui-input">
    			    </div>
    			  </div>
    			  <div class="layui-form-item">
    			    <label class="layui-form-label">选择框</label>
    			    <div class="layui-input-block">
    			      <select name="inputSelect" lay-verify="required" lay-search>
    			        <option value=""></option>
    			        <option value="0">北京</option>
    			        <option value="1">上海</option>
    			        <option value="2">广州</option>
    			        <option value="3">深圳</option>
    			        <option value="4">杭州</option>
    			      </select>
    			    </div>
    			  </div>
    			  <div class="layui-form-item">
    			    <label class="layui-form-label">复选框</label>
    			    <div class="layui-input-block">
    			      <input type="checkbox" name="inputCheckbox" title="写作">
    			      <input type="checkbox" name="inputCheckbox" title="阅读" checked>
    			      <input type="checkbox" name="inputCheckbox" title="发呆">
    			    </div>
    			  </div>
    			  <div class="layui-form-item">
    			    <label class="layui-form-label">开关</label>
    			    <div class="layui-input-block">
    			      <input type="checkbox" name="inputSwitch" lay-skin="switch">
    			    </div>
    			  </div>
    			  <div class="layui-form-item">
    			    <label class="layui-form-label">单选框</label>
    			    <div class="layui-input-block">
    			      <input type="radio" name="inputRadio" value="男" title="男">
    			      <input type="radio" name="inputRadio" value="女" title="女" checked>
    			    </div>
    			  </div>
    			  <div class="layui-form-item layui-form-text">
    			    <label class="layui-form-label">文本域</label>
    			    <div class="layui-input-block">
    			      <textarea name="inputTextarea" placeholder="请输入内容" class="layui-textarea"></textarea>
    			    </div>
    			  </div>
    			  <div class="layui-form-item">
    			    <div class="layui-input-block">
    			      <button class="layui-btn" lay-submit lay-filter="formSave">立即提交</button>
    			      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    			    </div>
    			  </div>
    			</form>
    			
    		</div>
    		
    		<script src="../static/layui-v2.6.8/layui/layui.js" charset="utf-8"></script>
    
    		 
    		<script>
    		  layui.use('form', function(){
    		    var form = layui.form;
    		    form.on('submit(formSave)', function(data){
    		      layer.msg(JSON.stringify(data.field));
    		      return false;
    		    });
    		  });
    		</script>
    		
    	</body>
    </html>
    

    三.通过AJAX与后端交互

    1.以下代码是,点击提交按钮后弹框

    		<script>
    		  layui.use('form', function(){
    		    var form = layui.form;
    		    form.on('submit(formSave)', function(data){
    		      layer.msg(JSON.stringify(data.field));
    		      return false;
    		    });
    		  });
    		</script>

     2.截图如下:

    3.通过AJAX与后端交互,修改前端代码如下:

    <script>
      layui.use('form', function(){
    	var form = layui.form,  //加载表单
    		$ = layui.$;              //加载jquery
    	
    	form.on('submit(formSave)', function(data){//监听按钮
    	  $.ajax({
    		url:"/submit-form-submit",  //提交请求的URL
    		type:"post",         //请求方式get,post,put,delete等
    		data:data.field,    //提交的表单数据
    		success:function(result){
    			if (result.success){
    				layer.msg(result.msg, { icon: 1, time: 2000, title:'成功' })  //返回数据成功时弹框
    			}
    			else{
    				layer.msg(result.msg, { icon: 2, time: 2000, title:'失败' }) //返回数据失败时弹框
    			}
    		},
    		error:function(result){
    			alert("接口错误!!!"); //无返回或处理有报错时弹框
    		}
    		});
    	  return false;  // 别忘记这行,防止页面跳转
    	});
      });
      
    </script>
    

     4.后端flask接收前端提交的数据:

    from flask import Flask, render_template, request, jsonify
    
    app = Flask(__name__)
    
    
    @app.get('/')
    def index():
        return render_template('layui-form.html')
    
    
    @app.post('/submit-form-submit')
    def submit_form_post():
        post_data = request.form
        print('AJAX-DATA:', post_data)
        # 返回json数据, success, msg和前端对应
        return jsonify({'success': 1, 'msg': '数据接收成功'})
    
    
    if __name__ == '__main__':
        app.run(host='0.0.0.0', port=5000, debug=True)

    后端截图:

     前端提交时截图:

    四.从后端获取数据更新选择框的内容

    1.将html文件select下的option标签删除:

    2.标签select增加id, 后面可通过id更新:

    <div class="layui-form-item">
        <label class="layui-form-label">选择框</label>
        <div class="layui-input-block">
            <select id="inputSelect" name="inputSelect" lay-verify="required" lay-search>
            </select>
        </div>
    </div>

    3.AJAX请求数据:

    <script>标签增加AJAX请求,以及对返回数据的处理

    $(function(){   //js 加载时AJAX请求
    		  $.ajax({
    			url:'/get-select-content',
    			type:'post',
    			dataType:'json',
    			success:function(result){
    				var list = result.data;
    				var str = "<option value=''></option>"
    				for (var i=0; i<list.length;i++) {
    					// value 和 name 需和后端返回的数据对应
    					str += "<option value=\""+list[i].value+"\">"+ list[i].name+"</option>" 
    				}
    			    console.log(str);   //打印str
    				$('#inputSelect').html(str);  //html赋值
    				form.render('select')   //重新渲染 form的select内容
    			},
    			error:function(){
    				layer.msg('部门查询API出错!');
    			}
    		})
    	});

     4.后端增加返回内容:

    @app.post('/get-select-content')
    def get_select_content():
        data_list = []
        city_list = ['北京', '上海', '广州', '深圳', '杭州']
        for i in range(len(city_list)):
            item_data = {
                "value": i+1,
                "name": city_list[i]
            }
            data_list.append(item_data)
        return jsonify(data=data_list, msg='success')

    返回data的内容:

    [{'value': 1, 'name': '北京'}, {'value': 2, 'name': '上海'}, {'value': 3, 'name': '广州'}, {'value': 4, 'name': '深圳'}, {'value': 5, 'name': '杭州'}]

     5.页面效果如下:

    6.注意事项:

    1.console.log(str)可以打印返回的数据,但选择框内容为空,请检查是否漏掉form.render('select');

    以下摘自Layui-官方文档:

    有些时候,你的有些表单元素可能是动态插入的。这时 form 模块 的自动化渲染是会对其失效的。虽然我们没有双向绑定机制(因为我们叫经典模块化框架,偷笑.gif) 但没有关系,你只需要执行 form.render(type, filter); 方法即可。

    第一个参数:type,为表单的 type 类型,可选。默认对全部类型的表单进行一次更新。可局部刷新的 type 如下表:

    参数(type)值描述
    select刷新select选择框渲染
    checkbox刷新checkbox复选框(含开关)渲染
    radio刷新radio单选框框渲染
    1. form.render(); //更新全部
    2. form.render('select'); //刷新select选择框渲染

    2.如果select有默认值,可以通过以下方法更新:

    value对应option的value或text

    1.通过显示内容模糊匹配, 不是很精确,value为text时,例如value为‘北京’,更新选中内容

    $("#inputSelectoption:contains("+value+")").attr("selected",true); 

    2.通过显示内容精确匹配,更新选中内容
    $('#inputSelect option').filter(function(){return $(this).text()==""+value+"";}).attr("selected",true); 

    3.通过option的value精确匹配,更新选中内容

    $('#inputSelect option').filter(function(){return $(this).val()==""+value+"";}).attr("selected",true); 

    展开全文
  • 前面说所说的vue及相关组件都没有与后端交互。 因为显示设备的多样化,现在基本上都是使用前后端分离,后端基本上都是使用api方式,基本上是以restful api为主。 所以这篇开始讲使用axios与后端api交互。可以先看...

    目录

    一、axios介绍

    二、aiios安装

    2.1 vue-axios安装介绍

    CommonJS:

    2.2 使用webStorm安装

    三、例子


    前面说所说的vue及相关组件都没有与后端交互。

    因为显示设备的多样化,现在基本上都是使用前后端分离,后端基本上都是使用api方式,基本上是以restful api为主。

    所以这篇开始讲使用axios与后端api交互。可以先看一下vue.js官方的《使用 axios 访问 API》及 “axios中文文档”中的vue-axios

    一、axios介绍

    有很多时候你在构建应用时需要访问一个 API 并展示其数据。做这件事的方法有好几种,而使用基于 promise 的 HTTP 客户端 axios 则是其中非常流行的一种。

    Fetch API 是一个用于此类请求的强大的原生 API。你可能听说过 Fetch API 其中的一个好处,就是你不需要在使用它的时候额外加载一个外部资源。确实如此!但是……目前它还没有被浏览器完全支持,所以你仍然需要一个 polyfill。使用这个 API 还有很多别的注意事项,这也是为什么大家现阶段还是更喜欢 axios 多一些。当然这个事情在未来可能会发生改变。

    二、aiios安装

    2.1 vue-axios安装介绍

    根据axios中文文档关于vue-axios安装,只要在vue项目根目录下执行

    CommonJS:

    npm install --save axios vue-axios

    将下面代码加入入口文件:

    import Vue from 'vue'
    import axios from 'axios'
    import VueAxios from 'vue-axios'
    
    Vue.use(VueAxios, axios)

    如果是使用脚本的话:按照这个顺序分别引入这三个文件: vueaxios and vue-axios

    该包装器将axios绑定到Vue,如果您使用的是单个文件组件,则可以将其绑定。

    Vue.axios.get(api).then((response) => {
      console.log(response.data)
    })
    
    this.axios.get(api).then((response) => {
      console.log(response.data)
    })
    
    this.$http.get(api).then((response) => {
      console.log(response.data)
    })

     

    2.2 使用webStorm安装

    如果是webStorm可以在先点项目,再点最下方的终端Terminal中执行上面的安装命令即可,如下图所示:

    安装完成后,如下图所示:

    三、例子

    官网使用 axios 访问 API例子,我在《hualinux 进阶 vue 3.1:vue cli手工创建Vue router》例子的基础上,直接修改。直接修改src/views/About.vue进行访问,代码如下:

    <template>
      <div class="about">
        <div id="app">
          {{ info }}
        </div>
      </div>
    </template>
    
    <script>
    
    import axios from "axios";
    
    export default {
      name:'About',
      data(){
        return{
          info: null,
        }
      },
      mounted () {
        axios
            .get('https://api.coindesk.com/v1/bpi/currentprice.json')
            .then(response => (this.info = response))
      }
    }
    </script>
    

    运行并打开网页,点about

     

    PS:运行例子是正常的,但是实际写会出现问题,CROS跨域问题,需要解决,下一章将讲解如何用PHP写一个,并解决cros问题。

     

    展开全文
  • 如果是纯html的话还可以按照后端要求直接写标识符让后端渲染出来,如: html <div var="{dataVar}">我是第二个组件</div> 但显然如果用React.js渲染的话不能用这种方法,难道每个数据都要用ajax吗?这样页面加载的...
  • 后端代码(flask): # encoding:utf-8 """ @file = app @author = zouju @create_time = 2022-06-14- 8:59 """ import pymysql from flask import Flask, render_template, request, jsonify def exec_mysql_query(sql...
  • 小程序与后端交互

    千次阅读 2019-04-19 06:39:36
    1 后端交互时序图 2 不校验域名 3 点击小程序的功能 4 request请求 5返回结果 6更新视图层 7使用案例 7.1 WXML文件 7.2 WXSS文件 7.3 JS文件 8 GitHub地址 1 后端交互时序图 2 不校验域名 如果...
  • 今天小编就为大家分享一篇JS的Ajax与后端交互数据的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • React与后端交互的一种方式

    千次阅读 2019-03-24 20:38:23
    上周工作中需要将一个react前端项目与spring的后端项目进行联调,但之前从未单独做过这种前后端分离的系统,虽然对react用法进行了基本学习,但开始始终没搞明白这种形式的系统前后端是如何交互的。 后查看了公司...
  • 前端网页向后端发起相应请求,后端响应前端的请求,做出相关操作.如前端发出获取数据库用户表的请求,后端则将用户表的内容返回给前端.简而言之,前端发出对数据库访问的请求,后端需响应结果. 项目结构 后端项目结构 ...
  • 前端中常常用的与后端交换数据的话,通常是要用到ajax这种方法的 ...如果这时候我们需要用到AJAX与那些数据做后端交互的话 $.ajax({ url: 你的webapi, type: Get, DATA{},//这里面写你要传给后端的数据,不过GET方
  • Vue - 与后端交互

    千次阅读 2021-02-05 00:18:43
    零:与后端交互 - ajax版本1 - 出现了跨域问题前端:index.htmlhtml>Vue与后端交互-出现了跨域问题加载数据letvm=newVue({el:'#box',data:{},methods:{handleClick(){$.ajax({url:'http://127.0.0.1:5000/',//...
  • 下拉列表之前后端交互

    千次阅读 2022-04-20 10:18:02
    下拉列表之前后端交互下拉列表技术选择layuielement-uijQuery 下拉列表技术选择 最近做项目需要用到下拉列表的功能,且需要实现一个页面有两个下拉列表,互相独立,并不是多级联动的那种。在对下拉列表技术选择笔者...
  • angular和后端交互数据问题

    千次阅读 2020-04-04 22:33:13
    angular访问后端服务器,进行数据交互,可以通过如下三种方式传递数据给服务端; 参数的形式:api/users?username=abc&age=18 通过表单的形式提交数据,在请求头加上:Content-Type: application/x-...
  • 这一章节主要讲解的是关于bpmn.js如何与后端交互,实现特定的线用特定的颜色 接口返回的数据 我们可以与后端协商,给每一个节点赋予一个id,我们就可以和id匹配赋予不同的class。 //customRenderer.less .djs-...
  • 用react 实现一个简单的前后端交互的网页,可以实现登录,增删检查
  • 微信小程序与后端交互(ssm)

    千次阅读 多人点赞 2020-03-05 21:44:40
    用微信小程序和java后端(ssm框架)做一个云笔记的软件,之前没有接触过小程序,自己查资料加上试验,其中遇到的坑记录下。 这篇博文也是云笔记系统的可行性分析试验,之后会把项目大概实现和源码在另一篇贴出来
  • vue前端与java后端交互

    千次阅读 2019-07-02 21:47:49
    前端写法: 后端布局:
  • 1. 登陆 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <...--
  • 前端后端交互的技术

    2021-04-08 14:03:00
    前端后端交互的技术 Form表单 必须有页面的跳转 注册页面有20个输入框,20个输入框写完之后提交-》后台对数据进行校验(身份证号码)->如果发现身份证号码不对-》回到注册页面 -》一来一回,页面有刷新-》页面...
  • Spring Boot(七) 之前后端交互

    万次阅读 2021-10-24 19:29:10
    Spring Boot(七) 之前后端交互 1、概述 概述 随着时代发展,前后端分离已经是一种很多企业使用的开发方式。在这种模式下前后端的交互是重点之一。前端发出请求,后端接收进行业务上的处理。在Spring boot中,使用...
  • 一、使用原生JavaScript的ajax进行交互   二、使用jQuery封装的ajax进行交互
  • 使用 CollectionSpace 后端。 优先级(CRUD): 当局和儿童记录 集合对象 角色 有关命令行界面,请参阅相关的。 快速入门(来自源代码) 安装node和npm (推荐nvm与当前的stable ie nvm use stable )。 克隆并cd...
  • ——>所以我要去写数据库查询语句和对应的数据库交互接口中的查询方法。 ——>所以我需要一个专门用于查询数据库的DO层,也就是声明这个表里面有哪些字段,以及对应的get和set方法  还需要一个专门的去查询的...
  • Vue的路由跳转、与后端交互

    千次阅读 2019-11-16 15:58:26
    Vue相关的路由跳转、与后端交互 学习Vue两三周了。 首先学习制作一个简单登录界面,功能是输入账号及密码并上传至后端,根据返回值决定是否跳转另一个页面,同时将需要的返回值一并传给另一个页面(首页)。 在...
  • 前后端交互,后端与后端交互中文乱码 前端工程师,当你和后端的文件都是以UTF-8的编码,但是后台大哥告诉你,中文是乱码的,然后你百度了半天,给jQuery.ajax设置了contentType: "application/x-...
  • 包含sourceDefinitionId、connectionConfiguration两块。 将connectionConfiguration放到partialConfig,再将sourceDefinitionId和partialConfig放到SourceConnection中。

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 183,494
精华内容 73,397
关键字:

后端交互

友情链接: environmentpaper.rar