利用AJAX实现下拉框改变数据库字段数据

实现逻辑:利用JS点击获取value值,通过AJAX传送到后台查询,修改数据后返回成功回调
HTML部分
订单状态:

<option value=“1” {eq name=“vo.status” value=“1”}selected{/eq}>进行中
<option value=“2” {eq name=“vo.status” value=“2”}selected{/eq}>已完成
<option value=“3” {eq name=“vo.status” value=“3”}selected{/eq}>暂停中
<option value=“0” {eq name=“vo.status” value=“0”}selected{/eq}>已取消

JS部分

           <script>
                $(".select").change(function() {
                    var order_code = $(this).parents("tr").find(".text-left").find("b").html();  // 1、获取选择下拉框的标题
                    var num  = $(this).val();  //获取选中的ID值
                    var url   = "{:url('store/Order/change')}";  //这里填写后端的url
                    $.ajax({   //2、发送给后端
                        url: url,
                        type: 'POST',  //设置发送的方式 这里假设为POST
                        dataType: 'html',  //返回的数据类型
                        data: {num: order_code,value:num},  //把选中的标题发给后端
                        success: function(status){
                            console.log(status);
                            if(status==1){
                                // 用户名或密码错误
                                alert("修改成功");
                            }
                            else if(status==2){
                                alert("修改失败");
                                // 验证码错误
                            }

                            //跳转页面
                        }

                    })
                });
            </script>

