javascript - (☆_☆)/~~前后端是如何交互的？小白一个，求高手指点。-PHP中文网问答

讲师中心微信公众号

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机游戏

最近更新

javascript - (☆_☆)/~~前后端是如何交互的？小白一个，求高手指点。

巴扎黑 2017-04-11 11:30:23

[JavaScript讨论组]

397

只接触过前端，各种不懂后端的。。。希望大神能给描述一下它们之间的关系，如何联系的？跪谢~~~!

巴扎黑

全部回复(4)

巴扎黑2017-04-11 11:32:23 4楼

一般来说使用前端用Ajax 把数据写成json字符串的形式提交给后端.

$.ajax({
url:'abc.com',
data:{name:'name',
      sex:'sex'
     }
datatype:POST;//也可以是get
})

后端根据你提交的类型（post还是get）：

$name=$_POST[name];$sex=$_POST[sex] 来提取数据。。。

后端echo json字符串给前端前端也是通过Ajax请求获得数据再解析。
大体就这样，详细的要很啰嗦。

赞 +0

添加回复

伊谢尔伦2017-04-11 11:32:23 3楼

由后端提供数据接口。前端调用并渲染出来。前后端分工明确。这样做后端可以少了很多工作，前端相对就多了

赞 +0

添加回复

高洛峰2017-04-11 11:32:23 2楼

ajax，很简单的

赞 +0

添加回复

迷茫2017-04-11 11:32:23 1楼

一句话：HTTP(s)协议

所谓接口就是 HTTP(S) 的URL + 参数 + 返回的结果

前端发起请求并等待服务器响应（返回结果）

1、原始的HTML方式是表单

<form method="post/get">
 <input...> ...
</form>

这种方式在submit（提交表单）之后，浏览器会发送一个HTTP（GET/POST）请求给服务器（后端）
服务器处理完后返回结果页面，浏览器重新显示新的页面，所以会刷新

2、现在流行的方式是AJAX

已jquery为例，$.get/post/ajax 之后也会给服务器发送HTTP请求
服务器处理完后返回结果（比如json）而非整个页面，所以是 无刷新 的。

后端等待前端请求，处理请求后把处理结果返回给前端

对于后端来说，原始的表单方式和AJAX发来的请求是一样的，
唯一区别就是返回的结果类型，
前者要返回整个新页面的HTML代码，
而后者只需要返回约定好的类型数据（比如json:{result:true/false, msg: 'blabla'}）

总结

前后端交互可以类比一下函数调用（作为前端应该知道javascript函数吧...）
后端负责定义好函数：

function test(a, b){
    return a + b;
}

前端负责调用这个后端提供的函数（接口）：

r = test(1,2)
alert('1+2=' + r);

类比：

$.post({
    url:'test',
    data:'a=1&b=2',
    success:function(data,status){
        alert('1+2=' + data);
    },
})

前后端的交互就跟函数调用一样（如果你不追究浏览器后台的HTTP处理的话）

嗯，就是这样！前端填入参数并调用接口，后端处理然后返回结果，前端再处理后端返回的这个结果！
END!

赞 +0

添加回复

专题推荐

更多>

热门话题

热门教程

更多>