bootstrap 传值

这篇博客介绍了如何在HTML中利用data-属性存储数据,并在JavaScript中通过jQuery的.data()方法来获取这些值。示例展示了在表格中为每个用户姓名添加点击弹窗功能,弹窗内允许用户修改姓名并使用AJAX实现姓名更新。
摘要由CSDN通过智能技术生成

利用 data- 进行传值,获取该值的时候,使用$("#id名称").data('data-后面的内容')获取值

       <table class="table table-hover table-bordered">
            <tr class="text-center">
                <th class="text-center">数据库中名称</th>
                <th class="text-center">真实姓名</th>
            </tr>
            {% for user in user_list %}
                <tr class="text-center">
                    <td class="text-center">{{ user.accounts_name }}</td>
                    <td class="text-center" data-toggle="modal" data-target="#myModal" data-user="{{ user.accounts_name }}" id="modal">{{ user.real_name }}</td>
                </tr>
            {% endfor %}
        </table>
        <a class="btn btn-default" href="/project/">返回</a>


        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">&times;</span></button>
                    </div>
                    <div class="modal-body">
                        请输入更换后的姓名:<input type="text" class="form-control" id="change_name">
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-primary" onclick="changeName()">确认</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script>
    function changeName() {
        var change_name = $("#change_name").val()
        var result = change_name.split(" ").join("")
        var aaa = $("#modal").data('user')
        if (result.length === 0) {
            alert("姓名不能为空")
        } else {
            $.ajax({
                url: "/change_name/",
                type: "post",
                data: {
                    "change_name": result,
                },
                success: function (data) {
                    if (data.code === 200) {
                        window.location.href = "/show_users/"
                    } else {
                        alert(data.msg)
                    }
                }
            })
        }

    }
</script>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
要在 Bootstrap 的 `<iframe>` 中传递值,可以使用 URL 参数或 JavaScript 通信。 1. 使用 URL 参数 您可以将参数作为 URL 的查询字符串添加到 `<iframe>` 的 `src` 属性中。然后,在 Linux 操作页面中,您可以使用 JavaScript 获取 URL 参数并将其用于页面功能。 以下是一个示例代码: ``` <iframe src="your-linux-page-url?param1=value1&param2=value2" width="100%" height="500"></iframe> ``` 在上述代码中,`param1` 和 `param2` 是 URL 参数名称,`value1` 和 `value2` 是它们的值。您可以根据需要添加更多的参数。 在 Linux 操作页面中,您可以使用 JavaScript 获取 URL 参数。例如,以下代码将获取名为 `param1` 的参数的值: ``` var param1 = new URLSearchParams(window.location.search).get('param1'); ``` 2. 使用 JavaScript 通信 如果您需要在 `<iframe>` 中的页面和父页面之间进行更复杂的通信,您可以使用 JavaScript 的 `postMessage()` 方法。该方法允许您在两个窗口之间传递消息。 以下是一个示例代码: 在父窗口中: ``` <iframe id="my-iframe" src="your-linux-page-url" width="100%" height="500"></iframe> <script> var iframe = document.getElementById('my-iframe'); iframe.contentWindow.postMessage('Hello from parent', '*'); </script> ``` 在 Linux 操作页面中: ``` <script> window.addEventListener('message', function(event) { if (event.origin !== 'http://your-parent-site.com') { return; } console.log('Message received from parent: ' + event.data); event.source.postMessage('Hello from Linux page', event.origin); }); </script> ``` 在上述代码中,父窗口使用 `contentWindow` 属性获取 `<iframe>` 的窗口对象,并使用 `postMessage()` 方法向其发送消息。在 Linux 操作页面中,使用 `window.addEventListener()` 方法监听 `message` 事件,并在事件处理程序中使用 `event.data` 获取来自父窗口的消息。然后,使用 `event.source.postMessage()` 方法向父窗口发送回复消息。 请注意,使用 `postMessage()` 方法可能存在一些安全风险,因此请确保您的网站和应用程序已经采取了必要的安全措施。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值