weikipedia-viewer

实现的页面效果如下图：

图片.png

图片.png

具体的demo及代码详见 https://codepen.io/Shillyli/full/XEBQga/

一、代码过程遇到的问题

1、点击搜索后结果出现后又自动刷新回到主页面
按钮中需要添加'type="button"',否则浏览器会认为按钮的作用是提交，就会自动刷新。
2、开启开发者工具调试时ajax获取到的数据进入success方法，而直接打开页面进入error方法。
ajax是异步加载的，所以需要在$.ajax（{}）里面添加async : false,让它同步加载。

二、至今疑问

1、一开始从codepen上保存到本地的代码所使用的jquery，bootstrap等外部地址在本地打开时加载失败。
https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js改为https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js">之后才可用。
2、原本是设置weiki大标题字样在搜索后浮动到左侧与搜索栏在一行，输入框获得焦点后又回到原来的位置，但是浮动之后的元素始终回不去。