想要做好互联网产品的设计,就要对一些基本的技术实现原理有所了解,本文将对互联网产品的前后台数据交互做一个小的总结。(技术大神轻喷)
JSONJSON(JavaScript?Object Notation,) 是一种轻量级的数据交换格式,采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。 易于阅读和编写,同时也易于机器解析和生成,并有效地提升网络传输效率。 前后端交互时传递数据的格式,就是JSON格式的,当然也有XML格式。JSON数据格式很好理解,举个例子: { “性别”:”男” “兴趣爱好”:”听音乐” } 这就是 JSON键/值对。 实例解析1这是一个APP的页面,前端会把它分为3个部分去分别请求数据,即:
(1)banner部分 前台需要今天产品的最新图片地址。URL中的参数主要是根据后台需要,如果后台需要前端传递一个时间戳才能够查询到具体的图片信息,那么前端在数据请求时请求参数就应该包含时间的参数,代码如下: 前台部分: #前端得到的URL 代码解析:
后端部分: select “轮播图片” from picture where time = “2017-11-23 00:00:00” 代码解析: 数据库查询语句,去数据库里面去查找相应的数据表,查询条件就是前端传递过来的URL参数time。 (2)课程种类部分 此部分包含两部分内容,即图片和标题。这些内容在后台数据库表中,后台只需要设计个URL给前端,让前端直接发访问就可以了: URL:http://www.heiheihei.com/LessonType.php (3)热门好课部分 此部分也是包含图片和标题。前端把这些信息告知后台,后台看到这些信息后,会去相对应的数据库去查询,如果这些数据后台很容易获取到,会直接给个URL给前端。否则就需要前端通过URL来传递一些参数。比如: #前端得到的URL 总结来说:所有前端请求的URL后面的参数,都是辅助后台数据查询的。如果不需要参数,那么后台就会直接给个URL给前端。 实例解析2这是一个网站的登录功能,我们通过ajax(可以在不重新加载整个页面的情况下,与服务器交换数据并更新部分网页)加载服务器数据的过程再来体验一下前后台数据交互的过程。 我们先给登录名和登录密码的文本框起两个名字,即UserName,PassWord。 前端代码(解析)如下: $.ajax({ ‘url’:’login.php’, ?#和之前的URL一样,前端把参数传递到什么位置 ‘data’:{“username”:$(‘#UserName’).val(),”PassWord”:$(‘#password’).val(),}, ?#前端传递给后端的数据(用户名和密码) ‘success’:function(data){ } ??#服务器返回数据成功的时候,前端需要如何操作(data中存的就是服务器返回的数据) ‘type’:’post’ ?#数据传输的方法 ‘dataType’:’json’ ?#传递数据的类型,JSON }); 我们不用关心function(data)函数中具体的代码,无非就是:前端页面展示用户的用户名、页面状态变为已登录、展示用户相关数据等。 后端代码过于复杂,我就不展示了,总之后端要做的处理就是:拿到前端传递过来的数据(用户名和密码)和数据库中用户信息做比对,如果一致则返回给前台一个状态,并且返回用户的相关数据(昵称、个人信息、购物车信息、收藏的商品等等),这些数据同样是以JSON的形式传回给前端。如果用户名或密码不一致,也返回给前端一个状态。前端根据得到的状态做出页面的相应效果:登录按钮变为退出、显示用户昵称、显示购物车信息、显示收藏信息、登录框隐藏等,如果用户名密码不匹配则显示相应的提示信息。 以上就是网站通过ajax技术完成的前后端数据交互过程。 你学会了吗?
作者:流年,互联网产品设计师,4年互联网产品设计经验。 本文由 @流年 原创发布于人人都是产品经理。未经许可,禁止转载。 |