首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何使用jQuery的SortableJS和AJAX更改我的类别的订单ID?

使用jQuery的SortableJS和AJAX可以实现更改类别订单ID的功能。下面是一个完善且全面的答案:

SortableJS是一个基于JavaScript的库,可以实现拖拽排序的功能。它可以让我们通过拖拽来改变元素的顺序,并且可以与AJAX结合使用,实现实时更新数据的效果。

首先,我们需要引入jQuery和SortableJS的库文件。可以通过以下方式引入:

代码语言:txt
复制
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.14.0/Sortable.min.js"></script>

接下来,我们需要创建一个可排序的列表,并为每个列表项添加一个唯一的订单ID。例如:

代码语言:txt
复制
<ul id="sortable">
  <li data-order-id="1">订单1</li>
  <li data-order-id="2">订单2</li>
  <li data-order-id="3">订单3</li>
  <li data-order-id="4">订单4</li>
</ul>

然后,我们可以使用SortableJS来初始化可排序列表。通过设置onEnd事件,当拖拽排序结束时,可以获取到新的排序结果。例如:

代码语言:txt
复制
$(document).ready(function() {
  new Sortable(document.getElementById('sortable'), {
    onEnd: function(evt) {
      var order = [];
      $('#sortable li').each(function() {
        order.push($(this).data('order-id'));
      });
      
      // 发送AJAX请求,将新的排序结果保存到后端数据库
      $.ajax({
        url: 'update_order.php',
        method: 'POST',
        data: { order: order },
        success: function(response) {
          // 更新成功后的操作
        },
        error: function() {
          // 更新失败后的操作
        }
      });
    }
  });
});

在上述代码中,onEnd事件会在拖拽排序结束时触发。我们通过遍历排序后的列表项,获取每个列表项的订单ID,并将其存储在order数组中。然后,我们可以使用AJAX将新的排序结果发送到后端进行保存。在这个例子中,我们假设后端提供了一个update_order.php的接口来处理更新操作。

update_order.php中,我们可以接收到前端发送的新的排序结果,并进行相应的处理。例如,可以将新的排序结果保存到数据库中。

