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

使用jQuery重新排序Div,然后使用form post提交

的方法如下:

  1. 首先,确保在HTML页面中引入了jQuery库文件,可以通过以下方式引入:
代码语言:txt
复制
<script src="https://cdn.jsdelivr.net/jquery/3.6.0/jquery.min.js"></script>
  1. 在HTML页面中创建需要排序的Div元素,可以使用<div>标签,并为每个Div元素添加一个唯一的标识符,例如:
代码语言:txt
复制
<div id="div1">Div 1</div>
<div id="div2">Div 2</div>
<div id="div3">Div 3</div>
  1. 使用jQuery的sortable()方法对Div元素进行排序,可以通过拖拽来改变它们的顺序。在JavaScript代码中添加以下代码:
代码语言:txt
复制
$(function() {
  $("div").sortable();
});
  1. 创建一个表单,并在表单中添加一个隐藏的输入字段,用于存储排序后的Div元素的顺序。在HTML页面中添加以下代码:
代码语言:txt
复制
<form id="myForm" action="submit.php" method="post">
  <input type="hidden" name="divOrder" id="divOrder">
  <input type="submit" value="Submit">
</form>
  1. 在JavaScript代码中,使用jQuery的sortable()方法的toArray()函数获取排序后的Div元素的顺序,并将其存储在隐藏的输入字段中。同时,监听表单的提交事件,在提交表单之前更新隐藏字段的值。添加以下代码:
代码语言:txt
复制
$(function() {
  $("div").sortable({
    update: function(event, ui) {
      var divOrder = $(this).sortable("toArray");
      $("#divOrder").val(divOrder.join(","));
    }
  });

  $("#myForm").submit(function() {
    var divOrder = $("div").sortable("toArray");
    $("#divOrder").val(divOrder.join(","));
    return true;
  });
});
  1. 最后,当用户拖拽Div元素并重新排序后,点击提交按钮时,表单将会以POST方式提交到指定的URL(这里是submit.php),并将排序后的Div元素的顺序作为参数传递给服务器端。

请注意,以上代码中的submit.php是一个示例的服务器端处理脚本,你需要根据自己的实际需求来编写相应的服务器端代码来处理表单提交。

这种方法可以用于需要对Div元素进行重新排序并将排序结果提交到服务器端的场景,例如拖拽排序的图片列表、任务列表等。

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

相关·内容

解决django中form表单设置action后无法回到原页面的问题

django中form表单设置action后,点提交按钮是跳转到action页面的,比如设置action为login,网址为192.168.1.128,跳转后便会来到192.168.1.128/login...,F5刷新也会是重新提交表单对话框,无法回到原页面。...表单,并将返回信息回显到页面中 将表单数据发送回后端,然后处理后端返回的信息并显示在当前页面中,这里使用Ajax进行处理; 那么先看js代码: <!...--以下为 Ajax脚本 -- <script src="http://apps.bdimg.com/libs/<em>jquery</em>/2.1.4/<em>jquery</em>.min.js" </script <script...ajax 进行表单提交 3、django request.POST / request.body 当request.POST没有值 需要考虑: 1.请求头中的: Content-Type: application

2.2K10

jqueryform表单提交

使用jQuery实现Form表单提交在Web开发中,表单提交是一个常见的操作,通过表单提交用户可以向服务器发送数据。...使用jQuery提交表单接下来,我们将使用jQuery来处理表单提交操作。我们可以通过监听表单的submit事件来实现表单提交的操作。...>在上面的表单中,用户需要填写姓名、邮箱、密码,并点击“注册”按钮进行提交。...同时,下方的resultMessage用来显示提交结果。使用jQuery提交表单并显示结果接下来,我们使用jQuery来实现表单提交功能,并根据提交结果来显示提示信息。...Form表单由包含在和标签之间的多个表单元素组成。用户可以在表单中输入文本、选择选项、上传文件等,然后通过表单提交按钮将这些数据发送给服务器。

8710

JFinal极速开发框架使用笔记(二) 两个问题,一个发现

测试要求:录入学生信息,录入三门课成绩,然后根据成绩总分排序,并且查询的时候不能用SQL语句直接查出来,要用Java逻辑判断 ?...除了这个之外,还可以通过使用空字符串“”实现,表单域中使用正常方式提交,不用加前缀,在后台接受时,使用getModel方法,加一个“”,就可以正常接收数据了。...class="layui-form" action="/test/savebeanscore" method="post" style="width: 40%; margin-top: 100px...接下来就是最关键的逻辑部分: 关于这一部分,初衷应该是考察逻辑思维,所以要求查询出数据之后,用java代码把数据组合起来并排序发到前台 这里关键点有两个,一个在于使用Map将储存数据,然后返回Map的List...集合 然后就是在给List集合根据Map中的总分进行排序 /** * 返回综合成绩数据,并根据总分排序 */ public void getlist()

1.2K50

探索 JQuery EasyUI:构建简单易用的前端页面

3.4 Datagrid 数据表格组件Datagrid 数据表格组件可以将数据以表格的形式展示在网页上,并且提供了丰富的功能,如排序、分页、筛选、编辑等,使用户能够轻松地浏览和操作数据。...3.6.1 主要属性url: 设置表单提交的目标 URL 地址。method: 设置表单提交的方法,通常为 "GET" 或 "POST"。...表单的提交目标 URL 地址为 "submit.php",提交方法为 "POST"。...当用户点击提交按钮时,会调用 JavaScript 函数 submitForm(),在该函数中调用了 form('submit') 方法来提交表单,并且在提交成功时弹出一个提示框显示 "Form submitted...根据用户选择的图表类型,我们调用不同的数据生成函数 generateData 来生成模拟数据,然后使用 EasyUI 的图表插件来绘制相应类型的图表。

43510

JavaScript学习笔记(五)——Ajax

]); 参数同get serialize()序列化表单 在jQuery中,可以使用serialize函数将表单数据序列化为键值对,创建url编码文本字符串进行提交。...插件的应用于开发 jQuery插件就是开发爱好者自己利用jQuery制作的特效,然后打包成js文件,发布到网上供大家使用的脚本集合。...好用的jQuery插件: 1. jQuery Form插件 jQuery Form是一个优秀的表单插件,它可以非常容易地使HTML表单支持Ajax。...jQuery Form插件有两个核心方法: ajaxForm() 适用于以提交表单的方式处理数据,需要在表单中标明表单的action、id、method属性,最好在表单中提供submit按钮。...ajaxSubmit() 适用于以事件机制提交表单,如通过超链接、图片的click事件等提交表单。使用时只需要指定表单的action属性即可,不需要提供submit按钮。

1.9K10

探索 JQuery EasyUI:构建简单易用的前端页面

3.4 Datagrid 数据表格组件 Datagrid 数据表格组件可以将数据以表格的形式展示在网页上,并且提供了丰富的功能,如排序、分页、筛选、编辑等,使用户能够轻松地浏览和操作数据。...3.6.1 主要属性 url: 设置表单提交的目标 URL 地址。 method: 设置表单提交的方法,通常为 “GET” 或 “POST”。...表单的提交目标 URL 地址为 “submit.php”,提交方法为 “POST”。...当用户点击提交按钮时,会调用 JavaScript 函数 submitForm(),在该函数中调用了 form('submit') 方法来提交表单,并且在提交成功时弹出一个提示框显示 “Form submitted...根据用户选择的图表类型,我们调用不同的数据生成函数 generateData 来生成模拟数据,然后使用 EasyUI 的图表插件来绘制相应类型的图表。

4810
领券