如何在不使用表单输入字段的情况下通过 Ajax 将视图数据发送到控制器

时间：2026-07-13

本文介绍如何利用 Ja vaScript 和 Ajax（如 jQuery）从 HTML 元素中动态提取文本、图片路径等非表单内容，并安全、高效地提交至后端控制器，实现无的数据传递与数据库存储。

Web 开发中经常遇到这样一个问题：页面上已经渲染好了商品信息——图片、名称、价格，但这些内容并没有被包裹在或 </code> 这类表单控件里。传统的 POST 表单提交方式在这里就失灵了，因为它只能自动收集表单字段。不过别担心，解决方案其实非常直接：通过 Ja vaScript 动态读取 DOM 元素的内容，再借助 Ajax 主动发起请求，就能把数据乖乖送到后端控制器手里。</p> <h3>✅ 实现步骤概览</h3> <ol> <li><strong>定位并提取目标数据</strong>：使用 <code>document.querySelector()</code> 或 jQuery 选择器获取 <code><img></code> 的 <code>src</code>、<code><p></code> 的文本内容；</li> <li><strong>构造请求载荷（payload）</strong>：将提取的数据组织为键值对对象（如 <code>{ image: "...", name: "...", price: "..." }</code>）；</li> <li><strong>发起 Ajax 请求</strong>：推荐使用 <code>fetch()</code>（现代标准）或 jQuery 的 <code>$.ajax()</code> 发送 POST 请求；</li> <li><strong>后端接收与处理</strong>：控制器解析 JSON 数据，校验后存入数据库表（如 <code>shopping_cart</code>）。</li> </ol> <h3>? 示例代码（前端）</h3> <p>假设你的 HTML 结构保持不变，可以在页面底部添加如下脚本（记得放在 <code></body></code> 前，或者用 <code>DOMContentLoaded</code> 事件保证 DOM 已加载）：</p> <pre class="brush:php;toolbar:false;"><script>// 使用原生 fetch API（无需 jQuery）document.addEventListener('DOMContentLoaded', function() { const addToCartBtn = document.createElement('button'); addToCartBtn.textContent = 'Add to Cart'; addToCartBtn.classList.add('btn-add'); document.getElementById('individualitem').appendChild(addToCartBtn); addToCartBtn.addEventListener('click', function() { const imgSrc = document.querySelector('#individualitem img').src; const name = document.querySelector('#individualitem p:nth-child(2)').textContent.trim(); const price = document.querySelector('#individualitem p:nth-child(3)').textContent.trim(); const payload = { image: imgSrc, name: name, price: parseFloat(price.replace(/[^0-9.]/g, '')) || 0 }; fetch('/shoecart', { method: 'POST', headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.content || '' }, body: JSON.stringify(payload) }) .then(response => response.json()) .then(data => { if (data.success) { alert('Item added to cart!'); } }) .catch(err => console.error('Submission failed:', err)); });});</script></pre> <blockquote><p>? <strong>安全提示</strong>：务必在 Lara vel、Spring Boot 等框架中启用 CSRF 保护，并在 <code><head></code> 中添加 <code><meta name="csrf-token" content="{{ csrf_token() }}"></code>（PHP/Lara vel 示例），其他框架请按规范配置。</p></blockquote> <h3>? 后端控制器示例（以 Lara vel 为例）</h3> <pre class="brush:php;toolbar:false;">// routes/web.phpRoute::post('/shoecart', [CartController::class, 'store']);// app/Http/Controllers/CartController.phppublic function store(Request $request){ $validated = $request->validate([ 'image' => 'required|url', 'name' => 'required|string|max:255', 'price' => 'required|numeric|min:0.01' ]); ShoppingCart::create($validated); return response()->json(['success' => true]);}</pre> <h3>⚠️ 注意事项</h3> <ul> <li>避免直接依赖 DOM 顺序（如 <code>p:nth-child(2)</code>），建议为关键元素添加语义化 class 或 <code>data-*</code> 属性（例如 <code><p class="item-name">name</p></code>），提升可维护性；</li> <li>图片路径若为相对路径（如 <code>storage/pic1.png</code>），后端需确保能正确解析或转换为绝对 URL；</li> <li>前端应做基础格式校验（如价格是否为数字），但<strong>所有关键校验必须在服务端重复执行</strong>，不可信任客户端输入；</li> <li>若需批量提交多个商品，可遍历 <code>.flex-container #individualitem</code> 的所有子项，构建数组再发送。</li> </ul> <p>通过这种方式，你完全摆脱了“必须用表单输入”的限制，灵活适配卡片式布局、动态渲染列表等现代 UI 场景，同时保持前后端职责清晰、数据传输可控可靠。</p> </div> <div class="laiyuan"> 本文转载于：https://www.php.cn/faq/2814776.html 如有侵犯，请联系zhengruancom@outlook.com删除。<br/>免责声明：正软商城发布此文仅为传递信息，不代表正软商城认同其观点或证实其描述。 </div> <div class="legal_box2"> <div class="legal_title"> <h2>同类商品 <em></em></h2> <div class="clear"></div> </div> <ul class="shapo_list"> <li> <a href="https://m.zhengruan.com/news/soft69"> <div class="img_box"> <img src="https://m.zhengruan.com/uploads/20200428/cd14258f0172a172f8a80798c38c1577.jpg" alt="DAEMON Tools Lite 10"> </div> <h2> DAEMON Tools Lite 10 </h2> <p> <em>￥</em>0.00 <del>￥0.00 </del> </p> </a> </li> <li> <a href="https://m.zhengruan.com/news/soft67"> <div class="img_box"> <img src="https://m.zhengruan.com/uploads/20200428/fbf473d4d30833324962e441c0f18265.jpg" alt="DAEMON Tools Ultra 5"> </div> <h2> DAEMON Tools Ultra 5 </h2> <p> <em>￥</em>0.00 <del>￥0.00 </del> </p> </a> </li> <li> <a href="https://m.zhengruan.com/news/soft68"> <div class="img_box"> <img src="https://m.zhengruan.com/uploads/20200428/1ae250399abf4ff584d86d52c79b5bb6.jpg" alt="DAEMON Tools Pro 8"> </div> <h2> DAEMON Tools Pro 8 </h2> <p> <em>￥</em>0.00 <del>￥0.00 </del> </p> </a> </li> <li> <a href="https://m.zhengruan.com/news/soft29"> <div class="img_box"> <img src="https://m.zhengruan.com/uploads/20200428/77d3c04866e1b842d9b6ff0e9368bdf8.jpg" alt="CorelDRAW X8 简体中文"> </div> <h2> CorelDRAW X8 简体中文 </h2> <p> <em>￥</em>0.00 <del>￥0.00 </del> </p> </a> </li> <div class="clear"></div> </ul> </div> <div class="legal_box2"> <div class="legal_title"> <h2>相关文章 <em></em></h2> <a href="https://m.zhengruan.com/newslist/313_1"> 更多 <em class="icon"></em></a> <div class="clear"></div> </div> <ul class="gal_article_list"> <li> <a href="https://m.zhengruan.com/news/767961"> <em class="icon"></em> <p> python 且：概念解析、环境配置与实操验证指南 </p> </a> </li> <li> <a href="https://m.zhengruan.com/news/767960"> <em class="icon"></em> <p> python 雷达图开发环境搭建与验证：后端开发者实操指南 </p> </a> </li> <li> <a href="https://m.zhengruan.com/news/767959"> <em class="icon"></em> <p> 如何卸载python：环境隔离、依赖清理与验证流程的避坑指南 </p> </a> </li> <li> <a href="https://m.zhengruan.com/news/767958"> <em class="icon"></em> <p> python安装步骤：从环境检查到虚拟环境隔离的故障排查指南 </p> </a> </li> <li> <a href="https://m.zhengruan.com/news/767957"> <em class="icon"></em> <p> python设置环境变量：从原理到实操的完整验证流程 </p> </a> </li> </ul> </div> </main> <footer> <div class="main_foot"> <a href="https://m.zhengruan.com" class="foot_logo"><img src="https://m.zhengruan.com/statics/mob/zrimages/logo_b.png" alt="正软"></a> <p>联系方式: bd@zhengruan.com<br>网站备案号：苏ICP备2026018738号-1</p> <ul> <li class="one"><a href="https://m.zhengruan.com" class="cBlack"><b class="i_index"></b>首页</a></li> <li><a href="http://www.zhengruan.com" class="cBlack"><b class="i_pc"></b>电脑端</a></li> <li><span class="return_top"><b class="i_top"></b>顶部</span></li> </ul> </div> </footer> <script> var _hmt = _hmt || []; (function () { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?3835539565b311d85319cd21da8fd0d9"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script>  <script> var _paq = window._paq = window._paq || []; /* tracker methods like "setCustomDimension" should be called before "trackPageView" */ _paq.push(['trackPageView']); _paq.push(['enableLinkTracking']); (function () { var u = "https://tongji.php.cn/"; _paq.push(['setTrackerUrl', u + 'matomo.php']); _paq.push(['setSiteId', '36']); var d = document, g = d.createElement('script'), s = d.getElementsByTagName('script')[0]; g.async = true; g.src = u + 'matomo.js'; s.parentNode.insertBefore(g, s); })(); </script>  </body> <script> function countView(){ $.ajax({ type: "post", url: "/countView?&time="+new Date().getTime(), data:{'type':'news','id':"705774"}, async:false, dataType: "json", success: function(result){ console.log(result) }, error:function(){ } }); } $(function(){ countView(); }) </script> </html>