浅谈前后台交互

作者: 孙静静 | 来源:发表于2017-12-08 10:35 被阅读198次

最近做一个电商商城的项目,和后台的交互成了这个项目的重点,也只是略懂皮毛,交互中的某一种方法,在此记录下。
和后台的交互首先是和后台的交流,还好我们的后台首先是个好脾气的几个年轻人,不管我们的交流出现什么问题,大家都可以和和气气的说话(论好脾气后台的重要性,嘿嘿)。
在万般讨论后,他们传过来的数据是这样的:


image.png

可以看出来传过来的json串是有点问题,出现这种情况,需要用到正则表达式进行替换解析

    var reg = /\\/g;
    data.replace(reg,"");
    data = data.replace("\"dataInfo\":\"","\"dataInfo\":");
    data = data.replace("\",\"state\":",",\"state\":");
    data = JSON.parse(data);

输出为


image.png

这样就解析成了对象,可以在ajax里正常操作。

这个项目我们前端小组用的是ES6里的一些方法,先把页面静态生成,再利用标签获取进行操作,最后就是几千行的代码,用几百行的js全部替换,话不多说,举一个模块的例子,直接上代码:
效果图:


image.png

(注:最上面右边部分我只写了一个红石榴)
首先


image.png image.png
image.png
image.png
image.png

最后一个函数


image.png

(因为模块最上面一行没有看到数据,所以这里没有动态生成)

图片路径的方法


image.png

最前面部分是服务器地址。

以此方法,一个从后台调用数据的页面就完成了😄

相关文章

  • 浅谈前后台交互

    最近做一个电商商城的项目,和后台的交互成了这个项目的重点,也只是略懂皮毛,交互中的某一种方法,在此记录下。和后台的...

  • 浅谈前后台交互

    举例:外卖餐厅订餐初识状态: 具体的菜单(菜品+价格),前台要从后台获取,这时就要前台想后台发送一个数据,jque...

  • 浅谈WKWebView使用、JS的交互

    浅谈WKWebView使用、JS的交互 浅谈WKWebView使用、JS的交互

  • Android网络编程

    一、后台与APP 交互过程分析 1 、后台与APP 交互过程分析 基于http/https协议的app前后台交互包...

  • jquery调用ajax方法时候不执行success的也不执行e

    在完成前端向后台异步交互的时候,遇到了这样的一个问题。就是说在发送到后台数据,并且后台已经执行成功该方法的时候。前...

  • springMVC+maven+mybatis+mysql入门

    (六)利用ajax和后台交互 这一小节,我们主要实现页面和后台简单的数据交互,初步掌握这个交互流程 页面主要采用a...

  • 前后台交互

    一种是ajax,另外一种就是form表单的action方法写后台接受数据的方法。 其中ajax能实现局部刷新,而f...

  • 前后台交互

    今天小姐姐不分享代码,来谈谈我对前后台交互的认知。 在web开发中,前后台交互是一个至关重要的环节,前后台需要及时...

  • Ajax后台交互

    点赞再看,养成习惯 前面都是一些语法,那我们前端怎么实现与后台交互呢? 1.Ajax是什么? Ajax就是让浏览器...

  • DOCKER后台运行centos

    后台运行centos(-it添加交互,不带-it无法运行到后台): docker run -itd ce...

网友评论

本文标题:浅谈前后台交互

本文链接:https://www.haomeiwen.com/subject/bcwsixtx.html