讲师中心 微信公众号
AI工具推荐 视频效率加速

前端 ,后端 关于数据交互的问题?

大杰酱_4695

大杰酱_4695

发布时间:2016-06-06 16:42:03

|

1590人浏览过

|

来源于php中文网

原创

今天,我和我同事在讨论php 与js交互的时候,他认为:
<script type="text/javascript"></script>
var type = ;
....

我认为这样比较乱,如果交互数据多了的话,所有,我改成这样




...

<script></script>
var type = $("#hide_value #user_intern_status").val();

...

他说我这样写很麻烦,没必要。
我想知道大家是咋想的,又如何处理前端(js)与后端(jsp,php等)的数据交互的。

回复内容:

重新修改答案后整理了一份《前后端数据交互方法》



在此介绍几种常用的前后端数据交互方法,并给出使用建议。以提高前后端协同开发的效率。
目录:

1. HTML赋值
2. JS赋值
3. script填充JSON
4. AJAX获取JSON
5. WebSocket实时传输数据
6. 总结

1. HTML赋值
输出到 Element 的 value 或 data-name
<input type="hidden" value="<?php echo $user_avatar;?>" />
<div data-value="<?php echo $user_avatar;?>"></div>
任何时候两种不同的技术发生硬耦合都是非常糟糕的软件设计,因为会带来不可调试、不可追踪等问题,每一种技术都有自己从开发到调试、测试甚至是构建的一套完整技术栈和工作流,当两种技术耦合在一起就会让这个工作流部分或完全失效。

所以从这个角度看,虽然问题里面提出的第二种优于第一种,但是两种方式本质上都是一个问题:硬耦合。第一种方案 JavaScript 和 PHP 耦合在一起了,第二种 HTML 和 PHP 耦合在一起了。所以还有更合理的解决办法,那就是前后端完全 decouple,通过 API 通信获取数据,用 JavaScript 动态渲染页面。 你同事的意思是 要把所有的js代码写到php文件里面? 不然真不明白第一种写法怎么跑的通
想前后端通讯数据 就用ajax啊。 卧槽。。
你和你的同事从来没听过PHP框架这种概念? 写页面的几个人呢?
如果前端只有一个,那两种方案都可以。
前端再拆分,写html和写js的分工的话,第二种更好。
还有拆得更合理的方案,就是自定义属性,毕竟第二个方案添加了无意义的元素,不如直接
,甚至hide_value这个元素都可以用不着,直接在其父元素上定义就可以了。获取就是 var data= xx.getJson($("#hide_value").attr('data-val')), jQuery本身没有json处理函数,自己随便搜个下来用吧。


不过这些东西不是都是前端来写吗?后端只负责给出 $user_intern_status,怎么调用是前端自己定的。 为啥不用 php+smarty的框架呢 用框架就有框架自带的方法,但还是觉得js和php要分开来,因为js的变化实在太平凡了。 你不会用smarty动静分离么。或者写jquery 写法都没有错,得看实际情况再挑选最实惠的做法。 其实个人觉得你这样更乱,除非数据是需要通过表单提交的,不然直接赋值给变量不是更好么?

明明一行代码操作就OK的事情,你要用两行代码。

热门AI工具

更多
DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

切问学术

切问学术是一款AI论文写作工具,复旦大学NLP团队推出的AI学术智能体。

音述AI
音述AI Hot

一款AI音频处理工具,主要用于音述AI是一个以“用声音述说故事”为核心的 AI 音乐创作与声音分享社区,适合需要提升相关任务效率的用户。

二狗PPT
二狗PPT Hot

一款AI演示文稿工具,主要用于专为中式职场打造的AI PPT生成工具,适合需要提升相关任务效率的用户。

Laper
Laper Hot

Laper是专为编剧、导演和制片人推出的 AI 原生剧本创作工具。

VibeKnow
VibeKnow Hot

一款AI视频创作工具,主要用于全球首个AI知识视频创作平台,文档、文章、网页,一键生成视频,适合需要提升相关任务效率的用户。

Seko
Seko Hot

一款AI视频创作工具,主要用于商汤科技推出的创编一体的AI短视频创作Agent,适合需要提升相关任务效率的用户。

WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

相关专题

更多
PixTV官网入口地址合集
PixTV官网入口地址合集

本专题汇总了 PixTV AI 一站式视频创作平台的官方入口与使用教程。无需下载软件,浏览器直接访问即可使用。平台将剧本、图像、视频、声音与剪辑整合在“无限画布”中,接入 GPT Image 2.5、Seedance 2.5 等头部模型。本专题整理了从新建画布、角色锚定、分镜拆分到视频生成与导出的完整操作指南,助你快速上手 AI 短剧与漫剧创作。

40

2026.10.10

Kratos框架HTTP与gRPC服务开发教程
Kratos框架HTTP与gRPC服务开发教程

本专题围绕Kratos框架双协议服务开发,涵盖HTTP路由与处理器编写、参数获取、gRPC服务实现与客户端调用、metadata上下文传递、encoding编解码注册、统一响应封装、超时控制与流式响应实现方法。

20

2026.10.10

Kratos框架Protobuf接口定义与代码生成合集
Kratos框架Protobuf接口定义与代码生成合集

本专题讲解Kratos框架接口定义体系,涵盖proto编写规范、proto add/client/server生成命令、http注解路由、validate校验、OpenAPI文档生成、跨服务proto复用与兼容性设计。

0

2026.10.10

C++虚函数怎么定义和调用
C++虚函数怎么定义和调用

C++虚函数是实现运行时多态的重要机制。本专题从virtual关键字的基本用法入手,介绍基类与派生类之间的函数重写、基类指针调用派生类方法,以及动态绑定的执行过程,帮助初学者掌握虚函数的核心语法。

20

2026.10.10

C++类与对象的封装方法教程
C++类与对象的封装方法教程

C++封装是面向对象编程的核心特性之一,通过类将数据与操作数据的函数组织在一起,并利用访问权限控制外部访问。本专题介绍类的定义、成员变量、成员函数以及public、private和protected的使用方法,帮助初学者掌握封装的基本原理。

20

2026.10.10

C++构造函数定义与调用方法
C++构造函数定义与调用方法

C++构造函数用于初始化类对象,是面向对象编程的重要基础。本专题从构造函数的定义、声明和调用入手,介绍默认构造函数、带参数构造函数、拷贝构造函数及成员初始化列表,帮助初学者掌握对象创建与初始化的基本方法。

20

2026.10.10

Kratos框架零基础入门教程
Kratos框架零基础入门教程

本专题整理Kratos框架入门内容,涵盖Go环境准备、kratos CLI安装升级、new命令创建项目、目录结构分层说明、服务启动与双协议端口、依赖下载报错排查,帮助开发者快速跑通第一个Kratos框架微服务应用。

20

2026.10.10

C++条件判断语句怎么写
C++条件判断语句怎么写

C++条件判断是控制程序执行流程的重要基础。本专题介绍if、if-else、else if和switch等常见分支语句,结合条件表达式、比较运算符与代码示例,帮助初学者掌握不同场景下的判断逻辑。

0

2026.10.10

C++变量怎么声明和赋值
C++变量怎么声明和赋值

C++变量是编写程序和存储数据的基础。本专题围绕变量声明、定义、初始化、赋值和类型选择等内容展开,帮助初学者理解不同变量的用法,并掌握在实际代码中定义和使用变量的方法。

20

2026.10.10

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Workerman官方手册
Workerman官方手册

共0课时 | 0人学习

http状态码大全
http状态码大全

共47课时 | 118.8万人学习

AngularJS教程
AngularJS教程

共24课时 | 7.7万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn