PHP前后端分离

article/2025/10/5 16:43:57

主页面

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./jquery.js"></script><style>*{font-size: 16px;margin: 0;padding: 0;}.wrapper{width: 800px;height: 550px;margin: 0 auto;display: flex;flex-direction: column;justify-content: center;align-items: center;}.contents{width: 800px;height: 500px;padding: 10px;overflow: auto;border: 1px solid black;}.contents p{display: flex;align-items:center;margin-top: 10px;padding: 10px;border-radius: 25px;background-color: skyblue;}.contents p span{margin:  0 20px;}input[type=text]{width: 250px;height: 35px;margin-top: 10px;}input[type = button]{width: 40px;height: 35px;margin-top: 10px;}</style>
</head>
<body><div class="wrapper"><div class="contents"></div><div><input type="text" name="content" id="content" placeholder="请输入你的留言"><input type="button" id="send" value="发送"></div></div><script>function getInfo(){$.ajax({"url":"./action.php","method":"post","dataType":"json","data":{query:"ok"},success(res){$(".contents").empty();for(var i = 0; i<res.length; i++){str = `<p><span>第${res[i].id}楼</span>留言:${res[i].content}--时间:${res[i].time}</p>`;$(".contents").append(`${str}`);}}})}$(document).ready(function(){getInfo();})$("#send").click(function(){var content = $("#content").val();$.ajax({"url":"./action.php","method":"post","dataType":"json","data":{query:"add",content:content},success(res){console.log(res);if(res.state = "addSuccess"){getInfo();}}})$("#content").val('');})$(document).keyup(function(e){if(e.keyCode == 13){$("#send").click();}})</script>
</body>
</html>

把index页面的数据发送到action页面,在action页面进行处理

<?
include("./mysql.php");// 查询数据
function query(){$arr = select();return json_encode($arr);
}
if($_POST["query"] == "ok"){echo query();
}// 添加数据function query2(){$content = $_POST["content"];// var_dump($content);$res2 = add($content);if($res2){echo json_encode(['state'=>'addSuccess']);}
}
if($_POST["query"] == "add"){query2();
}
?>

action需要在mysql引入函数

<?
$host = "localhost";
$dbuser = "root";
$dbpwd = "root";
$dbname = "scb";$con = mysqli_connect($host,$dbuser,$dbpwd,$dbname);if (!$con) {die ('数据库停止运行');
}// 查询数据
function select(){global $con;$sql = "select * from `1999`";$res = mysqli_query($con,$sql);$arr = [];if($res){while($row = mysqli_fetch_assoc($res)){$arr[] = $row;}}return $arr;
}// 添加数据
function add($content){global $con;$time = time();$time = date('Y-m-d h:i:s',$time);$sql = "insert into `1999`(content,time) values('$content','$time');";$res = mysqli_query($con,$sql);return $res;
}
?>

经过处理,把数据库的数据发送到index页面,在index页面显示出来,也可以在index页面进行数据的添加

结果展示:

 

 


http://chatgpt.dhexx.cn/article/AlRhvXTq.shtml

相关文章

java 实现前后端分离_详解前后端分离之Java后端

前后端分离的思想由来已久,不妨尝试一下,从上手开始,先把代码写出来再究细节。 前言 以前服务端为什么能识别用户呢?对,是session,每个session都存在服务端,浏览器每次请求都带着sessionId(就是一个字符串),于是服务器根据这个sessionId就知道是哪个用户了。 那么问题来…

前后端分离架构技术

前后端分离已成为互联网项目开发的业界标准使用方式&#xff0c;通过nginxtomcat的方式&#xff08;也可以中间加一个node.js&#xff09;有效的进行解耦&#xff0c;并且前后端分离会为以后的大型分布式架构、弹性计算架构、微服务架构、多端化服务&#xff08;多种客户端&…

前后端分离模式研究

一、前言 对目前的web来说&#xff0c;前后端分离已经变得越来越流行了&#xff0c;越来越多的企业/网站都开始往这个方向靠拢。前后端分离概念在今天其实并不新鲜&#xff0c;自以MVC模型为主的开发模式流行之初&#xff0c;前后端分离思想就被提出来了&#xff0c;但是经历了…

前后端分离搭建的简单实现

前言 本片博客描述欠缺&#xff0c;如果有细心的小伙伴有什么地方看不懂或者感觉写的有问题之处&#xff0c;请留言我&#xff0c;我会根据留言内容更改 搭建前后端分离 为什么要前后端分离 前后端分离是目前非常流行的一种开发模式&#xff0c;他的项目分工更加明确&#xff…

前后端分离开发架构

前后端分离开发架构设计 一、为什么要使用前后端分离 1.理解 MVC MVC是一种经典的设计模式&#xff0c;Model-View-Controller&#xff0c;即模型-视图-控制器。M主要负责数据与模型&#xff0c;V主要负责显示&#xff0c;C主要负责交互与业务 模型是用于封装数据的载体&#…

前后端分离php还有优势,前后端分离优缺点

前后端分离优缺点 之前有朋友问我&#xff1a;什么是前后端分离。他说北度搜到的都是大篇幅文章&#xff0c;看完还是很懵。 这里我简单总结下&#xff0c;如果有疏漏和不对的地方还请路过的网友指出。 一、先用一张图来解释 二、为什么要前后端分离(优点) 1. 全端适应 PC、APP…

前后端分离的登录

