小白小白从不日别的博客

实现大致步骤：界面大致的UI结构 获取用户输入的搜索关键词，通过为输入框绑定 keyup 事件实现 封装getSuggestList()函数，获取搜索建议列表的代码 渲染建议列表的UI结构及渲染模板结构的函数renderSuggestList() 搜索关键词为空时隐藏搜索建议列表 实现输入框的防抖 缓存搜索的建议列表（如果第一次请求的内容和第二次请求的内容一样，那么就不再重新发起请求，而是沿用上一次的请求结果） <!-- 导入页面的基本样式 --> ...

实现步骤：定义 UI 结构验证是否选择了文件向 FormData 中追加文件使用 xhr 发起上传文件的请求监听 onreadystatechange 事件 <link rel="stylesheet" href="./lib/bootstrap.css" /> <script src="./lib/jquery.js"></script> <!--1. 文件选择框--> &...

本案例主要利用 boostrap 来快速构建页面 UI步骤：渲染评论列表UIindex.css，body { padding: 15px;}.list-group-item span:first-child { background-color: #5bc0de;}.list-group-item span:last-child { background-color: #f0ad4e;} <link rel="stylesheet"

实现步骤：1.梳理案例的代码结构a.梳理页面的UI布局 b.将业务代码抽离到chat.js中 c.了解resetui()函数的作用：重置滚动条的位置 <link rel="stylesheet" href="css/reset.css" /> <link rel="stylesheet" href="css/index.css" /> <script src="js/jquery-1.12.4.min.js"></sc...

这里为了快速搭建出其骨架，我们利用boostrap来帮助我们快速构建开发环境：vscode（为了提升书写代码的速率推荐安装 bootstrap 3 Snippets 插件）该案例主要由两部分构成：顶部的 添加图书的Panel面板底部的 图书表格下面先来搭建骨架： <link rel="stylesheet" href="css/bootstrap.css" /> <link rel="stylesheet" href="css/inde...

*{ margin: 0; padding: 0; } div{ width: 300px; height: 300px; border: 1px solid #000; margin: 50px auto; text-align: center; backg...

一、fetch网络请求（了解）fetch和Ajax一样都是用于请求网络数据的fetch是es6新增的，基于promise的网络请方法1.1 fetch的基本使用 fetch(url,{options}) .then() .catch();1.2 get请求方式 fetch("./41.php?teacher=lwj&age=20", { method: "get" }).then...

<!-- 注意点： 1.上传文件一般使用POST提交 2.上传文件必须设置 enctype="multipart/form-data" --> <form action="post-file.php" method="post" enctype="multipart/form-data"> <input type="file" name="upFile"> <b...

.loginRegistDiv { text-align: center; padding: 15px; border: 1px solid black; width: 300px; min-height: 30px; } .welcomeDiv { text-align: center; .

这个案例主要是为了模拟网页中我们经常见到的分页效果，在这里主要用到了Ajax以及PHP，当然还有数据库，这里我用的是MySql数据库，而且只是为了单纯的实现这个效果因此对于数据库的设计这块并没有去认真的设计，下面我们就直接看代码吧 <script src="js/jquery-1.12.3.min.js"></script> <style> .fenye span { border: 1px solid #ccc;

利用跨域实现的模拟百度搜索提示的案例，关于这个案例在这里就不多说什么，我们直接上代码吧，关于跨域问题，感兴趣的小伙伴可以看一下我之前写的一篇：两种跨域方式：CORS--JSONP<style> * { margin: 0px; padding: 0 } input { width: 300px; height: 30px; .

主要介绍了Ajax

主要介绍了两种常见的跨域解决方案

<progress min="0" max="100" value="0"></progress> <br/> <input type="file" class="tempFile" multiple /><br/> <button onclick="ajaxSubmit()">上传文件</button><script> function ajaxSubmit() .

主要讲述了三大本地缓存--Cookie、LocalStorage、SessionStorage

目录一、前后端通信1.1 初识前后端通信1.2 前后端通信的过程与概念理解1.3 前后端通信方式二、初识HTTP2.1 HTTP是什么2.2 HTTP请求响应的过程2.3 HTTP报文a.HTTP报文是什么b.HTTP报文格式三、HTTP方法3.1 常用的HTTP方法3.2 HTTP方法的语义3.3 RESTful接口设计3.4 GET和POST方法对比3.5 HTTP状态码b.HTTP状态码的语义一、前后端通...