首页 > 编程语言 >无表单字段，Ajax发送视图数据到控制器

无表单字段，Ajax发送视图数据到控制器

来源：互联网 2026-07-15 19:34:11

本方法采用JavaScript动态读取DOM元素中的文本、图片路径等非表单内容，通过Ajax（如fetch或jQuery）构造键值对对象，以POST请求发送至后端控制器，经校验后存入数据库，实现无需表单控件的数据传递与存储，适用于动态网页数据异步提交。

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

Web 开发中经常遇到这样一个问题：页面上已经渲染好了商品信息——图片、名称、价格，但这些内容并没有被包裹在或 </code> 这类表单控件里。传统的 POST 表单提交方式在这里就失灵了，因为它只能自动收集表单字段。不过别担心，解决方案其实非常直接：通过 JavaScript 动态读取 DOM 元素的内容，再借助 Ajax 主动发起请求，就能把数据送到后端控制器。</p> <h2>实现步骤概览</h2> <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> <h2>示例代码（前端）</h2> <p>假设你的 HTML 结构保持不变，可以在页面底部添加如下脚本（记得放在 <code></body></code> 前，或者用 <code>DOMContentLoaded</code> 事件保证 DOM 已加载）：</p><p><strong>长期稳定更新的攒劲资源：</strong><a href="https://pan.quark.cn/s/c823b5b0582a?pwd=BB2k" rel="nofollow" target="_blank"><strong><span style="color:#00D5FF;"> >>>点此立即查看<<<</span></strong></a></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>安全提示：务必在 Laravel、Spring Boot 等框架中启用 CSRF 保护，并在 <code><head></code> 中添加 <code><meta name="csrf-token" content="{{ csrf_token() }}"></code>（PHP/Laravel 示例），其他框架请按规范配置。</p></blockquote> <h2>后端控制器示例（以 Laravel 为例）</h2> <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> <h2>注意事项</h2> <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>前端应做基础格式校验（如价格是否为数字），但所有关键校验必须在服务端重复执行，不可信任客户端输入；</li> <li>若需批量提交多个商品，可遍历 <code>.flex-container #individualitem</code> 的所有子项，构建数组再发送。</li> </ul> <p>通过这种方式，你完全摆脱了“必须用表单输入”的限制，灵活适配卡片式布局、动态渲染列表等现代 UI 场景，同时保持前后端职责清晰、数据传输可控可靠。</p> </div> <div class="mnxDqzcMsg"> <b></b> <p>侠游戏发布此文仅为了传递信息，不代表侠游戏网站认同其观点或证实其描述</p> <div class="clear"></div> </div> </div>   <div class="mnxDqzcBox"> <div class="mnxPhbTitle"> <b></b> <h2>相关攻略</h2> <em><a href="/newslist/915_1.html" title="更多"><i>更多</i><b></b></a></em> <div class="clear"></div> </div> <div class="mnxZxtjBox"> <ul class="mnxZxglList"> <li> <a href="/article/694205/" title="黑猫女生网名可爱的含义(精选100个)" class="aBlack">黑猫女生网名可爱的含义(精选100个)</a> <span></span> <div class="clear"></div> </li> <li> <a href="/article/694062/" title="可爱的带龙网名女生名字(精选100个)" class="aBlack">可爱的带龙网名女生名字(精选100个)</a> <span></span> <div class="clear"></div> </li> <li> <a href="/article/694052/" title="鲜姓的谐音网名女生可爱(精选100个)" class="aBlack">鲜姓的谐音网名女生可爱(精选100个)</a> <span></span> <div class="clear"></div> </li> <li> <a href="/article/693615/" title="养猫人士的网名女生可爱(精选100个)" class="aBlack">养猫人士的网名女生可爱(精选100个)</a> <span></span> <div class="clear"></div> </li> <li> <a href="/article/693286/" title="日落大道的网名女生可爱(精选100个)" class="aBlack">日落大道的网名女生可爱(精选100个)</a> <span></span> <div class="clear"></div> </li> <li> <a href="/article/692735/" title="爱豆日系网名女生可爱(精选100个)" class="aBlack">爱豆日系网名女生可爱(精选100个)</a> <span></span> <div class="clear"></div> </li> </ul> </div> </div> <div class="mnxDqzcBox"> <div class="mnxPhbTitle"> <b></b> <h2>同类更新</h2> <em><a href="/newslist/915_1.html" title="更多"><i>更多</i><b></b></a></em> <div class="clear"></div> </div> <ul class="mnxSplbList"> <li> <span> <a href="/article/996850/" title="NN兑换CDKEY指南"><img src="https://img.xiayx.com/uploadfile/news/202607316a6c83f443dcc..jpg" alt="NN兑换CDKEY指南" onerror="this.src='/style/style2022/mob/mobimages/moren/236_132.png'" /></a> </span> <dl> <dt><a href="/article/996850/" title="NN兑换CDKEY指南" class="aBlack">NN兑换CDKEY指南</a></dt> </dl> </li> <li> <span> <a href="/article/996825/" title="MATLAB绘制dy2y脉冲响应"><img src="https://img.xiayx.com/uploadfile/news/202607316a6c81a8ab40d..jpg" alt="MATLAB绘制dy2y脉冲响应" onerror="this.src='/style/style2022/mob/mobimages/moren/236_132.png'" /></a> </span> <dl> <dt><a href="/article/996825/" title="MATLAB绘制dy2y脉冲响应" class="aBlack">MATLAB绘制dy2y脉冲响应</a></dt> </dl> </li> <li> <span> <a href="/article/996809/" title="EViews VAR模型建模步骤详解"><img src="https://img.xiayx.com/uploadfile/news/202607316a6c804549ee3..jpg" alt="EViews VAR模型建模步骤详解" onerror="this.src='/style/style2022/mob/mobimages/moren/236_132.png'" /></a> </span> <dl> <dt><a href="/article/996809/" title="EViews VAR模型建模步骤详解" class="aBlack">EViews VAR模型建模步骤详解</a></dt> </dl> </li> <li> <span> <a href="/article/996808/" title="音乐变声调速一键切换"><img src="https://img.xiayx.com/uploadfile/news/202607316a6c803e0894b..jpg" alt="音乐变声调速一键切换" onerror="this.src='/style/style2022/mob/mobimages/moren/236_132.png'" /></a> </span> <dl> <dt><a href="/article/996808/" title="音乐变声调速一键切换" class="aBlack">音乐变声调速一键切换</a></dt> </dl> </li> <li> <span> <a href="/article/996787/" title="学而思一对一预约流程指南"><img src="https://img.xiayx.com/uploadfile/news/202607316a6c7ea225731..jpg" alt="学而思一对一预约流程指南" onerror="this.src='/style/style2022/mob/mobimages/moren/236_132.png'" /></a> </span> <dl> <dt><a href="/article/996787/" title="学而思一对一预约流程指南" class="aBlack">学而思一对一预约流程指南</a></dt> </dl> </li> <li> <span> <a href="/article/996786/" title="Ubuntu 14.04 Cairo-Dock图标跳动配置"><img src="https://img.xiayx.com/uploadfile/news/202607316a6c7e9b966ed..jpg" alt="Ubuntu 14.04 Cairo-Dock图标跳动配置" onerror="this.src='/style/style2022/mob/mobimages/moren/236_132.png'" /></a> </span> <dl> <dt><a href="/article/996786/" title="Ubuntu 14.04 Cairo-Dock图标跳动配置" class="aBlack">Ubuntu 14.04 Cairo-Dock图标跳动配置</a></dt> </dl> </li> <div class="clear"></div> </ul> </div> <div class="mnxDqzcBox"> <div class="mnxPhbTitle"> <b></b> <h2>热游推荐</h2> <em><a href="/sy/" title="更多"><i>更多</i><b></b></a></em> <div class="clear"></div> </div> <ul class="mnxSyyxList"> <li> <span><a href="/xiazai/902144362.html" title="DreamStudio"><img src="https://img.xiayx.com/uploadfile/info/20260630/1782787849669912.jpg" alt="DreamStudio" onerror="this.src='/style/style2022/mob/mobimages/moren/236_132.png'" /></a></span> <div class="mnxSyyxCont"> <dl> <dt><a href="/xiazai/902144362.html" title="DreamStudio" class="aBlack">DreamStudio</a></dt> <dd class="cont1">Android/ <i>|</i> <a href="/xiazai/1048_1/" title="AI绘图" class="bBlack">AI绘图</a></dd> <dd>2026-06-30</dd> </dl> <em><a href="/xiazai/902144362.html" title="下载">下载</a></em> <div class="clear"></div> </div> <div class="clear"></div> </li> <li> <span><a href="/xiazai/902144361.html" title="Pixlr"><img src="https://img.xiayx.com/uploadfile/info/20260630/1782787989689086.png" alt="Pixlr" onerror="this.src='/style/style2022/mob/mobimages/moren/236_132.png'" /></a></span> <div class="mnxSyyxCont"> <dl> <dt><a href="/xiazai/902144361.html" title="Pixlr" class="aBlack">Pixlr</a></dt> <dd class="cont1">Android/ <i>|</i> <a href="/xiazai/1048_1/" title="AI绘图" class="bBlack">AI绘图</a></dd> <dd>2026-06-30</dd> </dl> <em><a href="/xiazai/902144361.html" title="下载">下载</a></em> <div class="clear"></div> </div> <div class="clear"></div> </li> <li> <span><a href="/xiazai/902144360.html" title="Playground AI"><img src="https://img.xiayx.com/uploadfile/info/20260630/1782788078809028.png" alt="Playground AI" onerror="this.src='/style/style2022/mob/mobimages/moren/236_132.png'" /></a></span> <div class="mnxSyyxCont"> <dl> <dt><a href="/xiazai/902144360.html" title="Playground AI" class="aBlack">Playground AI</a></dt> <dd class="cont1">Android/ <i>|</i> <a href="/xiazai/1048_1/" title="AI绘图" class="bBlack">AI绘图</a></dd> <dd>2026-06-30</dd> </dl> <em><a href="/xiazai/902144360.html" title="下载">下载</a></em> <div class="clear"></div> </div> <div class="clear"></div> </li> <li> <span><a href="/xiazai/902144359.html" title="Adobe Firefly"><img src="https://img.xiayx.com/uploadfile/info/20260630/1782788340724269.png" alt="Adobe Firefly" onerror="this.src='/style/style2022/mob/mobimages/moren/236_132.png'" /></a></span> <div class="mnxSyyxCont"> <dl> <dt><a href="/xiazai/902144359.html" title="Adobe Firefly" class="aBlack">Adobe Firefly</a></dt> <dd class="cont1">Android/ <i>|</i> <a href="/xiazai/1048_1/" title="AI绘图" class="bBlack">AI绘图</a></dd> <dd>2026-06-30</dd> </dl> <em><a href="/xiazai/902144359.html" title="下载">下载</a></em> <div class="clear"></div> </div> <div class="clear"></div> </li> <li> <span><a href="/xiazai/902144358.html" title="Canva AI"><img src="https://img.xiayx.com/uploadfile/info/20260630/1782788417338107.png" alt="Canva AI" onerror="this.src='/style/style2022/mob/mobimages/moren/236_132.png'" /></a></span> <div class="mnxSyyxCont"> <dl> <dt><a href="/xiazai/902144358.html" title="Canva AI" class="aBlack">Canva AI</a></dt> <dd class="cont1">Android/ <i>|</i> <a href="/xiazai/1048_1/" title="AI绘图" class="bBlack">AI绘图</a></dd> <dd>2026-06-30</dd> </dl> <em><a href="/xiazai/902144358.html" title="下载">下载</a></em> <div class="clear"></div> </div> <div class="clear"></div> </li> <li> <span><a href="/xiazai/902144357.html" title="Ideogram"><img src="https://img.xiayx.com/uploadfile/info/20260630/1782788497796805.png" alt="Ideogram" onerror="this.src='/style/style2022/mob/mobimages/moren/236_132.png'" /></a></span> <div class="mnxSyyxCont"> <dl> <dt><a href="/xiazai/902144357.html" title="Ideogram" class="aBlack">Ideogram</a></dt> <dd class="cont1">Android/ <i>|</i> <a href="/xiazai/1048_1/" title="AI绘图" class="bBlack">AI绘图</a></dd> <dd>2026-06-30</dd> </dl> <em><a href="/xiazai/902144357.html" title="下载">下载</a></em> <div class="clear"></div> </div> <div class="clear"></div> </li> <li> <span><a href="/xiazai/902144356.html" title="Leonardo AI"><img src="https://img.xiayx.com/uploadfile/info/20260630/17827885894097.jpg" alt="Leonardo AI" onerror="this.src='/style/style2022/mob/mobimages/moren/236_132.png'" /></a></span> <div class="mnxSyyxCont"> <dl> <dt><a href="/xiazai/902144356.html" title="Leonardo AI" class="aBlack">Leonardo AI</a></dt> <dd class="cont1">Android/ <i>|</i> <a href="/xiazai/1048_1/" title="AI绘图" class="bBlack">AI绘图</a></dd> <dd>2026-06-30</dd> </dl> <em><a href="/xiazai/902144356.html" title="下载">下载</a></em> <div class="clear"></div> </div> <div class="clear"></div> </li> <li> <span><a href="/xiazai/902144355.html" title="Stable Diffusion"><img src="https://img.xiayx.com/uploadfile/info/20260630/1782788859817029.png" alt="Stable Diffusion" onerror="this.src='/style/style2022/mob/mobimages/moren/236_132.png'" /></a></span> <div class="mnxSyyxCont"> <dl> <dt><a href="/xiazai/902144355.html" title="Stable Diffusion" class="aBlack">Stable Diffusion</a></dt> <dd class="cont1">Android/ <i>|</i> <a href="/xiazai/1048_1/" title="AI绘图" class="bBlack">AI绘图</a></dd> <dd>2026-06-30</dd> </dl> <em><a href="/xiazai/902144355.html" title="下载">下载</a></em> <div class="clear"></div> </div> <div class="clear"></div> </li> </ul> </div> <div class="mnxDqzcBox2"> <div class="mnxPhbTitle"> <b></b> <h2>精彩专题</h2> <em><a href="/zhuanti/bb_1/" title="更多"><i>更多</i><b></b></a></em> <div class="clear"></div> </div> <ul class="mnxJcztList"> <li> <a href="/zhuanti/404232/" title="代号鸢" class="aWhite"> <img src="/upload/20230516/168420084782584.jpg" alt="代号鸢" onerror="this.src='/style/style2022/mob/mobimages/moren/236_132.png'" /> <span>代号鸢</span> </a> </li> <li> <a href="/zhuanti/396555/" title="都是人情世故" class="aWhite"> <img src="/upload/20230428/1682647396684343.jpg" alt="都是人情世故" onerror="this.src='/style/style2022/mob/mobimages/moren/236_132.png'" /> <span>都是人情世故</span> </a> </li> <li> <a href="/zhuanti/391309/" title="鹅鸭杀" class="aWhite"> <img src="/upload/20230421/1682054340389332.png" alt="鹅鸭杀" onerror="this.src='/style/style2022/mob/mobimages/moren/236_132.png'" /> <span>鹅鸭杀</span> </a> </li> <li> <a href="/zhuanti/389498/" title="轮回茶肆" class="aWhite"> <img src="/upload/20230517/1684288431506773.png" alt="轮回茶肆" onerror="this.src='/style/style2022/mob/mobimages/moren/236_132.png'" /> <span>轮回茶肆</span> </a> </li> <li> <a href="/zhuanti/388632/" title="我和我的大学" class="aWhite"> <img src="/upload/20230421/1682056161739328.png" alt="我和我的大学" onerror="this.src='/style/style2022/mob/mobimages/moren/236_132.png'" /> <span>我和我的大学</span> </a> </li> <li> <a href="/zhuanti/387989/" title="愣子跑酷" class="aWhite"> <img src="/upload/20230420/1681954517272978.png" alt="愣子跑酷" onerror="this.src='/style/style2022/mob/mobimages/moren/236_132.png'" /> <span>愣子跑酷</span> </a> </li> <div class="clear"></div> </ul> </div> </div>   <div class="mnxFoot"> <div class="mnxFootMenu"> <div class="mnxFootMenuIn"> <a href="/game/988_1/" title="手游">手游</a> <a href="/zhuanti/bb_1" title="专题">专题</a> <a href="/newslist/825_1.html" title="攻略">攻略</a> <a href="/xiazai/938_1/" title="App下载">App下载</a> <a href="/newslist/1004_1.html" style="color:#303133;">web3</a> <div class="clear"></div> </div> </div> <div class="mnxFootFan"> <div class="mnxFootFanIn"> <a href="/" title="返回首页">返回首页</a> <a href="#" title="回到顶部">回到顶部</a> <div class="clear"></div> </div> </div> <div class="mnxFootMsg"> <dl> <dt>湘ICP备14008430号-1 湘公网安备 43070302000280号</dt> <dd>All Rights Reserved </dd> </dl> <dl> <dt>本站为非盈利网站，不接受任何广告。本站所有软件，都由网友</dt> <dd>上传，如有侵犯你的版权，请发邮件给xiayx666@163.com</dd> </dl> <dl> <dt>抵制不良色情、反动、暴力游戏。注意自我保护，谨防受骗上当。</dt> <dd>适度游戏益脑，沉迷游戏伤身。合理安排时间，享受健康生活。</dd> </dl> </div> </div> <script src="https://style.xiayx.com/js/jumbpc.js?v=20260710" type="text/javascript"></script> <script> var _hmt = _hmt || []; (function () { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?075ab887d0dd167df1a8b41de83e8c61"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script>  </div> </body> </html>