如何通过 AJAX GET 请求将 HTML 元素内容传递给 PHP 文件

酷辰小哥_6644

发布时间：2026-02-19 09:44:01

194人浏览过

来源于php中文网

原创

如何通过 AJAX GET 请求将 HTML 元素内容传递给 PHP 文件

本文介绍在不使用表单 POST 提交的前提下，利用 jQuery 的 .load() 方法配合 URL 参数，将动态 HTML 元素的内容安全、高效地传递至 PHP 后端，并在 PHP 中获取和处理该数据。

本文介绍在不使用表单 post 提交的前提下，利用 jquery 的 `.load()` 方法配合 url 参数，将动态 html 元素的内容安全、高效地传递至 php 后端，并在 php 中获取和处理该数据。

在 Web 开发中，常需在用户交互（如点击按钮）时，将当前页面中某个动态更新的 DOM 元素内容（例如

）实时传送给服务器端 PHP 脚本进行处理。但若 HTML 页面未包裹在

中，或出于设计简洁性考虑无法使用 $_POST，则需借助 AJAX 的 GET 方式完成数据传递。

jQuery 的 .load() 方法默认支持 GET 请求，只需将目标数据以 URL 查询参数形式拼接即可。关键在于：对前端内容进行 URI 编码，确保特殊字符（如空格、中文、换行符等）安全传输。

以下为完整实现示例：

✅ HTML 页面（index.html）

立即学习“PHP免费学习笔记（深入）”；

<!DOCTYPE html>
<html>
<head><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script></head>
<body>
  <div id="div1">这是一段可变的中文内容 —— 包含空格 & 符号！</div>
  <button id="mybutton">加载 PHP 内容</button>
  <div id="loadingzone">等待响应...</div>

  <script>
    $("#mybutton").click(function() {
      const content = document.getElementById("div1").innerText;
      // 使用 encodeURIComponent 确保内容安全编码
      const url = "file.php?text=" + encodeURIComponent(content);

      $("#loadingzone").load(url, function(response, status, xhr) {
        if (status === "error") {
          $("#loadingzone").html("请求失败：" + xhr.status + " " + xhr.statusText);
        }
      });
    });
  </script>
</body>
</html>

✅ PHP 后端（file.php）

htmlppt.skill

把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。

下载

