### ajax
`<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>`
~~~
<div id="div"></div>
<img src="" alt="">
<script>
$.ajax({
type: "get",
url: "https://api.douban.com/v2/movie/top250",
dataType: "jsonp",
success: function (data) {
var subjects = data.subjects;
console.log(subjects)
var title = subjects[0].title;
var imgUrl = subjects[0].images.small;
$("#div").html(title);
$("img").attr("src", imgUrl)
}
})
</script>
~~~
### get
~~~
var url="https://douban.uieee.com/v2/movie/top250";
$.get(url,res=>{
console.log(res);
var subjects = res.subjects;
var data = subjects[0];
var img = data.images.small;
var title = data.title;
$("img").attr("src",img);
$("p").html(title);
},"jsonp");
~~~
### vue
~~~
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script src="https://cdn.bootcss.com/vue/2.5.21/vue.js"></script>
~~~
**代码**如下：
~~~
<div id="app">
<p>{{msg}}</p>
<img :src="imgUrl" alt="">
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
msg: "hello",
imgUrl:""
},
//beforeCreate是生命周期函数，相当于小程序里的onLoad，事件写在这里才能触发
beforeCreate() {
var url = "https://api.douban.com/v2/movie/top250";
$.get(url,res=>{
this.msg=res.subjects[0].title;
this.imgUrl = res.subjects[0].images.small;
},"jsonp")
}
})
</script>
~~~
### react
~~~
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
class Clock extends React.Component{
constructor(props){
super(props);
this.state={
title:"hello world",
imgUrl:""
}
}
render(){
return(
<div>
<h1>{this.state.title}</h1>
<img src={this.state.imgUrl} />
</div>
)
}
componentDidMount(){
var url = "https://api.douban.com/v2/movie/top250";
$.ajax({
url,
type:"get",
dataType:"jsonp",
success: res=> {
/* console.log(res); */
var subjects = res.subjects[0];
var title = subjects.title;
var imgUrl = subjects.images.small;
this.setState(()=>{
return {
title,
imgUrl
}
})
}
})
}
}
ReactDOM.render(
<Clock />,
document.getElementById('example')
);
</script>
</body>
</html>
~~~
- 空白目录
- 1.css、html
- 1.1 css的选择器有哪些
- 1.2 display属性
- 1.3 图片与文字会有空隙 原理是什么
- 1.4 简述一下你对HTML语义化的理解？
- 1.5 PNG,GIF,JPG的区别及如何选
- 1.6 css中有哪些继承属性
- 1.7 如何实现一个元素的垂直水平居中
- 1.9 position的属性以及特点
- 1.10 @import与link的区别
- 1.11 介绍一下你对浏览器内核的理解
- 1.12 title与h1的区别、b与strong的区别、i与em的区别
- 1.8display: none;与visibility: hidden;的区别
- 1.13 CSS和JS的位置会影响页面效率
- 1.14 对HTML5的理解
- 1.15 前端页面有哪三层
- 1.16 对web标准及w3c的理解
- 1.17 css3新增了哪些属性
- 1.18 form表单里面action的作用（form表单的属性）
- 1.19 src和href的区别
- 1.20 px、rpx、em、rem、vw的区别
- 1.22 table表格中合并行列
- 1.23 雪碧图以及它的优点；背景吸附
- 1.24什么是锚点
- 2.JavaScript
- 2、什么是ajax以及它的优缺点
- 3、json
- 4、数组
- 4.1 数组的增删改查
- 4.2 获取数组中最大值
- 4.3 遍历
- 4.4 排序，找出偶数，数组颠倒，去重
- 4.5 复制数组的方法
- 4.6 判断是否为数组
- 4.7 数组对象去重
- 5、call、bind、apply的区别
- 6、==与===的区别
- 7、null，undefined 的区别
- 8、如何解决跨域问题
- 9、dom
- 10、get与post的区别
- 11、原型与原型链
- 12、正则
- 13、谈谈document.ready和window.onload的区别
- 14、document.writer和innerHTML
- 15、用js实现一个事件监听，再用jq实现一个事件监听
- 16、sessionStorage,localStorage,cookie区别
- 16.1 localStorage和sessionStorage
- 17、 let/const/var的区别
- 18、深拷贝与浅拷贝
- 19、JavaScript有哪些方法定义对象
- 20、定时器
- 23、promise
- 24、贪婪模式和非贪婪模式的区别
- 25、回调函数
- 26、字符串与数字互相转换
- 27、字符串的方法
- 28、append与prepend
- 29、ajax、vue、react取数据
- 30、new操作符的作用
- 31、事件捕获与事件冒泡
- 31、js中对this关键字的理解
- 32、axios封装http请求
- 4、其他问题
- 5、面试日志清单
- 6、文字表达相关
- 1、输入URL到看到页面发生的全过程
- 2、http请求
- 3、什么是路由
- 4、前端开发有哪些优化问题
- 5、高质量的代码具备哪些条件
- 6、LESS和Sass之间的区别
- 7、es6有哪些新特性
- 8、什么是xml
- 9、栅格系统;媒体查询
- 10、浏览器的缓存机制
- 11、mvc与mvvm的区别
- 12、对模块化的理解
- 13、对前端工程师的理解
- 14、什么是面向对象
- 15、严格模式与混杂模式
- 16、Doctype作用是什么
- 17、什么是js闭包
- 7、计算题
- 8、小程序
- 1、小程序页面的生命周期
- 9、简历
- 10. 如何分盘
- 11.vue
- 1.0 生命周期及组件的生命周期
- 2.0 keep-alive
- 12.0 爬楼梯问题