目录 一、跨域认证的问题 ​编辑 1.2 什么是JWT 1.3 JWT原理 1.4 JWT结构 1.4.1 Header 1.4.2 Payload 1.4.3 Signature 1.5 使用JWT---JAVA 1.5.1 引入依赖 1.5.2 封装一个JWT工具类 二、完成前后端分离的登录功能 2.1 前端代码 2.2 配置拦截器axios 2.3 后台拦截器 一、…

前后端分离架构

原文 参考&#xff1a; 到底什么是前后端分离1 到底什么是前后端分离2 到底什么是前后端分离3 前后端分离是个架构设计问题。所谓架构设计&#xff0c;实际上是如何合理的对现实的人力架构进行系统映射&#xff0c;以便最大限度的提高整个公司的运行效率。 前后端的定义 前后…

前后端分离的跨域问题

跨域问题原因 在现在流行的前后端分离开发中&#xff0c;跨域问题突显了出来&#xff0c;跨域问题的根本原因&#xff1a;浏览器有同源策略限制&#xff0c;当前域名的js只能读取同域下的窗口属性&#xff0c;这是一个基础安全功能。那么什么是同源策略呢&#xff1f;即两资源的…

前后端分离历史

文章目录 前后端分离前后端分离的历史前后端合并前后端耦合前后端“分离”大厂的方案前后端分离的理想方式前后端分离的好处前后端分离的挑战总结 前端历史前端开发的历史和趋势什么是前端前后端不分的时代后端 MVC 的开发模式前端工程师的角色典型的 PHP 模板AjaxWeb 2.0前端 …

小谈什么是前后端分离?

什么是前后端分离&#xff1f; 学习目标 什么是前后端分离&#xff1f;前后端分离初了解为什么要前后端分离&#xff1f;1、前后职责分离2、前后技术分离3、前后分离带来了用户用户体验和业务处理解耦4、前后分离&#xff0c;可以分别归约两端的设计 前后分离架构接口设计 用户…

java 前后端分离_Java项目如何实现前后端分离

Java项目如何实现前后端分离 发布时间:2020-11-20 15:55:52 来源:亿速云 阅读:103 作者:Leah 今天就跟大家聊聊有关Java项目如何实现前后端分离,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。 构建springboot…

java 前后端分离

前后端分离的开发模式&#xff0c;这两年确实被炒得如火如荼&#xff0c;导致这个话题也成了面试极其爱问的一个问题&#xff0c;尤其是换工作、跳槽&#xff0c;之前不管你是做后端&#xff0c;还是前端&#xff0c;都可能会涉及。 面试官常问&#xff1a; 诶&#xff1f;你…

前后端ajax分离如何做seo,前后端分离 seo

目录 一、bootstrap 前后端分离 表现层完全由前端掌控是最好的。所以掌握jsp和jstl是挺好的&#xff0c;等你全掌握之后麻利得把页面模板搞定就可以嘲笑后端都是bottleneck了。 当然不愿意用jsp/jstl之类的&#xff0c;也可以考虑完全用ajax。 为什么说前后端分离不利于seo的原…

前后端分离

一、项目有前后端分离和前后端不分离&#xff1a; 在前后端不分离架构中&#xff0c;所有的静态资源和业务代码统一部署在同一台服务器上。服务器接收到浏览器的请求后&#xff0c;进行处理得到数据&#xff0c;然后将数据填充到静态页面中&#xff0c;最终返回给浏览器。 实现…

Spring Security 前后端分离

前后端分离概述 前后端分离指的就是前后端分离部署&#xff0c;前端 调用后端API&#xff0c;后端 返回 JSON格式数据&#xff0c;页面是由前端渲染并展示到浏览器中。 相比较传统的单体项目 &#xff0c;页面是由后端渲染完成后返回给浏览器的。&#xff08;jsp、thymeleaf、…

实现前后端分离

对目前的web来说&#xff0c;前后端分离已经变得越来越流行了&#xff0c;越来越多的企业/网站都开始往这个方向靠拢。那么&#xff0c;为什么要选择前后端分离呢&#xff1f;前后端分离对实际开发有什么好处呢? 为什么选择前后端分离 1. 在以前传统的网站开发中&#xff0c…

何为前后端分离?一文搞懂前后端分离发展史

目录 一、前言 二、前后端分离的演进过程 2.1 发展的三个阶段 2.2 前后端不分离阶段&#xff08;Java的JSP作为前端视图时代&#xff09; 2.3 前后端半分离阶段&#xff08;前后端使用Ajax交互的半分离时代&#xff09; 2.4 前后端完全分离阶段&#xff08;前后端使…

前后端分离架构概述

1、背景 前后端分离已成为互联网项目开发的业界标准使用方式&#xff0c;通过nginxtomcat的方式&#xff08;也可以中间加一个nodejs&#xff09;有效的进行解耦&#xff0c;并且前后端分离会为以后的大型分布式架构、弹性计算架构、微服务架构、多端化服务&#xff08;多种客户…

前后端分离架构,超全面详解~

此文通俗易懂&#xff0c;全面讲解前后端分离架构核心思想与作用&#xff0c;对学习微服务、开发企业项目大有裨益&#xff0c;建议收藏细品&#xff0c;好好领悟&#xff01;~ 一、简介 前后端分离已成为互联网项目开发的业界标准使用方式&#xff0c;通过nginxtomcat的方式&a…