layui 下拉框三級聯動

       因為公司需要做一個雲打印機，說白了就是整合用戶使用同一台打印機，做集中處理，打印的內容基本都是快遞單，那就先說說前端的處理流程，雲打印機后台下一篇文章在說，好那我們直接開整。

           1）為了更好的用戶體驗，想做成菜鳥驛站的那種，商家把地址粘貼到快遞地址框中程序可以自動識別出地址信息中的省市區這些基本信息，我一下就想到了百度《語言處理基礎技術》因為部分免費但是對於地址解析來說就夠用了。

             百度的語言處理技術網址：https://cloud.baidu.com/product/nlp_basic   說明文檔： https://cloud.baidu.com/doc/NLP/s/vk6z52h5n

             點擊立即使用，進入控制台，創建應用；

           創建完應用之后我們就可以獲取到APPID、APIKEY，Secret Key這個三個憑證，然后我們查看下這個功能的開發文檔，看完之后我們可以得知，如果要調用這個api我們需要獲取開發者的Token（獲取Token的流程百度有，我就不做過多的贅述了。）

開始調用接口：

             

 

 

 

 這個就是回傳的數據，好現在我們地址解析的數據有了，那么我們下面就開始進行對layui的三級聯動下拉框賦值。

2）懶得寫聯動js正好layui有擴展的layarea.js 文件地址：https://fly.layui.com/extend/layarea/

       根據文檔即可實現下面的功能，現在我們的全國地址的數據有了，接下來就是把文本框地址傳給百度接口，接口解析完畢后，將回傳的數據重新綁定到下拉框。

 

 賦值格式如下：

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

在用戶粘貼文本時觸發，代碼如下，

 $.fn.pasteEvents = function (delay) {
                if (delay == undefined) delay = 20;
                return $(this).each(function () {
                    var $el = $(this);
                    $el.on("paste", function () {
                        $el.trigger("prepaste");
                        setTimeout(function () { $el.trigger("postpaste"); }, delay);
                    });
                });
            };


  $("#寄件詳細地址").on("postpaste", function () {
                // do something
                var text = $(this).val();
                $(this).val(text);
                $.ajax({
                    url: 'https://aip.baidubce.com/rpc/2.0/nlp/v1/address?你的token',
                    type: 'post',
                    dataType: "json",
                    data: JSON.stringify({
                        "text": text,
                        "confidence": 100
                    }),
                    async: false,
                    success: function (res) {
                    }
                }).done(function (res) {
                    form.render('select')
                    layarea.render({
                        elem: '#area-picker-ji',
                        setvalue: true,
                        data: {
                            province: res.province,
                            city: res.city,
                            county: res.county,
                        },
                    });
                })


            }).pasteEvents();

效果圖：

 已經可以自動解析並賦值了

  他的封裝好的js不賦值，我已將js包進行了。修改"setvalue"就是是否需要賦值，默認為false。

  下面是我改好的包地址：https://blog-static.cnblogs.com/files/blogs/680325/layarea.js

 下一篇說下雲打印機的后台（C#）