PHP部分
public function change(){
$ord

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 实现 Tree 下拉框需要以下步骤: 1. 创建表格并插入数据 首先,需要创建一个表格来存储树型结构数据。例如,我们可以创建一个名为 `tree_data` 的表格,包含 `id`, `name`, `parent_id` 三个字段,其中 `parent_id` 指向父节点的 `id`。 然后,插入一些数据到表格中,例如: ``` id name parent_id 1 中国 NULL 2 美国 NULL 3 北京市 1 4 上海市 1 5 纽约市 2 6 洛杉矶市 2 7 浦东区 4 8 徐汇区 4 ``` 2. 获取数据并生成 JSON 格式 使用 SQL 语句查询数据,并将数据生成为 JSON 格式。例如: ```sql SELECT t1.id, t1.name, t1.parent_id, IFNULL(t2.name, '') AS parent_name FROM tree_data t1 LEFT JOIN tree_data t2 ON t1.parent_id = t2.id ORDER BY t1.parent_id ASC, t1.id ASC ``` 这个 SQL 查询语句会返回以下格式的数据: ``` id name parent_id parent_name 1 中国 NULL '' 2 美国 NULL '' 3 北京市 1 中国 4 上海市 1 中国 5 纽约市 2 美国 6 洛杉矶市 2 美国 7 浦东区 4 上海市 8 徐汇区 4 上海市 ``` 然后,使用编程语言将这些数据转化为 JSON 格式,例如: ```json [ { "id": 1, "name": "中国", "parent_id": null, "parent_name": "" }, { "id": 2, "name": "美国", "parent_id": null, "parent_name": "" }, { "id": 3, "name": "北京市", "parent_id": 1, "parent_name": "中国" }, { "id": 4, "name": "上海市", "parent_id": 1, "parent_name": "中国" }, { "id": 5, "name": "纽约市", "parent_id": 2, "parent_name": "美国" }, { "id": 6, "name": "洛杉矶市", "parent_id": 2, "parent_name": "美国" }, { "id": 7, "name": "浦东区", "parent_id": 4, "parent_name": "上海市" }, { "id": 8, "name": "徐汇区", "parent_id": 4, "parent_name": "上海市" } ] ``` 3. 使用 Layui 渲染 Tree 下拉框 使用 Layui 的 `tree` 组件来渲染 Tree 下拉框。首先,需要引入相关的 CSS 和 JavaScript 文件: ```html <link rel="stylesheet" href="/layui/css/layui.css"> <script src="/layui/layui.js"></script> ``` 然后,在 HTML 中添加一个 `select` 元素和一个空的 `ul` 元素: ```html <select name="tree_select" lay-filter="tree_select"> <option value="">请选择</option> </select> <ul id="tree_ul" class="layui-hide"></ul> ``` 接下来,在 JavaScript 中使用 Ajax 获取数据,并渲染 Tree 下拉框: ```javascript // 绑定 select 元素的 change 事件 layui.use(['layer', 'form', 'tree'], function() { var layer = layui.layer; var form = layui.form; var tree = layui.tree; form.on('select(tree_select)', function(data) { // 获取选中的节点 var node = tree.getSelected('tree_ul'); if (node) { console.log(node.id, node.name); } }); // 获取数据并渲染 Tree 下拉框 $.ajax({ url: '/get_tree_data', type: 'GET', dataType: 'json', success: function(data) { var tree_data = []; // 将数据转换为 Layui Tree 组件需要的格式 for (var i = 0; i < data.length; i++) { var node = { id: data[i].id, title: data[i].name, parentId: data[i].parent_id, parentName: data[i].parent_name, children: [] }; tree_data.push(node); } // 渲染 Tree 下拉框 tree({ elem: '#tree_ul', nodes: tree_data, click: function(node) { // 选中节点后,更新 select 元素的 value 和 text $('select[name=tree_select]').val(node.id); $('select[name=tree_select]').next().find('input').val(node.title); } }); }, error: function(xhr, status, error) { layer.alert(error, {icon: 2}); } }); }); ``` 通过以上步骤,就可以实现 Layui 的 Tree 下拉框,并从数据库中获取数据。 ### 回答2: Layui是一个前端框架,可以实现各种页面的布局和交互效果。在实现tree下拉框时,需要先从数据库获取数据,然后按照一定的格式传递给Layui,使其能够生成相应的下拉框。以下是实现步骤: 1. 在后端编程语言中,连接数据库,并编写相应的数据库查询语句,将要展示在tree下拉框中的数据查询出来。例如,可以使用SQL语句查询出所有的根节点以及其下的子节点。 2. 在后端编程语言中,将数据库查询结果转换为JSON格式的数据。可以使用相应的工具库或手动编写代码将数据库查询结果转换为JSON格式。 3. 在前端的HTML页面中,引入Layui框架的相关文件,确保能够正确使用Layui的功能。 4. 在前端的JavaScript代码中,使用Layui的tree组件,调用相应的方法来生成下拉框。传入从后端获取的JSON格式的数据,通过Layui的tree组件配置参数和方法,将数据转换为树状结构,并生成下拉框。 5. 在HTML页面中,使用Layui提供的HTML标签和样式,将生成的下拉框渲染到页面上。 通过以上步骤,我们就可以使用Layui从数据库获取数据实现tree下拉框功能了。请注意,在具体实现过程中,还需要根据实际需求进行相应的参数配置和样式设置,确保下拉框的效果满足项目要求。 ### 回答3: 要使用Layui从数据库获取数据实现tree下拉框,可以按照以下步骤进行操作: 1. 首先,在数据库中创建表格来存储tree数据,包括id、name、parent_id等字段,用于表示节点的唯一标识、名称和父级节点。 2. 在后端编程语言中,查询数据库中的tree数据,并将其转换为符合Layui要求的JSON格式数据。可以使用递归方法遍历数据库中的节点,将其转换为JSON对象。 3. 在前端页面中,引入Layui框架的相关文件,包括layui.js和layui.css。 4. 在HTML文件中,使用Layui的tree组件,并通过Ajax请求将后端返回的JSON格式的tree数据绑定到tree组件中。可以使用Layui的form.on()方法监听下拉框的选中事件,获取选中节点的值。 5. 使用Layui的tree组件的配置项(tree.config())来设置tree的相关属性,比如是否显示复选框、是否开启连接线等。 6. 可以根据需要,为tree组件添加相应的事件,如点击事件、展开事件等,以满足自定义的功能要求。 7. 根据Layui的文档和相关示例,对tree组件进行样式调整和美化,以使其符合项目需求。 通过以上步骤,我们可以使用Layui从数据库获取数据实现tree下拉框功能。在这个过程中,需要对后端和前端进行相应的开发和配置,同时也需要了解Layui框架的相关组件的使用方法。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值