拼接中文参数时,报错is not defined

╰+攻爆jí腚メ 2022-09-02 11:59 207阅读 0赞

#### 相关文档 ####

> Bootstrap Table官网：[http://bootstrap-table.wenzhixin.net.cn/zh-cn/][http_bootstrap-table.wenzhixin.net.cn_zh-cn]  
> Bootstrap 中文网：[http://www.bootcss.com/][http_www.bootcss.com]  
> Bootstrap Table Demo：[http://issues.wenzhixin.net.cn/bootstrap-table/index.html][http_issues.wenzhixin.net.cn_bootstrap-table_index.html]

<!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8" />
            <title>Dashboard | Nadhif - Responsive Admin Template</title>
            <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
            <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap-table/1.15.4/bootstrap-table.min.css">
            <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
            <script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
            <script src="https://cdn.bootcss.com/bootstrap-table/1.15.4/bootstrap-table.min.js"></script>
            <script src="https://cdn.bootcss.com/bootstrap-table/1.15.4/locale/bootstrap-table-zh-CN.min.js"></script>
        </head>
        <style>
            .page-content-wrapper {
                width: 800px;
                position: absolute;
                top: 10%;
                left: 24%;
                background: #fff;
                border: 1px solid #999;
                padding: 3% 0 0 9%;
                display: none;
            }
            .inputstyle {
                width: 60%;
                height: 34px;
                padding: 6px 12px;
                font-size: 14px;
                line-height: 1.42857143;
                color: #555;
                background-color: #fff;
                background-image: none;
                border: 1px solid #ccc;
                border-radius: 4px;
            }
        </style>
        <body>
    
            <table id="mytab" class="table table-hover"></table>
            
            <div class="page-content-wrapper">
                <input type="text" class="inputstyle" id="id" style="display: none;">
                <div class="form-group">
                    <label>工号:</label> <input type="text" class="inputstyle" id="deviceId">
                </div>
                <div class="form-group">
                    <label>姓名:</label> <input type="text" class="inputstyle" id="name">
                </div>
                <div class="form-group">
                    <label>电话:</label> <input type="text" class="inputstyle" id="phone">
                </div>
                <div class="form-group">
                    <label>公司:</label> <input type="text" class="inputstyle" id="organName">
                </div>
    
    
                <div class="modal-footer">
                    <button type="button" class="btn default" data-dismiss="modal" id="close">关闭</button>
                    <button type="button" class="btn blue" id="addBtn">保存</button>
    
                </div>
            </div>
    
            <script>
                $('#mytab').bootstrapTable({
                    method: 'get',
                    url: "test.json", // 请求路径
                    striped: true, // 是否显示行间隔色
                    pageNumber: 1, // 初始化加载第一页
                    pagination: true, // 是否分页
                    sidePagination: 'client', // server:服务器端分页|client：前端分页
                    pageSize: 5, // 单页记录数
                    pageList: [5, 20, 30],
                    // showRefresh : true,// 刷新按钮
                    queryParams: function(params) { // 上传服务器的参数
                        var temp = {
    
                        };
                        return temp;
                    },
                    columns: [{
                        title: 'id',
                        field: 'id',
                        visible: false
                    }, {
                        title: '工号',
                        field: 'deviceId',
    
                    }, {
                        title: '姓名',
                        field: 'name',
    
                    }, {
                        title: '联系电话',
                        field: 'phone'
                    }, {
                        title: '公司部门',
                        field: 'organName'
                    }, {
                        title: '操作',
                        field: 'id',
                        formatter: option
                    }]
                })
    
                // 定义删除、更新按钮
                function option(value, row, index) {
                    var htm = "";
                    htm = '<button id="upd"  onclick="update(\'' + escape(JSON.stringify(row)) + '\')">修改</button>';
                    return htm;
                }
    
                function update(row) {
                    $(".page-content-wrapper").show();
                    var data = JSON.parse(unescape(row))
                    $('#deviceId').val(data.deviceId)
                    $('#name').val(data.name)
                    $('#phone').val(data.phone)
                    $('#organName').val(data.organName)
    
                }
                $("#close").on("click", function() {
                    $(".page-content-wrapper").hide();
                })
            </script>
        </body>
    
    </html>

test.json

[
        {
            "id": 1,
            "deviceId": "43445",
            "name": "王小婷",
            "phone": "1567865475",
            "organName": "字节跳动"
        },  {
            "id": 2,
            "deviceId": "53456",
            "name": "最帅的坏兔子",
            "phone": "1567865475",
            "organName": "腾讯" 
        },{
            "id": 3,
            "deviceId": "2345",
            "name": "阿强",
            "phone": "1567865475",
            "organName": "360" 
        },{
            "id": 4,
            "deviceId": "2345",
            "name": "阿花",
            "phone": "1567865475",
            "organName": "百度" 
        },
        {
            "id": 5,
            "deviceId": "2345",
            "name": "阿奶",
            "phone": "1567865475",
            "organName": "蚂蚁金服" 
        },{
            "id": 5,
            "deviceId": "2345",
            "name": "阿狗",
            "phone": "1567865475",
            "organName": "阿里" 
        }
    ]

![767cc34c52867393ee7413e4efbc29f3.gif][]

Uncaught ReferenceError: M43445 is not defined  
at HTMLButtonElement.onclick (test.html:128)

![0918562ce89c00a77fe6801f47ccb5e9.png][]

![2f1a41963ea55161e72ef1e84340a04d.png][]

![c56d2e6e1401504b243ea8da4848b851.png][]

报错原因：  
具体原因是js把deviceId字符串当成一个变量对象,不能识别英文字母+数字类型的变量,在deviceId变量前后加上"转义字符,意思是",把deviceId最后以字符串类型参数传入到方法中

这个时候需要加个转义字符

\'' +row.deviceId+ '\'

![e9b6df9d2200121455e96a2e748387d9.png][]

[http_bootstrap-table.wenzhixin.net.cn_zh-cn]: https://links.jianshu.com/go?to=http%3A%2F%2Fbootstrap-table.wenzhixin.net.cn%2Fzh-cn%2F
[http_www.bootcss.com]: https://links.jianshu.com/go?to=http%3A%2F%2Fwww.bootcss.com%2F
[http_issues.wenzhixin.net.cn_bootstrap-table_index.html]: https://links.jianshu.com/go?to=http%3A%2F%2Fissues.wenzhixin.net.cn%2Fbootstrap-table%2Findex.html
[767cc34c52867393ee7413e4efbc29f3.gif]: /images/20220829/fcd37dd803c4476dbf83e8265af6d21b.png
[0918562ce89c00a77fe6801f47ccb5e9.png]: /images/20220829/95ecf599c7a34553b8aca1c4783c8e45.png
[2f1a41963ea55161e72ef1e84340a04d.png]: /images/20220829/17a3f6bdb47044169899d94446b7fb8f.png
[c56d2e6e1401504b243ea8da4848b851.png]: /images/20220829/bedd8f173616473ea000b02eb295e3b2.png
[e9b6df9d2200121455e96a2e748387d9.png]: /images/20220829/a063c93ec6ed4dccac6eb1a36f5eb726.png