前后端交互

如今用户体验、逻辑等产品思维和类似需求分析、PRD撰写的产品技能越来越成为产品经理的基本技能，企业更加注重T型人才的培养。我是软件工程的背景，希望以后可以做偏技术方面的产品经理，同时增强自己的竞争力。互联网的产品设计，靠需求推动，由技术落地，产品被设计出来，技术上的可行性是产品经理需要考虑的重点之一。因此产品经理懂技术从长远来看，也是开发、迭代产品中必要的一环。

今天希望根据自己浅薄的知识和网上的参考资料，小小的总结一下前后端交互的问题。

一、什么是前后端交互？

1、首先，我们需要理解什么是前后端分离：

1
2

前后端分离是一种架构模式，说通俗点就是后端项目里面看不到页面（JSP|HTML）,后端给前端提供接口，前端调用后端提供的REST风格接口就行，前端专注写页面（html|jsp）和渲染（JS|CSS|各种前端框架）；后端专注写代码就行。
前后端分离的核心：后台提供数据，前端负责显示

ps: 参考文章：从MVC到前后端分离

2、前后端交互的原理：

前端根据接口，提供请求参数，后端接收参数，根据参数查询数据库，并得到返回的数据，将返回的参数送到前端。前端调用接口，将返回的数据呈现。

3、前后端交互细节：

参考文章链接：https://blog.csdn.net/shuo1992/article/details/58615465

（1）前端提供请求数据：前端提供查询参数（URL请求参数）（URL由后台写好给前端）

（2）后端设计&修改接口文档：因为后端跟数据库进行直接的交互，前端只是数据的接受者，接口文档的使用者

（3）交互数据的格式：主要用JSON进行交互，现在流行的AJAX也是通过JSON完成。JSON通常用于与服务端交换数据，在接受服务器数据时一般是字符串

（4）请求方法：POST和GET，GET是向服务器发送索取数据的请求，POST是向服务器提交数据（表单）

二、熟悉几个概念

1、什么是接口？

接口就是提供具体能力的一个标准和抽象，是一些预先定义的函数，包括接口地址、传入参数和返回参数和数据。可以简单理解为，当需要访问某些数据，正常状态下传入合格参数，会收到该数据范围内的返回参数。前后台的交互基本都是通过程序接口实现的。

2、什么是JSON？

JSON(JavaScript Object Notation,) 是一种轻量级的数据交换格式，采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。易于阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。

在进行前后端交互时，多数用的是JSON。

3、什么是AJAX？

Ajax，即异步JavaScript和XML，是一种创建交互式网页应用的网页开发技术。通过在后台与服务器进行少量数据交换，Ajax可以使网页实现异步更新，这意味着可以在不重新加载整个网页的情况下，对网页的部分进行加载更新。

Ajax 的优点在于它在浏览器与web服务器之间使用异步数据传输（HTTP请求），不阻塞用户，核心对象是XMLHTTPRequest。通过这个对象，js可在不重新加载页面的情况下与web服务器交换数据。

三、如何进行前后端交互？（实例说明【转】）

PS：以下例子均为用AJAX实现前后端交互

【例1】参考文章链接：http://www.woshipm.com/pd/855233.html

【例1】：一个网站的登录功能，我们通过ajax（可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页）加载服务器数据的过程再来体验一下前后台数据交互的过程。

我们先给登录名和登录密码的文本框起两个名字，即UserName，PassWord。

前端代码（解析）如下：

$.ajax({

‘url’:’login.php’,  #和之前的URL一样，前端把参数传递到什么位置

‘data’:{“username”:$('#UserName').val(),"PassWord":$(‘#password’).val(),},  #前端传递给后端的数据（用户名和密码）

‘success’:function(data){

}   #服务器返回数据成功的时候，前端需要如何操作（data中存的就是服务器返回的数据）

‘type’:’post’  #数据传输的方法

‘dataType’:’json’  #传递数据的类型，JSON

}）;