前后端交互java前后端交互流程图 前后端怎样进行交互

前端与后台的交互

---

在web应用开发过程中，总免不了前端与后台之间的交互，而二者之间的桥梁通常就是AJAX，那么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. 接口地址： http://api.example.com/user.php
2. 所需参数（GET）：

参数	类型	参数名说明
username	String	用户名（非必须）
type	String	查询类型（all或single）

3. 输出参数说明

参数	类型	参数名说明
username	String	用户名

---

在此处前端发起url为’ http://api.example.com/user.php?type=all‘的请求，会得到如下所示的data:

{
  "user":[{
    "username":"randowm"
  },{
    "username":"randowm1"
  },{
    "username":"randowm1"
  }]
}

前端在成功的回调函数中对该json数据进行一定的解析，渲染之后呈现于页面中。