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

　　发布于2026-07-13　阅读（0）

扫一扫，手机访问

本文介绍如何利用 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="zrSypBox"> <p>上一篇：<a href="https://www.zhengruan.com/news/705773" title="Linux Golang日志如何实现多线程安全" class="aRed">Linux Golang日志如何实现多线程安全</a></p> <p class="right">下一篇：<a href="https://www.zhengruan.com/news/705775" title="如何使用 Pandas 为 CSV 文件批量添加计算列并保存结果" class="aRed">如何使用 Pandas 为 CSV 文件批量添加计算列并保存结果</a></p> <div class="clear"></div> </div> <div class="zrDtxwBox"> <div class="zrByddTitle"> <span><h2>产品推荐</h2></span> </div> <ul class="zrTxdmList3"> <li class="one"> <div class="zrTxdmCont5"> <div class="zrTxdmImg4 dianji"> <a href="https://www.zhengruan.com/news/soft69" class="img"><img onerror="this.src='https://www.zhengruan.com/statics/www/zrimages/404_bg.png'" src="https://www.zhengruan.com/uploads/20200428/cd14258f0172a172f8a80798c38c1577.jpg" alt="DAEMON Tools Lite 10"></a> <span class="xianshi"> <p>售后无忧</p> <em><a href="https://www.zhengruan.com/news/soft69" title="立即购买>">立即购买></a></em> </span> </div> <div class="zrTxdmIn4"> <dl> <dt><a href="https://www.zhengruan.com/news/soft69" title="DAEMON Tools Lite 10【序列号终身授权 + 中文版 + Win】" class="aBlack">DAEMON Tools Lite 10【序列号终身授权 + 中文版 + Win】</a></dt> <dd> <span>￥150.00</span> <p>office旗舰店</p> </dd> </dl> </div> </div> </li> <li > <div class="zrTxdmCont5"> <div class="zrTxdmImg4 dianji"> <a href="https://www.zhengruan.com/news/soft67" class="img"><img onerror="this.src='https://www.zhengruan.com/statics/www/zrimages/404_bg.png'" src="https://www.zhengruan.com/uploads/20200428/fbf473d4d30833324962e441c0f18265.jpg" alt="DAEMON Tools Ultra 5"></a> <span class="xianshi"> <p>售后无忧</p> <em><a href="https://www.zhengruan.com/news/soft67" title="立即购买>">立即购买></a></em> </span> </div> <div class="zrTxdmIn4"> <dl> <dt><a href="https://www.zhengruan.com/news/soft67" title="DAEMON Tools Ultra 5【序列号终身授权 + 中文版 + Win】" class="aBlack">DAEMON Tools Ultra 5【序列号终身授权 + 中文版 + Win】</a></dt> <dd> <span>￥198.00</span> <p>office旗舰店</p> </dd> </dl> </div> </div> </li> <li > <div class="zrTxdmCont5"> <div class="zrTxdmImg4 dianji"> <a href="https://www.zhengruan.com/news/soft68" class="img"><img onerror="this.src='https://www.zhengruan.com/statics/www/zrimages/404_bg.png'" src="https://www.zhengruan.com/uploads/20200428/1ae250399abf4ff584d86d52c79b5bb6.jpg" alt="DAEMON Tools Pro 8"></a> <span class="xianshi"> <p>售后无忧</p> <em><a href="https://www.zhengruan.com/news/soft68" title="立即购买>">立即购买></a></em> </span> </div> <div class="zrTxdmIn4"> <dl> <dt><a href="https://www.zhengruan.com/news/soft68" title="DAEMON Tools Pro 8【序列号终身授权 + 中文版 + Win】" class="aBlack">DAEMON Tools Pro 8【序列号终身授权 + 中文版 + Win】</a></dt> <dd> <span>￥189.00</span> <p>office旗舰店</p> </dd> </dl> </div> </div> </li> <li > <div class="zrTxdmCont5"> <div class="zrTxdmImg4 dianji"> <a href="https://www.zhengruan.com/news/soft29" class="img"><img onerror="this.src='https://www.zhengruan.com/statics/www/zrimages/404_bg.png'" src="https://www.zhengruan.com/uploads/20200428/77d3c04866e1b842d9b6ff0e9368bdf8.jpg" alt="CorelDRAW X8 简体中文"></a> <span class="xianshi"> <p>售后无忧</p> <em><a href="https://www.zhengruan.com/news/soft29" title="立即购买>">立即购买></a></em> </span> </div> <div class="zrTxdmIn4"> <dl> <dt><a href="https://www.zhengruan.com/news/soft29" title="CorelDRAW X8 简体中文【标准版 + Win】" class="aBlack">CorelDRAW X8 简体中文【标准版 + Win】</a></dt> <dd> <span>￥1788.00</span> <p>office旗舰店</p> </dd> </dl> </div> </div> </li> <div class="clear"></div> </ul> </div> </div> <ul class="zrZbrjList" style="padding-top:10px;"> <li> <a href="https://www.zhengruan.com/news/425221" class="img1" title="～a在C语言中是按位取反操作符，用于对变量a的每一位进行取反操作。具体来说，如果某一位是0，则变为1；如果是1，则变为0。需要注意的是，C语言中并没有“～”这个"> <img onerror="this.src='https://www.zhengruan.com/statics/www/zrimages/404_bg.png'" src="https://www.zhengruan.com/uploads/20250629/175120179723334.jpg" alt="～a在C语言中是按位取反操作符，用于对变量a的每一位进行取反操作。具体来说，如果某一位是0，则变为1；如果是1，则变为0。需要注意的是，C语言中并没有“～”这个"> <span>正版软件</span> </a> <dl> <dt><a href="https://www.zhengruan.com/news/425221" title="～a在C语言中是按位取反操作符，用于对变量a的每一位进行取反操作。具体来说，如果某一位是0，则变为1；如果是1，则变为0。需要注意的是，C语言中并没有“～”这个" class="aBlack">～a在C语言中是按位取反操作符，用于对变量a的每一位进行取反操作。具体来说，如果某一位是0，则变为1；如果是1，则变为0。需要注意的是，C语言中并没有“～”这个</a></dt> <dd class="cont1">在C语言中，~操作符的作用是对操作数的每一位进行取反操作。1）对于整数5，取反后变为-6；2）在嵌入式系统中，可用于控制LED灯开关；3）需注意有符号整数取反可能导致符号位变化；4）在网络编程中，可用于快速切换标志位状态。</dd> <dd class="cont2">  <span class="cont2"><b></b>昨天 08-18 13:51</span> <span class="cont4"><b></b>150</span> </dd> </dl> </li> <li> <a href="https://www.zhengruan.com/news/736200" class="img1" title="using namespace 使用中遇到的问题怎么解决"> <img onerror="this.src='https://www.zhengruan.com/statics/www/zrimages/404_bg.png'" src="https://www.zhengruan.com/uploads/20260807/178605885655125.webp" alt="using namespace 使用中遇到的问题怎么解决"> <span>正版软件</span> </a> <dl> <dt><a href="https://www.zhengruan.com/news/736200" title="using namespace 使用中遇到的问题怎么解决" class="aBlack">using namespace 使用中遇到的问题怎么解决</a></dt> <dd class="cont1">命名空间的基本概念与常见引入问题在C++等编程语言中，命名空间（namespace）是一种将代码标识符（如变量、函数、类名）封装在特定名称下的机制，其主要目的是避免命名冲突，尤其是在大型项目或使用多个第三方库时。使用“using namespace”指令可以将指定命名空间中的所有名称引入当前作用域，</dd> <dd class="cont2">  <span class="cont2"><b></b>12天前</span> <span class="cont4"><b></b>0</span> </dd> </dl> </li> <li> <a href="https://www.zhengruan.com/news/736199" class="img1" title="c语言函数递归实操经验总结：这些技巧很实用"> <img onerror="this.src='https://www.zhengruan.com/statics/www/zrimages/404_bg.png'" src="https://www.zhengruan.com/uploads/20260807/178605879214771.webp" alt="c语言函数递归实操经验总结：这些技巧很实用"> <span>正版软件</span> </a> <dl> <dt><a href="https://www.zhengruan.com/news/736199" title="c语言函数递归实操经验总结：这些技巧很实用" class="aBlack">c语言函数递归实操经验总结：这些技巧很实用</a></dt> <dd class="cont1">理解递归的基本原理在C语言中，递归是一种函数调用自身的编程技术。要掌握它，首先需要理解其核心思想：将一个复杂的大问题，分解为一个或几个与原问题相似但规模更小的子问题，直到子问题足够简单，可以直接求解。这个过程通常包含两个关键部分：递归出口和递归体。递归出口定义了问题何时不再继续分解，即最简单、可直接</dd> <dd class="cont2">  <span class="cont2"><b></b>12天前</span> <span class="cont4"><b></b>0</span> </dd> </dl> </li> <li> <a href="https://www.zhengruan.com/news/736198" class="img1" title="c语言函数递归怎么选？常见方案对比分析"> <img onerror="this.src='https://www.zhengruan.com/statics/www/zrimages/404_bg.png'" src="https://www.zhengruan.com/uploads/20260807/178605874187563.webp" alt="c语言函数递归怎么选？常见方案对比分析"> <span>正版软件</span> </a> <dl> <dt><a href="https://www.zhengruan.com/news/736198" title="c语言函数递归怎么选？常见方案对比分析" class="aBlack">c语言函数递归怎么选？常见方案对比分析</a></dt> <dd class="cont1">递归函数的基本概念与适用场景在C语言编程中，递归是一种函数调用自身的编程技巧。它并非适用于所有问题，但在处理某些具有自相似结构的问题时，能提供极其清晰和优雅的解决方案。递归的核心思想是将一个大规模问题分解为一个或多个同类型但规模更小的子问题，直到子问题简单到可以直接求解。典型的适用场景包括树形结构的</dd> <dd class="cont2">  <span class="cont2"><b></b>12天前</span> <span class="cont4"><b></b>0</span> </dd> </dl> </li> <li> <a href="https://www.zhengruan.com/news/736197" class="img1" title="Objective-C 内存管理入门：从 alloc 到 dealloc 的生命周期详解"> <img onerror="this.src='https://www.zhengruan.com/statics/www/zrimages/404_bg.png'" src="https://www.zhengruan.com/uploads/20260807/178605862499192.webp" alt="Objective-C 内存管理入门：从 alloc 到 dealloc 的生命周期详解"> <span>正版软件</span> </a> <dl> <dt><a href="https://www.zhengruan.com/news/736197" title="Objective-C 内存管理入门：从 alloc 到 dealloc 的生命周期详解" class="aBlack">Objective-C 内存管理入门：从 alloc 到 dealloc 的生命周期详解</a></dt> <dd class="cont1">理解内存管理的基石在Objective-C的编程世界中，内存管理是开发者必须掌握的核心技能之一。它直接关系到应用的性能、稳定性与资源利用效率。与一些采用自动垃圾回收机制的语言不同，Objective-C在很长一段时间里，依赖一套基于引用计数的、需要开发者部分介入的管理规则。这套规则的核心思想是明确的</dd> <dd class="cont2">  <span class="cont2"><b></b>12天前</span> <span class="cont4"><b></b>0</span> </dd> </dl> </li> </ul> </div>   <div class="zrZuoRight">  <div class="zrByddBox"> <div class="zrByddTitle"><span><h2>最新发布</h2></span></div> <ul class="zrByddList"> <li> <a href="https://www.zhengruan.com/news/1561" class="img"> <img onerror="this.src='https://www.zhengruan.com/statics/www/zrimages/404_bg.png'" src="https://www.zhengruan.com/upload/news/20191220/1576825692n90594/2019-12-20-15-08-12-5dfc735c5581a-1.jpg" alt="微软公布全新开源编程语言Bosque：正则化告别for循环"> <span>1</span> </a> <dl> <dt><a href="https://www.zhengruan.com/news/1561" title="微软公布全新开源编程语言Bosque：正则化告别for循环" class="aBlack">微软公布全新开源编程语言Bosque：正则化告别for循环</a></dt> <dd><b></b>2434天前</dd> </dl> <div class="clear"></div> </li> <li> <a href="https://www.zhengruan.com/news/1562" class="img"> <img onerror="this.src='https://www.zhengruan.com/statics/www/zrimages/404_bg.png'" src="https://www.zhengruan.com/upload/news/20191220/1576825776n3925/2019-12-20-15-09-36-5dfc73b032cee-1.jpg" alt="微软推出最新程序语言Bosque 以Functors取代Loop循环"> <span>2</span> </a> <dl> <dt><a href="https://www.zhengruan.com/news/1562" title="微软推出最新程序语言Bosque 以Functors取代Loop循环" class="aBlack">微软推出最新程序语言Bosque 以Functors取代Loop循环</a></dt> <dd><b></b>2434天前</dd> </dl> <div class="clear"></div> </li> <li> <a href="https://www.zhengruan.com/news/467167" class="img"> <img onerror="this.src='https://www.zhengruan.com/statics/www/zrimages/404_bg.png'" src="https://www.zhengruan.com/uploads/20250908/175730816420885.jpg" alt="C语言中\n是什么意思？换行转义字符详解"> <span>3</span> </a> <dl> <dt><a href="https://www.zhengruan.com/news/467167" title="C语言中\n是什么意思？换行转义字符详解" class="aBlack">C语言中\n是什么意思？换行转义字符详解</a></dt> <dd><b></b>345天前</dd> </dl> <div class="clear"></div> </li> <li> <a href="https://www.zhengruan.com/news/63159" class="img"> <img onerror="this.src='https://www.zhengruan.com/statics/www/zrimages/404_bg.png'" src="" alt="探析Spring Boot框架的优点和特色"> <span>4</span> </a> <dl> <dt><a href="https://www.zhengruan.com/news/63159" title="探析Spring Boot框架的优点和特色" class="aBlack">探析Spring Boot框架的优点和特色</a></dt> <dd><b></b>661天前</dd> </dl> <div class="clear"></div> </li> <li> <a href="https://www.zhengruan.com/news/85739" class="img"> <img onerror="this.src='https://www.zhengruan.com/statics/www/zrimages/404_bg.png'" src="" alt="深入比较PyCharm社区版和专业版的功能"> <span>5</span> </a> <dl> <dt><a href="https://www.zhengruan.com/news/85739" title="深入比较PyCharm社区版和专业版的功能" class="aBlack">深入比较PyCharm社区版和专业版的功能</a></dt> <dd><b></b>599天前</dd> </dl> <div class="clear"></div> </li> <li> <a href="https://www.zhengruan.com/news/89680" class="img"> <img onerror="this.src='https://www.zhengruan.com/statics/www/zrimages/404_bg.png'" src="" alt="专家观点：谷歌是否会继续支持Golang的探讨"> <span>6</span> </a> <dl> <dt><a href="https://www.zhengruan.com/news/89680" title="专家观点：谷歌是否会继续支持Golang的探讨" class="aBlack">专家观点：谷歌是否会继续支持Golang的探讨</a></dt> <dd><b></b>575天前</dd> </dl> <div class="clear"></div> </li> <li> <a href="https://www.zhengruan.com/news/16338" class="img"> <img onerror="this.src='https://www.zhengruan.com/statics/www/zrimages/404_bg.png'" src="https://www.zhengruan.com/uploads/20230427/168257005787096.jpg" alt="提升 Python 编程效率：推荐使用 VSCode 的 Python 扩展"> <span>7</span> </a> <dl> <dt><a href="https://www.zhengruan.com/news/16338" title="提升 Python 编程效率：推荐使用 VSCode 的 Python 扩展" class="aBlack">提升 Python 编程效率：推荐使用 VSCode 的 Python 扩展</a></dt> <dd><b></b>1207天前</dd> </dl> <div class="clear"></div> </li> <li> <a href="https://www.zhengruan.com/news/16470" class="img"> <img onerror="this.src='https://www.zhengruan.com/statics/www/zrimages/404_bg.png'" src="https://www.zhengruan.com/uploads/20230427/168257472829656.jpg" alt="Python实战教程：批量转换多种音乐格式"> <span>8</span> </a> <dl> <dt><a href="https://www.zhengruan.com/news/16470" title="Python实战教程：批量转换多种音乐格式" class="aBlack">Python实战教程：批量转换多种音乐格式</a></dt> <dd><b></b>1207天前</dd> </dl> <div class="clear"></div> </li> <li> <a href="https://www.zhengruan.com/news/41129" class="img"> <img onerror="this.src='https://www.zhengruan.com/statics/www/zrimages/404_bg.png'" src="" alt="如何在在线答题中实现试卷的自动批改和自动评分"> <span>9</span> </a> <dl> <dt><a href="https://www.zhengruan.com/news/41129" title="如何在在线答题中实现试卷的自动批改和自动评分" class="aBlack">如何在在线答题中实现试卷的自动批改和自动评分</a></dt> <dd><b></b>1035天前</dd> </dl> <div class="clear"></div> </li> </ul> </div> <div class="zrRmgzBox" style="margin-top:20px;"> <div class="zrByddTitle"> <span><h2>相关推荐</h2></span> </div> <ul class="zrXwdtList"> <li><a href="https://www.zhengruan.com/news/736200" title="using namespace 使用中遇到的问题怎么解决" class="aBlack">using namespace 使用中遇到的问题怎么解决</a></li> <li><a href="https://www.zhengruan.com/news/736199" title="c语言函数递归实操经验总结：这些技巧很实用" class="aBlack">c语言函数递归实操经验总结：这些技巧很实用</a></li> <li><a href="https://www.zhengruan.com/news/736198" title="c语言函数递归怎么选？常见方案对比分析" class="aBlack">c语言函数递归怎么选？常见方案对比分析</a></li> <li><a href="https://www.zhengruan.com/news/736197" title="Objective-C 内存管理入门：从 alloc 到 dealloc 的生命周期详解" class="aBlack">Objective-C 内存管理入门：从 alloc 到 dealloc 的生命周期详解</a></li> <li><a href="https://www.zhengruan.com/news/736196" title="如何正确使用 dealloc 以避免 iOS 应用中的内存泄漏" class="aBlack">如何正确使用 dealloc 以避免 iOS 应用中的内存泄漏</a></li> <li><a href="https://www.zhengruan.com/news/736195" title="深入理解 Objective-C 中的 dealloc 方法：内存管理核心机制" class="aBlack">深入理解 Objective-C 中的 dealloc 方法：内存管理核心机制</a></li> <li><a href="https://www.zhengruan.com/news/736194" title="理解 native2ascii：Java 国际化开发中的字符编码工具" class="aBlack">理解 native2ascii：Java 国际化开发中的字符编码工具</a></li> <li><a href="https://www.zhengruan.com/news/736193" title="如何使用 native2ascii 转换中文字符为 Unicode 转义序列" class="aBlack">如何使用 native2ascii 转换中文字符为 Unicode 转义序列</a></li> <li><a href="https://www.zhengruan.com/news/736192" title="Java native2ascii 命令详解：解决属性文件乱码问题" class="aBlack">Java native2ascii 命令详解：解决属性文件乱码问题</a></li> </ul> </div> <div class="zrRmgzBox" style="margin-top:30px;"> <div class="zrByddTitle"> <span><h2>热门关注</h2></span> </div> <ul class="zrRmgzList"> <li> <span><a href="https://www.zhengruan.com/news/soft751849" title="Nero AI Video Upscaler"><img onerror="this.src='https://www.zhengruan.com/statics/www/zrimages/404_bg.png'" src="https://www.zhengruan.com/uploads/20260818/1d40c31075948560ed935d2e3d56090e.png" alt="Nero AI Video Upscaler"></a></span> <dl> <dt><a href="https://www.zhengruan.com/news/soft751849" title="Nero AI Video Upscaler" class="aBlack">Nero AI Video Upscaler</a></dt> <dd class="unstar unstar5"></dd> <dd class="cont1">￥27.30-￥39.00</dd> </dl> <div class="clear"></div> </li> <li> <span><a href="https://www.zhengruan.com/news/soft752335" title="DockFlow"><img onerror="this.src='https://www.zhengruan.com/statics/www/zrimages/404_bg.png'" src="https://www.zhengruan.com/uploads/20260818/3314d6a3a529cdd07e7d98ca354f2d96.png" alt="DockFlow"></a></span> <dl> <dt><a href="https://www.zhengruan.com/news/soft752335" title="DockFlow" class="aBlack">DockFlow</a></dt> <dd class="unstar unstar5"></dd> <dd class="cont1">￥45.00-￥45.00</dd> </dl> <div class="clear"></div> </li> <li> <span><a href="https://www.zhengruan.com/news/soft752115" title="远离手机"><img onerror="this.src='https://www.zhengruan.com/statics/www/zrimages/404_bg.png'" src="https://www.zhengruan.com/uploads/20260818/e0bf711581ddf424af3e6f57a3b4a5b4.png" alt="远离手机"></a></span> <dl> <dt><a href="https://www.zhengruan.com/news/soft752115" title="远离手机" class="aBlack">远离手机</a></dt> <dd class="unstar unstar4"></dd> <dd class="cont1">￥10.00-￥10.00</dd> </dl> <div class="clear"></div> </li> <li> <span><a href="https://www.zhengruan.com/news/soft752094" title="Trym"><img onerror="this.src='https://www.zhengruan.com/statics/www/zrimages/404_bg.png'" src="https://www.zhengruan.com/uploads/20260818/a2d5b426023aa052acd1dbfe2be80b3b.png" alt="Trym"></a></span> <dl> <dt><a href="https://www.zhengruan.com/news/soft752094" title="Trym" class="aBlack">Trym</a></dt> <dd class="unstar unstar4"></dd> <dd class="cont1">￥19.00-￥19.00</dd> </dl> <div class="clear"></div> </li> <li> <span><a href="https://www.zhengruan.com/news/soft745466" title="Scherlokk"><img onerror="this.src='https://www.zhengruan.com/statics/www/zrimages/404_bg.png'" src="https://www.zhengruan.com/uploads/20260818/dd46fdde7e4cc7871de3a661885b41f5.png" alt="Scherlokk"></a></span> <dl> <dt><a href="https://www.zhengruan.com/news/soft745466" title="Scherlokk" class="aBlack">Scherlokk</a></dt> <dd class="unstar unstar4"></dd> <dd class="cont1">￥99.00-￥99.00</dd> </dl> <div class="clear"></div> </li> </ul> </div> </div>  <div class="clear"></div> </div>    <div class="zrFoot"> <div class="zrFootIn"> <div class="zrFootMsg">网站备案号： <a href="https://beian.miit.gov.cn/" target="" style="text-decoration: none;"> <font color="#9b9db0">苏ICP备2026018738号-1 联系邮箱：bd@zhengruan.com<br> Copyright ©2018-2020</font> </a> </div> </div> </div>  <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>   <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 code_highlight() { SyntaxHighlighter.all() } $(function(){ code_highlight(); countView(); $("#qrcode").qrcode({width:150,height:150,text:"https://m.zhengruan.com/news/705774"}) }) </script> </body> </html>