layui ajax-search,记一次layui+ajax获取地区天气的完成过程

最开始是想了解ajax到底是怎么运作的，之前就看过不少概念，也懂需要带的一些参数，但是由于缺乏实际的操作和经验，不知道url后端给的究竟是什么样子的，其实现在也没有真正的获取到，只是偶然间发现了一个免费的天气API，叫做和风天气，然后就想着做一个简单的交互练练ajax。

于是查到了二级联动，新手先搬代码为敬，然后又把js部分捋了一下，原理主要运用的遍历和split()方法进行按符号多数据的拆分然后将遍历好的市一个个创建到select中，如下图所示：

二级联动关键js代码

因为最近有个项目用的是layui框架，所以开始学习layui，看官方文档就足够看明白了，文档写的还挺有趣的。在用框架之前，功能是可以实现的，但是想着让界面更加美化一些，于是添加了form标签(因为layui的select标签必须要加载form模板才可渲染出来)，加上以后倒是好看了，问题一个接一个：

1.选择省的时候相应的市select并未显示出来，依然是“请选择”三个字

这个问题真的很棘手，首先想到的就是js出了问题，但是并找不到哪里有问题，原代码采用的是jq选择器，$("#province").change(function(){

......

})

我自己想了一个下午没想出来，晚上问了一个学长，他说审查元素，今天早晨又问了老板，说打断点调试，然后我就明白了，使用layui框架以后select虽然渲染了但是并未在页面上显示出来，取而代之的是框架本身运用的dl、dd组合，所以用id选择器选择的province是无效的。

于是乎我改成了class选择器来选择dl，可是…...，竟然还是错的？？？依然没有效果？？？崩溃ing......

我又查了一下，原来是因为change()方法只适用于text、textare和select，怪不得没用，然后想到官方文档一定有方法获取到会变的select值，果不其然，明明我就看过但是就是想不起来，就是这个form.on()，其实就是事件监听啦：

form.on('event(filter)',callback)表单事件监听

我以为到这里就可以显示了...我好天真，因为我忘了一个小东西，没错就是官方文档中写了的form.render()，我怀疑自己上辈子是不是鱼，看过的东西只能记住7秒呢？好了到此为止第一个问题搞定。

2.当查询某省市天气后将省份换为“请选择”时，市select依旧为上一个市，依然可以查询。

这个不科学啊，用户体验很差的好吗！

行，我改还不行吗，我发现我总是把简单的问题搞得那么复杂，比如这里，我想获取到当前select值，如果为“请选择”，我就把下面的select也改为“请选择”，事实证明不行，为啥呢，因为要改的不是select而是input值，这个layui真的奇怪的很，也充分证明了审查元素是个好东西，下面是我的思路：

原本思路

OK，fine。我突然豁然开朗，直接一句$("#city").html()不就行了？？乌鸡鲅鱼

然后就在想，如果没有选择的话应该要给用户弹出来个框框提示要选天气才能查啊！不然要给你查个随机的天气吗？？？(诶呦，这个想法可以有，以后看看能不能搞出来玩玩)，加个alert()，ok！

其实我搞的最久的部分就是ajax传data参数我刚开始一直不知道咋传动态的(即不确定的数值)，我真的傻，后来知道了以后，我还是觉得自己傻。附上点击按钮ajax获取天气代码：

好了，至此完成了一个超级简单而且比较人性化的查询天气的PC端小东西，费时1天整，希望以后还会探索出更多好玩的东西吧！