前端与后端交互

基本知识

1.前端提供数据

在开发中，URL主要是由后台来写好给前端。

若后台在查询数据，需要借助查询条件才能查询到前端需要的数据时，这时后台会要求前端提供相关的查询参数（即URL请求的参数）。

2.前端请求参数的形式

一般使用GET和POST这两种方式
GET从指定的服务器中获取数据，POST提交数据给指定的服务器处理

3.接口文档主要由后台设计和修改

后台直接跟数据打交道，最清楚数据库里有什么数据，能返回什么数据。
前端只是数据的被动接受者，只是接口文档的使用者。
使用过程中，发现返回的数据部队，则跟后台商量，由后台修改。
切记：前端不能随意更改接口文档，除非取得后台同意。

4.前端与后台交互的数据格式

主要是JSON，XML现在用的不多。
JSON通常用于与服务器交换数据，AJAX（即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式应用的网页开发技术。)
也是通过JSON数据来完成交互。

AJAX的主要工作方式

在前后端分离的开发过程中，主要通过参数传递来进行数据的交换。首先，由前端对某个url发起请求，并附加一些参数；然后后台根据前端传递的参数进行数据查询，经过一定的数据处理后，以JSON或文本形式将数据传递到前端；最后，前端根据后台查询到的数据以一定的模板进行渲染，渲染之后呈现于页面中。

通常来说，前端的请求类似于下面这样：

 $.ajax({
    method:'GET',
    url:'s.php',//本地测试时，此处的url是相对于html文件的路径；实际开发时，替换url为接口文档中的地址即可
    data:{
      username:'random'
    },  //发起请求时所附带的参数
    success:function(data) {
      console.log(data);
    }//请求成功后的回调函数。当data为JSON格式时，可能需要使用JSON.parse(data)进行解析
  });

后台操作最简单的情况如下：

<?php 
    header("Content-type: text/html; charset=utf-8"); 
    /*获取AJAX所附带的参数*/
    $username=$_GET['username'];
    /**
     * 对请求中所附带的参数进行相应的处理，
     * 一般来说会依据这些参数进行相应的数据库查询
     * 然后将数据库中查询到的数据转换成json格式传递给前端
     * 在json数据中存在中文时，json_encode函数中的第二个参数应为JSON_UNESCAPED_UNICODE
     */
    echo '前端所传的参数值为：'.$username;exit();
?>

参考资料
1.CSDN博客
2.知乎