至于推荐的腾讯云相关产品和产品介绍链接地址,由于要求不能提及具体的云计算品牌商,我无法给出具体的推荐。但是,腾讯云提供了丰富的云计算服务,可以根据具体需求选择适合的产品,比如云服务器、云数据库、云存储等。可以访问腾讯云官方网站(https://cloud.tencent.com/)了解更多信息。

总结:使用jQuery的SortableJS和AJAX可以实现更改类别订单ID的功能。通过拖拽排序,获取新的排序结果,并通过AJAX将结果发送到后端进行保存。具体的实现可以参考上述代码示例。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

整理了12款开源拖拽库, 轻松上手可视化搭建

❝hi, 大家好, 是徐小夕,之前大家分享了很多「低代码可视化」「前端工程化」相关的话题, 今天继续大家分享「10」款流行开源「拖拽排序」库以及「2」个非常有价值「可视化搭建」解决方案. ❞...目前把整理可视化相关开源项目都汇总到如下网站中,其中包含拖拽搭建,可视化搭建开源项目酷炫开源图表库,感兴趣可以收藏一下~: 可视化导航地址:http://wep.turntip.cn/web...「interact.js Pro」 使用更多调节器扩展了该开源功能,更多复杂内置交互,框架集成,高级开发工具,用于节省我们事件js开销。...Sortable 「Sortable」 —是一个「JavaScript」库,用于在现代浏览器触摸设备上对拖放列表进行重新排序。无需「jQuery」。...「react-beautiful-dnd」 是为垂直水平列表专门构建更高级别的抽象. 在该功能子集内「react-beautiful-dnd」提供强大,自然和美丽拖放体验.

1.1K20

前端10大开源拖拽排序库汇总, 让搭建,更简单

❝hi, 大家好, 是徐小夕,之前大家分享了很多「低代码可视化」「前端工程化」相关的话题, 今天继续大家分享「8」个非常流行开源「拖拽排序」库以及「2」个非常有价值「可视化搭建」解决方案....「interact.js Pro」 使用更多调节器扩展了该开源功能,更多复杂内置交互,框架集成,高级开发工具,用于节省我们事件js开销。...Sortable 「Sortable」 —是一个「JavaScript」库,用于在现代浏览器触摸设备上对拖放列表进行重新排序。无需「jQuery」。...它提供了一个视觉效果引擎,一个拖放库(包括可排序列表),几个控件(基于「Ajax动态下拉列表,原地编辑,滑块)等等。...「react-beautiful-dnd」 是为垂直水平列表专门构建更高级别的抽象. 在该功能子集内「react-beautiful-dnd」提供强大,自然和美丽拖放体验.

5.7K21
  • 【十七】RabbitMQ基础篇(延迟队列死信队列实战)

    /libs/jquery/3.5.1/jquery.js"> <script src="https://cdnjs.cloudflare.com/<em>ajax</em>/libs/popper.js...此处再简单讲一下整合mybatis-plus简要步骤: 导入依赖到父工程 修改provider模块<em>和</em>consumer模块业务模块<em>的</em>配置<em>类</em>yml文件 两个模块<em>的</em>yml配置文件记得都要修改。...创建实体<em>类</em> <em>id</em><em>使用</em>mybatis-plus<em>的</em>UUID雪花算法自动生成。 本来想将mapper也放到其中,但是放到其中后,其他模块<em>使用</em>时会导致接口无法访问,问题还未解决。...新增mapper,<em>和</em>生产者服务一样,本来应该可以放到common,但是<em>我</em>还未解决问题,只能先这样处理。 新增延时队列<em>和</em>死信队列<em>的</em>配置<em>类</em>TopicDelayConfig。

    10310

    分享 42 个面向前端开发 JS 库框架

    受到谷歌、福布斯、IBM、微软等众多大公司信赖使用。 04、jQuery 地址:https://jquery.com/ jQuery 是前端开发人员最常用库之一。...此外,您可以添加属性其他功能,如按钮、通过 Ajax 渲染、使用 modal promise 等。...它允许您为您网站轻松构建日期选择器组件,而无需任何额外使用或任何额外库。 喜欢这个库中一些功能是深色浅色主题。您可以设置允许用户选择时间间隔,按地区设置日期等。...喜欢 Quill 地方在于,它可以轻松地在所有现代响应式 Web 浏览器多个设备屏幕上进行设置显示,并提供有关使用时常见问题详细教程。...此外,它还拥有庞大程序员支持社区,以及许多详细说明示例。公司以及大型网站都信任并使用它。 总结 希望这篇文章能为您提供用于网页设计开发有用 JavaScript 库。

    6.9K31

    Vue 组件实战

    在Vue中我们可以使用插值来展示数据,插值普通函数,只要页面一刷新,函数就会重新运算,不管函数有关没关值都会变,函数也会重新计算,导致运行效率降低; 那么我们可以将自定义函数写在computed中来控制.../libs/jquery/3.4.1/jquery.min.js"> <link href="https://cdn.bootcdn.net/<em>ajax</em>/libs/twitter-bootstrap...比如如下例子中,Top组件只能在只能再<em>id</em>为app<em>的</em>标签(div)内<em>使用</em>, Top组件内如果想再定义子组件,只能在该组件内<em>的</em>template中<em>的</em>div内<em>使用</em> <!...,只能再<em>id</em>为app<em>的</em>标签内<em>使用</em> components: { 'Top': { //写在一个div里.../libs/<em>jquery</em>/3.4.1/<em>jquery</em>.min.js"> <link href="https://cdn.bootcdn.net/<em>ajax</em>/libs/twitter-bootstrap

    88530

    ASP.NET 使用Ajax

    大家好,又见面了,是你们朋友全栈君。...之前在Ajax初步理解中介绍了对Ajax初步理解,本文将介绍在ASP.NET中如何方便使用Ajax,第一种当然是使用jQueryajax,功能强大而且操作简单方便,第二种是使用.NET封装好ScriptManager...9. success:请求成功后调用句柄 10.error:请求失败后调用句柄 没使用jQueryajax话这样看有些云里雾里感觉,来看一个简单例子 首先使用Visual Studio新建一个...在Default.aspx页面中JavaScript中可以看到testGet函数就利用jQueryajax向Normal.aspx发送了了一个get请求,没写参数使用jQuery默认参数,这个调用没使用任何参数...在项目中最常使用这个模式,这样既保持了jQuery灵活性又可以在一个Service中书写多个方法供调用,还不用走复杂页面生命周期 json.net本文示例源代码 json.net是一个开源.net

    2.7K20

    (长文预警) 你还在烦工作中碰到拖拽问题?一个框架jiejue

    Sortablejs 简介 Sortable —是一个JavaScript库,用于在现代浏览器触摸设备上对拖放列表进行重新排序。无需jQuery。...支持任何CSS库,例如Bootstrap 简单API 支持插件 CDN 不需要jQuery(但有支持) typscript定义在 @types/sortablejs 文章 Dragging Multiple...不幸是,由于浏览器限制,使用本地拖放功能无法在IE或Edge上进行延迟 Sortable.create(list, { delay: 400 }); 似乎不让拖拽 ?...forceFallback 选项 如果设置为true,即使我们使用是HTML5浏览器,也会使用非HTML5浏览器后备广告。...最重要是,Fallback始终会生成该DOM元素副本,并附加fallbackClass在选项中定义。此行为控制此“拖动”元素外观 <!

    7.1K10

    jQuery笔试题汇总整理--2018

    在这里将JQ一些面试题进行了整理,希望对大家有所帮助! 1、你为什么要使用jQuery?你觉得jquery有哪些好处?...,并调用执行绑定函数 3、你知道jQuery选择器吗,有哪些选择器 大致分为:基本选择器,层次选择器,表单选择器 基本选择器:id选择器,标签选择器,选择器等 层次选择器:如:$("form input...对象[下标]获取dom对象 将dom对象放入$("")中转为jQuery对象 6、jQuery中$.get()提交$.post()提交区别 1、$.get()使用GET方法来进行异步提交 $.post...").insertBefore("p") 你好想说: 9、jQuery如何来获取设置属性 可以用attr()获取设置元素属性 removeAttr...()方法来删除元素属性 10、如何来设置获取HTML和文本值?

    2.5K21

    SPA(单页面应用)基本实现原理

    写在前面 我们应该都使用过网易云音乐或者是别的一些逼格比较高网页,他们比较厉害一点是页面看起来只有一个,不管你点击什么地方,永远不会刷新页面,都是感觉是在一个页面上完成操作,这个逼格那么高页面是怎么实现呢...今天博主就简单将实现原理写一下,鄙人能力有限,写不好,或者您有自己想法,可以随时联系,这里写是原生js实现,不是使用vue或者react路由实现,所以我明白那些每天使用框架的人看到以后感觉...,肯定是没有vue或者react又或者别的一些数据双向绑定框架使用起来方便,不过这个是入门基本原理,所以大神莫怪!...OK,问题定位到了以后,下面就是怎么解决问题,首先我们都知道,不刷新页面其实很简单,就是使用ajax就可以了,ajax异步请求是完全可以满足我们第一个问题解决方案,第二个怎么做呢?...事件触发时,事件对象会有hash改变前URL(oldURL)hash改变后URL(newURL)两个属性: window.addEventListener('hashchange',function

    1.1K20

    ​你回去了解一下RESTful风格

    ,如queryltems表示查询订单,是一个动词,而items表示订单,为名词)。...RESTful风格在HTIP请求中,使用put、delete、postget方式分别对应添加、删除、修改查询操作。不过目前国内开发,还是只使用postget方式来进行增删改查操作。...认为,这是因为rails默认使用服务端生成ID作为URI缘故,而不少人就是通过rails实践REST,所以很容易造成这种误解。 客户端不一定都支持这些HTTP方法吧?...资源表述包括数据描述数据元数据,例如,HTTP头"Content-Type" 就是这样一个元数据属性。 那么客户端如何知道服务端提供哪种表述形式呢?...(2 )在WebContent目录下,编写页面文件restful.jsp,在页面中使用AJAX方式通过输入用户编号来查询用户信息,如下所示。

    82310

    移除jQuery好像也没那么难

    最近从博客中移除了 jQuery,并发现自己不断地在谷歌上搜索一些模式。...为了节省大家时间,编写了这个实用参考指南,列出了一些最常见 jQuery 模式及其在 JavaScript 中等价物。我们将涵盖如何从这些概念函数迁移到纯 JavaScript。...检查元素是否具有指定 如果您只想在元素具有某个时执行某些操作,可以使用 .classList.contains() 来代替 jQuery .hasClass(): // 使用 jQuery if...("focus")) { // 执行操作 } 使用 .get() 或 .ajax() 进行网络请求 JavaScript fetch() 方法可以用来进行网络请求,类似于 jQuery ajax...通过 classList 属性操作使用 fetch 进行 AJAX 请求 通过 dispatchEvent 触发事件 使用 createElement 创建元素 通过 textContent 更新文本

    12310

    前端高效开发必备 js 库梳理

    前端由于入行门槛低, 更新换代很快, 每年都会有大量新框架库出现, 也有大量库被淘汰(比如 JQuery, 但是学习它设计思想很有必要)....比如说你对移动端比较感兴趣, 工作中也刚好涉及到一些技术应用,那么可以专门研究移动端相关技术框架, 又或者你对企业后台/中台产品感兴趣, 比较喜欢开发PC端项目, 那么我们可以专门研究这种类型...库 JQuery 封装了各种dom/事件操作, 设计思想值得研究借鉴 zepto jquery轻量级版本, 适合移动端操作 fastclick 一个简单易用库,它消除了移动端浏览器上物理点击触发一个... HTTP 库,可用在 Node.js 浏览器上发起 HTTP 请求,支持所有现代浏览器,甚至包括 IE8+ Superagent 基于Ajax优化, 可以与 Node.js HTTP 客户端搭配使用...SortableJS 功能强大JavaScript 拖拽库 图形/图像处理库 html2canvas 一个强大使用js开发浏览器网页截图工具 dom-to-image 一个可以将任意DOM节点转换为用

    1.8K10

    前端高效开发必备 js 库梳理

    前端由于入行门槛低, 更新换代很快, 每年都会有大量新框架库出现, 也有大量库被淘汰(比如 JQuery, 但是学习它设计思想很有必要)....比如说你对移动端比较感兴趣, 工作中也刚好涉及到一些技术应用,那么可以专门研究移动端相关技术框架, 又或者你对企业后台/中台产品感兴趣, 比较喜欢开发PC端项目, 那么我们可以专门研究这种类型...库 JQuery 封装了各种dom/事件操作, 设计思想值得研究借鉴 zepto jquery轻量级版本, 适合移动端操作 fastclick 一个简单易用库,它消除了移动端浏览器上物理点击触发一个... HTTP 库,可用在 Node.js 浏览器上发起 HTTP 请求,支持所有现代浏览器,甚至包括 IE8+ Superagent 基于Ajax优化, 可以与 Node.js HTTP 客户端搭配使用...SortableJS 功能强大JavaScript 拖拽库 图形/图像处理库 html2canvas 一个强大使用js开发浏览器网页截图工具 dom-to-image 一个可以将任意DOM节点转换为用

    2.1K30

    一些好用jquery技巧

    1、返回顶部按钮 通过使用jQueryanimate scrollTop 方法,不用插件就可以创建一个滚动到顶部简单动画: // Back to top $('.top').click(function...6、禁用输入字段 有时候,你可能想要禁用表格提交按钮或它某一项文字输入直到用户执行了特定操作(例如,勾选“已阅读相关条款”复选框)。...修复时候要小心这个问题。 12、通过文本查找元素 通过使用jQuerycontains() 选择器,你可以找到元素内容文本。...; } }); 14、AJAX调用错误处理 当Ajax调用返回404或500错误时,就执行错误处理程序。如果没有定义处理程序,其他jQuery代码或会就此罢工。...jQuery中可以让代码变得更短更快代最佳做法。

    3.9K60

    MongoDB助力一个物流订单系统

    当然具体实现商用肯定要考虑很多细节也很复杂,本案例更侧重于功能实现MongoDB使用。 1.2 核心思路拆解 一个订单数据是如何产生更新呢?...而本案例在添加物流信息实现上也通过一个表单添加该订单物流信息,通过物流订单id进行联立。 ? 在这里插入图片描述 实现这种数据应该如何存储?...本案例就是基于SpringBootMongoDB实现一个物流订单系统小案例,实际物流场景需要考虑问题肯定很多也比较复杂,这是实现一个简易版本物流订单系统主要为了MongoDB使用学习。...service创建完成,我们需要在pojo中创建logisticsorder,分别表示具体物流信息订单信息。...在这里插入图片描述 结语 到此,MongoDB实战小项目——一个物流订单系统就完成啦,想优秀你肯定已经能够使用MongoDB "操作一顿猛如虎"!

    2.3K20

    前端练级攻略(第二部分)

    如何查询元素 如何添加事件监听? 如何更改 DOM 节点属性? 有关常见 JavaScript DOM 交互列表,请查看 PlainJS JavaScript 函数助手。...将它们分组在本节中,因为它们对于理解如何构建更复杂前端系统是必要。一旦你进入框架部分,你将更好地理解并使用它们。 语言 当你使用JavaScript进行更多工作时,你将遇到一些更高级别的概念。...换句话说,专注于如何实现某件事。这段代码最大问题是它很脆弱。如果处理代码的人将 HTML中 名从 hero 更改为villain,事件侦听器将不再触发,因为 DOM 中没有 hero 。...但是,仍然建议你学习jQuery,因为在你前端职业生涯中很可能会遇到它。 ? 要学习j Query 基础知识,请查看 jQuery学习中心。它一步一步地通过一些重要概念,比如动画事件处理。...在开始之前,建议阅读 解耦HTML、CSSJavaScript教程,以了解在混合使用 JavaScript 时基本 CSS 命名约定。

    3.8K00

    了解ASP.NET MVC几种ActionResult本质:JavaScriptResult & JsonResult

    如何将Action执行结果响应给客户端。...本篇文章着重介绍在进行Ajax调用中经常使用两个ActionResult,即JavaScriptResultJsonResult。[本文已经同步到《How ASP.NET MVC Works?》...如下面的代码片断所示,ShoppingCart是表示购物车商品项ShoppingCartItem对象列表,而ShoppingCartItem三个属性(Id、NameQuantity)分别表示商品ID...在一个以Ajax请求提交表单(表单Action属性对应着上面定义Action方法ProcessOrder)中显示了购物车中商品和数量,用于可以修改订购数量并通过点击“提交订单”按钮以Ajax请求方式提交订单...-1.6.2.js")"> 1: <script type="text/javascript" src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js

    1.7K80
    领券