1.vue-resource
this.$http.get('请求地址').then(function(result){
//通过result.body拿到服务器数据
console.log(result.body);
})
this.$http.post('请求地址'，{上传的数据对象}，{emulateJSON:true}).then(result=>{
console.log(result.body);
})
//手动发起的post请求默认没有表单格式，所以有的服务器处理不了
//通过post方法提供的第三个参数，{emulateJSON:true}设置提交的内容类型普通表单数据格式
this.$http.jsonp('请求地址').then(result=>{
console.log(result.body);
})
2.序列化和反序列化JSON.parse()和JSON.stringify()
JSON.parse();
作用:将JavaScript对象表示法的JSON字符串转换为对象(字符串转对象)
语法:JSON.parse(text [, reviver])
text 必选。 一个有效的 JSON 字符串。
reviver 可选。 一个转换结果的函数。 将为对象的每个成员调用此函数。
返回值:JSON对象
实例如下:
JSON.stringify()
作用:将 JavaScript json对象转换为JavaScript对象表示法的JSON字符串(对象转为字符串)
语法:JSON.stringify(value [, replacer] [, space]);
value 必选 通常为对象或数组
replacer 可选转换结果的函数或数组
space 可选。 添加缩进、空白和换行符来返回值 JSON 文本更便于阅读。
如果省略 space，返回值文本生成，没有任何额外的空白。
如果 space 是数字，则返回值具有空白的文本缩进指定数目在每个级别的。 如果 space 大于10 时，文本缩进 10 个空白。
如果 space 为非空字符串，如“\t”，返回值文本缩进与字符串的字符在每个级别。
如果 space 为大于 10 个字符的字符串，使用前 10 个字符。
返回值:JSON 包含的文本字符串。
如下
3.JSONP实现原理
由于浏览器的安全性限制，不允许AJAX访问协议不同，端口不同的数据接口，浏览器认为这种访问不安全；
可以通过动态创建script标签的形式，把script标签的src属性，指向数据接口的地址，因为script标签不存在跨域限制，这种数据获取的方式叫做JSONP(只支持get请求)
4.node创建服务器
页面：
<script>
function show(data){
console.log(data)
}
</script>
<script src="http://127.0.0.1:3000/getscript?callback=show"></script>
node:
//倒入内置模块
const http = require('http')
//这个核心模块，能够帮我们解析URL地址，从而拿到pathname query
const urlModule = require('url')
//创建一个http服务器
const server = http.createServer()
//监听http服务器的request请求
server.on('request',function(req,res){
//const url = req.url
const{ pathname:url,query } = urlModule.parse(requ
.url,true)
if(url === '/getscript'){
//拼接一个合法的JS脚本，这里拼接的是一个方法的调用
//var scriptStr = 'show()'
var data = {
name:'xjj',
age:'18',
gender:'女孩子'
}
var scriptStr = `${query.callback}(${JSOM.stringify(data)})`
res.end(scriptStr)
}else{
res.end('404')
}
})
//指定端口号并启动服务器监听
server.listen(3000,function(){
console.log('server listen at http://127.0.0.1:3000')
})
5.`${expression}`字符串占位符
在一个模板字面量中，你可以把任何合法的JavaScript表达式嵌入到占位符中将其作为字符串的一部分输出到结果中。占位符${expression}中间可以包含任意的JavaScript表达式
例子：
this.$refs.scrollWrapper.style.height = `${this.clientHeight - 44}px`
网友评论