作为一个合格的软件测试人员, 能够熟练定位bug的位置是属于前端还是后端,是必备技能之一。所以就需要明白前后端数据是怎么进行交互的。

一、网站数据处理主要分为三层

第一层,表示层,这部分可以用HTML代码,CSS/Javascript代码来实现等。通过前端代码可以实现网页的布局和设计。这层又可以称为显示层。也就是你用浏览器打开能看到的网页。

第二层,是业务层,这层是负责处理数据的。常用的代码语言有PHP,JSP,Java等。通过这些后台处理语言的算法来处理前台传回的数据。必要的时候进行操作数据库,然后把结果返回给前端网页。

第三层,是数据层,这个就是数据库,用来存储数据的。通过业务层的操作可以实现增删改数据库的操作。

①你接触到的是这个网页是属于表示层,这个网页一般由HTML标签结合CSS/JAVASCRIPT来实现的。 这时候你要先填入数据。

②然后你按提交触发后台处理机制,这时候数据会传到后台的代码进行处理。这部分代码根据不同网站可以使PHP,JSP,JAVA等。 代码根据程序员预设的算法将收到的数据进行处理之后会相应的对数据库进行操作,存储数据等。

③成功操作完数据库之后,业务层的代码会再向表示层也就是显示器端传回一个指令通知你表格填写成功。

二、前后端数据交互方法

1、HTML赋值

2、JS赋值

3、script填充JSON

4、AJAX获取JSON

前三个数据交互方法在AJAX获取json的方法普遍使用之后,就很少使用了,今天主要了解一下ajax获取json:

$.ajax({

type: “POST”,//type是ajax的方法

url : “/resource/usermenus”,//参数url,要把参数传到什么地方

data : {parentid:parentid,parentpath:parentpath},//传递什么数据

success : function(data){//sucess表示,当数据返回成功后要怎么做,返回的数据存储在data

)}

Ajax进行数据交互就和我们使用

的概念一样,请求方式get/post,url地址,还有需要传递的参数,然后对返回的响应值进行处理。

在明白Ajax的原理之后,知道前后端数据交互方法,就可以快速定位数据传输的时候是前端还是后端的错误了。

软件测试的交互,软件测试--前后端数据交互相关推荐

  1. java前后端数据交互_前后端数据交互(示例代码)

    function ajax(option) { function objtostring(obj){ if(typeof obj==='object' && !Array.isArra ...

  2. 前后端数据交互方法 汇总

    这篇文章给大家介绍几种常用的前后端数据交互方法,并给出使用建议.以提高前后端协同开发的效率.非常的详细,推荐给小伙伴们,有需要的小伙伴可以参考下. 1.HTML赋值 输出到 Element 的 val ...

  3. 干货 | 万字长文全面解析GraphQL,携程微服务背景下的前后端数据交互方案

    作者简介 古映杰,携程研发高级经理,负责前端框架和基础设施的设计.研发与维护.开源项目react-lite和react-imvc作者. 前言 随着多终端.多平台.多业务形态.多技术选型等各方面的发展, ...

  4. ajax连接前后端原理,前后端数据交互方法和原理

    前后端数据交互方法和原理 发布时间:2018-10-28 11:25, 浏览次数:742 对于想要搞web的新手而言,会用html+css+javascript实现一个页面没什么太大的困难,但是想要前 ...

  5. 详解 AJAX-SpringBoot 前后端数据交互

    详解 AJAX-SpringBoot 前后端数据交互 1. Ajax 概述 Ajax 的英文全称是 "Asynchronous JavaScript and XML",即 &quo ...

  6. 前后端数据交互——ajax技术

    在实际开发过程中,前端页面通常需要根据后台数据实现动态生成和实时更新,因此如何实现前后端数据交互成了开发过程中的难题. 现将使用ajax技术解决前后端数据的交互: (1)ajax技术介绍: ajax一 ...

  7. 前后端数据交互|分页查询|表格-双向绑定|get和post的区别

    目录 1 前后端数据交互 1.1 前端代码 部署在 前端服务器 1.2 前端代码 在 浏览器展示(只展示页面,没有数据)----自给自足 1.3 前端/浏览器 请求 后端数据 (后端死数据)----给 ...

  8. 基于axios前后端数据交互

    基于axios前后端数据交互 一.get 1.前端 <!DOCTYPE html> <html lang="en"> <head><met ...

  9. 超详细总结:前后端数据交互原理

    最近开始接触前后端的一些知识,查了很多资料,今天把互联网产品的前后端数据交互做个总结留做笔记. 互联网产品的前后端数据交互是通过一个通讯协议完成.前后台交互的协议主要包括HTTP,FTP,SMTP,T ...

最新文章

  1. esd管 低cj要求_TVS管与ESD保护二极管的区别,联系以及应用
  2. [Redis6]常用数据结构_Hash哈希
  3. echart高级使用_Vue:在Vue中使用echarts
  4. Python开源微博工具:Twitter
  5. java Web应用配置log4j日志记录
  6. mysql之高性能索引
  7. Ansible文件内容修改lineinfile模块(学习笔记五)
  8. 如果数组的值都一样java_java – 将数组中的相同值合并在一起
  9. 台式计算机电源机箱维修,终于理会电脑电源故障的维修方法
  10. GPS精密星历文件下载地址
  11. ubuntu浏览器突然使用不了搜狗拼音法
  12. 淘宝CRM是如何通过数据分析进行解决问题的
  13. 3.Timing Constraints
  14. 多客户端访问mysql_解决关于多客户端操作数据库并发问题
  15. 印度人撮合办公室恋情
  16. You have enabled checking of packages via GPG keys. This is a good thing.  However, you do not have
  17. 韩国计算机专业,韩国计算机专业发展前瞻
  18. Landscape-版图几何设计规则DRC
  19. Matlab实现HOG+SVM图像分类
  20. maxima 学习笔记(coeff 函数的应用)

热门文章

  1. Js数组转字符串,字符串转数组
  2. CNN在句子相似性建模的应用--tensorflow实现篇2
  3. HTML中怎样把文字分两栏显示,Word一栏与多栏文本的混排(同一页既有一栏又有两栏等等)...
  4. 32位,16位,8位系统的区别以及sizeof函数
  5. Unity 后处理 Post Processing 设置及 HDR 问题
  6. 国内第一国际第二!首都机场年旅客吞吐量破亿
  7. Surfer13 自动实现网格化
  8. 报错:org.apache.ibatis.binding.BindingException: Invalid bound statement (not found)问题
  9. Java的选择结构详解
  10. 邓勇 北大计算机,他是成电大四学霸,成绩专业霸榜第一,研究领域很霸气,保研北大...