调用函数执行ajax发送post请求时，页面卡住，点击不动

在js中当触发点击事件时，函数执行ajax发送post请求时，页面卡住不动，好像并没有执行ajax请求。
下面是js代码，就是调用了改函数，页面就卡死了。可以运行到layer.alert(data.name);，然后就卡死了。
function convert(location, name, m3u8Location, m3u8Name, hlsTime, encoder) {

            /*var location = $('#location').val();
            var name = $('#name').val();
            var m3u8Location = $('#m3u8Location').val();
            var m3u8Name = $('#m3u8Name').val();
            var hlsTime = $('#hlsTime').val();
            var encoder = $('#encoder').val();*/

            var data = {
                "location": location,
                "name": name,
                "m3u8Location": m3u8Location,
                "m3u8Name": m3u8Name,
                "hlsTime": hlsTime,
                "encoder": encoder
            };

            $("#convertM3u8").on('click', function () {
                layer.alert("执行了 convertM3u8");
                layer.alert(data.name);
                debugger;
                $.ajax({
                    type:"POST",
                    url:"/video/convertM3u8",
                    data:data,
                    dataType:"json",
                    success:function (data) {
                        layer.msg(data.msg);
                    },
                    error:function (data) {
                        layer.msg(data.msg);
                    }
                });
            });

        }
运行结果及报错内容

img

我的解答思路和尝试过的方法
我想要达到的结果

成功请求/video/convertM3u8接口。

console里 有报错吗？

先解决显示问题

img