<?php
// 检查 GET 参数是否存在且非空
if (isset($_GET['text']) && trim($_GET['text']) !== '') {
    $textFromHtml = htmlspecialchars(trim($_GET['text']), ENT_QUOTES, 'UTF-8');
    echo "<p>✅ 接收到的 HTML 内容：</p>";
    echo "<pre class="brush:php;toolbar:false;">" . nl2br(htmlspecialchars($textFromHtml)) . "

"; echo "

（已做 XSS 防护与格式化输出）

"; } else { echo "

⚠️ 未收到有效文本参数，请检查前端编码与请求 URL。

"; } ?>

? 注意事项与最佳实践：

✅ 必须使用 encodeURIComponent()：直接拼接 innerText 或 textContent 可能导致 URL 解析错误（如 & 被误判为参数分隔符）；
✅ PHP 端务必校验并过滤输入：$_GET 数据属于外部不可信来源，应始终验证 isset() 和 trim()，并使用 htmlspecialchars() 防止 XSS；
⚠️ GET 请求有长度限制：适用于中短文本（建议 ≤ 2KB）；若需传输大段内容（如富文本、JSON），应改用 POST + $.ajax() 显式配置；
✅ 兼容性提示：innerText 在旧版 IE 中支持良好；现代项目推荐用 textContent（更标准），二者在多数场景下效果一致。

总结而言，无需表单、不依赖 POST，仅靠 URL 参数 + 前后端协同编码/解码，即可实现 HTML 动态内容向 PHP 的可靠传递。这是一种轻量、直观且符合 RESTful 风格的数据交互方式，特别适合配置类、状态快照类场景。

如何在 Moodle 表单中正确传递并隐藏 ID 字段以实现安全更新

Laravel 9 中实现定时调用控制器逻辑的最佳实践：服务层解耦与调度器集成

Laravel 9 中实现定时任务调用业务逻辑的正确实践

如何在 PHP 中更新对象数组中特定属性的值

如何在 PHP 中更新对象数组中特定属性值而不改变数组键

HTML速学教程(入门课程)

HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！

下载

相关标签:

php html ajax

本站声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：Flask中正确传递并渲染清洗后的爬取数据下一篇：如何在 Django 中通过表单向服务器提交用户数据

作者最新文章

Excel 切片器怎么用？一键筛选数据的可视化按钮

2026-10-29 16:15

Java Web 应用中静态方法的正确使用指南：何时安全、何时危险

2026-10-29 16:16

如何在 D3 地图中精准显示美国州/加拿大省的缩写标签（仅限视口内部分区域）

2026-10-29 16:18

《浣熊推币机：混沌全开版》将于11月10日登陆主机平台

2026-10-29 16:20

Bose 推出全新Bose有线消噪耳塞

2026-10-29 16:20

AI做中学创未来｜智源SoulAgent持续拓展教育应用

2026-10-29 16:24

PyMongo 中 maxIdleTimeMS 参数的行为详解

2026-10-29 16:24

如何在 D3 地图中精准显示美国州/加拿大省的缩写标签（仅限行程覆盖区域）

2026-10-29 16:30

Go 中使用 channel 传递结构体指针时的数据竞争问题解析

2026-10-29 16:34

如何消除下拉菜单旁的多余空白空间

2026-10-29 16:39

热门AI工具

UP简历 Hot

一款AI办公效率工具，主要用于基于AI技术的免费在线简历制作工具，适合需要提升相关任务效率的用户。

AI办公学习工作效率

SkildArt Hot

SkildArt是一款AI文本写作工具，一站式 AI 视觉创作平台。

电商工具

创客贴AI Hot

创客贴AI是一款AI图像与设计工具，AI辅助的智能在线设计工具。

AI设计工具

墨刀AI Hot

一款AI图像与设计工具，主要用于产品经理的专属智能体，适合需要提升相关任务效率的用户。

AI设计工具 Agent智能体

豆包大模型

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

AI编程开发 AI大模型

Atoms Hot

Atoms是一款AI智能体工具，第一支自动构建真实业务的 AI 团队。

Agent智能体

WorkBuddy

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

AI办公学习 Agent智能体

音述AI Hot

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

AI音频制作音乐创作

DeepSeek

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

AI编程开发 AI聊天问答

相关专题

PHP API接口开发与RESTful实践

本专题聚焦 PHP在API接口开发中的应用，系统讲解 RESTful 架构设计原则、路由处理、请求参数解析、JSON数据返回、身份验证（Token/JWT）、跨域处理以及接口调试与异常处理。通过实战案例（如用户管理系统、商品信息接口服务），帮助开发者掌握 PHP构建高效、可维护的RESTful API服务能力。

564

2025.11.26

json数据格式

JSON是一种轻量级的数据交换格式。本专题为大家带来json数据格式相关文章，帮助大家解决问题。

2215

2023.08.07

json是什么

JSON是一种轻量级的数据交换格式，具有简洁、易读、跨平台和语言的特点，JSON数据是通过键值对的方式进行组织，其中键是字符串，值可以是字符串、数值、布尔值、数组、对象或者null，在Web开发、数据交换和配置文件等方面得到广泛应用。本专题为大家提供json相关的文章、下载、课程内容，供大家免费下载体验。

3522

2023.08.23

jquery怎么操作json

操作的方法有：1、“$.parseJSON(jsonString)”2、“$.getJSON(url, data, success)”；3、“$.each(obj, callback)”；4、“$.ajax()”。更多jquery怎么操作json的详细内容，可以访问本专题下面的文章。

1176

2023.10.13

go语言处理json数据方法

本专题整合了go语言中处理json数据方法，阅读专题下面的文章了解更多详细内容。

4059

2025.09.10

jquery插件有哪些

jquery插件有jQuery UI、jQuery Validate、jQuery DataTables、jQuery Slick、jQuery LazyLoad、jQuery Countdown、jQuery Lightbox、jQuery FullCalendar、jQuery Chosen和jQuery EasyUI等。本专题为大家提供jquery插件相关的文章、下载、课程内容，供大家免费下载体验。

601

2023.09.12

jquery怎么操作json

1176

2023.10.13

jquery删除元素的方法

jquery可以通过.remove() 方法、 .detach() 方法、.empty() 方法、.unwrap() 方法、.replaceWith() 方法、.html('') 方法和.hide() 方法来删除元素。更多关于jquery相关的问题，详情请看本专题下面的文章。php中文网欢迎大家前来学习。

2282

2023.11.10