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

碧海醫心

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

154人浏览过

来源于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）

紫东太初

中科院和武汉AI研究院推出的新一代大模型

下载

<?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 风格的数据交互方式，特别适合配置类、状态快照类场景。

如何在表单提交失败后正确显示对应字段的错误提示信息

如何在 PHP 中执行两个 SQL 查询并分别生成 HTML 下拉列表

html中页面如何连接数据库数据类型

php文件中如何输出一段html文件夹

如何将数据库的值传入html表单中

HTML速学教程(入门课程)

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

下载

相关标签:

php html ajax restful json jquery ajax xss dom

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

上一篇：Flask中正确传递并渲染清洗后的爬取数据下一篇：暂无

作者最新文章

HTML 表格中正确设置行列标题的完整指南

2026-02-17 09:24

有内鬼！《绝地潜兵2》玩家为保卫生化人而击杀队友

2026-02-17 09:29

Ursina 中的“灯光效果”真相：如何用投影着色器模拟光照

2026-02-17 09:37

如何为不同 Maven 插件指定独立的 Java 版本运行环境

2026-02-17 09:47

如何通过导航标签页跳转并自动选择表单选项

2026-02-17 09:51

《生化危机9：安魂曲》新截图恐怖怪物逼近男女主角

2026-02-17 09:54

Java 中让 JMenu 的弹出菜单向上展开的完整实现方案

2026-02-17 10:02

Java 中如何在构造器内正确初始化内部类对象并存入外部类数组

2026-02-17 10:05

如何在父元素上安全拦截粘贴事件，仅当目标元素无原生粘贴行为时触发自定义逻辑

2026-02-17 10:13

Go 中使用 math/rand 生成随机数时为何总是返回相同结果？

2026-02-17 10:17

热门AI工具

DeepSeek

幻方量化公司旗下的开源大模型平台

AI 编程开发 AI 聊天问答

豆包大模型

字节跳动自主研发的一系列大型语言模型

AI 编程开发 AI大模型

通义千问

阿里巴巴推出的全能AI助手

AI 编程开发 Agent智能体

腾讯元宝

腾讯混元平台推出的AI助手

文档处理 AI 聊天问答

文心一言

文心一言是百度开发的AI聊天机器人，通过对话可以生成各种形式的内容。

AI 编程开发 AI 文本写作

讯飞写作

基于讯飞星火大模型的AI写作工具，可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

AI 文本写作中文写作

即梦AI

一站式AI创作平台，免费AI图片和视频生成。

AI 图片处理图片拼接

ChatGPT

最最强大的AI聊天机器人程序，ChatGPT不单是聊天机器人，还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

AI 编程开发 AI 文本写作

智谱清言 - 免费全能的AI助手

AI 编程开发 Agent智能体

相关专题

PHP API接口开发与RESTful实践

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

173

2025.11.26

json数据格式

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

442

2023.08.07

json是什么

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

544

2023.08.23

jquery怎么操作json

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

322

2023.10.13

go语言处理json数据方法

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

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插件相关的文章、下载、课程内容，供大家免费下载体验。

155

2023.09.12

jquery怎么操作json

322

2023.10.13

jquery删除元素的方法

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

403

2023.11.10