layui弹出层post请求

最新推荐文章于 2025-09-02 11:39:17 发布

原创最新推荐文章于 2025-09-02 11:39:17 发布 · 1.8w 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#layui弹出层 #post

前端专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一种解决layer.open弹窗加载二维码图片时遇到的问题的方法。通过将GET请求改为POST请求，并使用ajax进行数据传输，成功解决了因请求方式不匹配而导致的页面加载失败问题。

遇到的问题：

在点击查看二维码时，页面找不到。

我的请求是这样的：

                        layer.open({
                            type: 2,
                            anim: 0,
                            title: "查看二维码",
                            area: ['35%', '70%'],
                            btn: ['关闭'],
                            content: ['${basePath!}/bookShelf/checkQrCode/'+qrCode,'yes']
                        });

原因：点击查看二维码layer.open弹出层发送的是get请求，而我传的参数是一个http地址，这样就导致请求地址错误。

题外话：（常规请求：通过属性 content 加载弹出框中的内容，因为需要在加载弹出框后，发送一个url请求动态加载数据，所以type设置为2）

解决：通过ajax发送post请求，把请求成功页放到layer.open的content中，因为我们是通过content来加载弹出层的内容的，这里content请求结果页面，所以type设置为1（0：信息框，默认；1：页面层；2：iframe层；3：加载层；4：tips层）。

代码如下：

                $.ajax({
                    url: '${basePath!}/bookShelf/checkQrCode',
                    type: 'POST',
                    data: {qrCode:qrCode},
                    dataType : "html",
                    success: function (result) {
                        layer.open({
                            type: 1,
                            anim: 0,
                            title: "查看二维码",
                            area: ['35%', '70%'],
                            btn: ['关闭'],
                            content: result
                        });
                    }
                });

在请求layui的弹出层需要传入的参数过多过长而不能使用get请求时，也可通过这种方式。