jquery post,jQuery ajax请求 收藏 0

关于跨域GET、POST请求的小结

重点：跨域POST大量数据；

JQuery：$.ajax/$.getJSON支持jsonp格式的跨域，但是只支持GET方式，暂不支持POST；

CORS：w3c关于跨域的新方案，res.setHeader(\’Access-Control-Allow-Origin\’,\’*\’)，兼容IE9+；

so，跨域POST是个值得研究的问题啊！万能的JQuery无法跨域POST；鉴于基本国情，CORS也只是适合在移动端玩玩；

相信有同学这样做过：

实际上chrome的控制台显示却是这样的：

那么，如图是否可以证明jQuery确实无法跨域POST呢？说好的POST呢，jQuery自动将其转为GET了；这样其实就和$.getJSON差不多了，只是$.ajax的跨域直接能回调返回值，而$.getJSON的返回值需要一个全局的callback（可自定义）；

话说我的个人小站在移动端还处于最原始的缩放状态，说好的H5 Response Web呢？原谅我再一次跑偏了：原本计划或者直接在原有样式表里media query；而结果却是我新开了个站点，作为移动端的版本，读取PC端存储的数据；一方面减轻代码量，使移动端更轻量简洁，毕竟只是个博客嘛；另一方面，这样的话，移动端将有更宽广的随意挥洒的空间；再者，基于性能优化，这样也不错；当然，问题也很明显了；两个站点要共享数据，连同一个数据库，要做同步操作，呵呵，我一个小前端，这些貌似目前想太多啊！那么怎么办呢，是的，就是上面说到的问题，前端跨域请求数据；

移动端的库用的是由zepto的一些模块自定义组装的一个版本，bootstrap什么的一边凉快凉快吧，样式手写的，权当练手吧。。。在后端，由Nodejs的http-proxy做代理，判断请求的UA，如果是移动端的访问，则无论host是www.famanoder.com还是m.famanoder.com全都分发到移动端的站点处理，这样在手机问www.famanoder.com就不用做跳转了；

OK，那么要开始跨域请求和提交数据了；如果只是请求远程数据，GET方式足矣；可是如果要提交大量数据，比如，某大侠路过小站，一时兴起，引经据典，古今中外，滔滔不绝，长篇大论一通

，这样的话恐怕GET搞不定啊！先看看最简单的GET方式吧：

然后定义好全局的getmore就OK了，后端处理也简单，我这是Nodejs，其他的自行百度吧：

当然像上图里那样也是可以的，后端同样处理；

前面说了，伟大的JQuery暂时不支持POST方式的跨域；那咋办呢？其实没有想象的那么复杂，是时候证明你不能太依赖JQuery了，有时候没有她，你也要好好过；

基本原理大概是这样的：form表单提交，无论你是post，还是get，无论你提交到哪，只要后端有对应程序处理，都妥妥的，不存在跨域一说；以前无刷新上传、提交表单都是将form的target指向一个空iframe，此处同理；类似：a.com提交表单到b.com，表单的target为一个空iframe；b.com处理请求，在response里执行callback，注意，此处callback是属于那个空iframe的；

后端的处理基本一样；如果不出意料，到此，请求会在控制台出现一片红，是的，要你设置domain；除了页面和对应js要设置domain外，一定别忘啦，response里的callback其实是属于当前页面的，所以response里执行的callback也要设置domain；类似这样：

OK，没有了她，你依然要好好过；这样你就可以POST跨域提交大量数据了；同时也弥补了JQuery只能通过jsonp GET跨域了；当然CORS在移动端也是值得推荐的；小伙伴们可以试一下，或者有其他什么好办法，记得和我分享啊！

20 道必看的 Vue 面试题 | 原力计划

作者 | 红颜祸水nvn

责编 | 唐小引

出品 | CSDN 原力计划

1. 什么是 MVVM？

MVVM 是 Model-View-ViewModel 的缩写，MVVM 是一种设计思想。Model 层代表数据模式，也可以在 Model 中定义数据修改和操作的业务逻辑；View 代表 UI 组件，它负责将数据模型转化为 UI 展现出来，ViewModel 是一个同步 View 和 Model 的对象。

2. 父组件向子组件传值的方法？

父组件传递的数据子组件用 props 方法接收。

子组件通过两种方式接收：可以传递任何类型（数组，对象，各种数据类型等等）

• props:[‘title’,‘likes’,‘isPublished’,‘author’]；

• props:{title:String,likes:Number}

详细介绍看这篇：Vue 父组件向子组件传值

https://blog.csdn.net/qq_34928693/article/details/80539350

3. 子组件向父组件传值的方法？

子组件向父组件传值用 this.$emit(key,value) ，父组件接收的时候需要在父组件中创建的子组件的标签中绑定 Key，格式:@Key=“方法名”，父组件声明这个方法，方法带参数，这个参数就是子组件传递的 Value。

详细介绍看这篇：Vue子组件向父组件传值

https://blog.csdn.net/sisi_chen/article/details/81635216

4. Vuex 是什么？哪种功能场景使用它？

Vuex 是专门为 Vue.js 设计的状态管理模式，它采用集中式储存管理 Vue 应用中所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

当项目庞大的时候使用它：

• 需要动态的注册响应式数据；

• 需要命名空间 namespace 来管理组织我们的数据；

• 希望通过插件，来更改记录；方便测试；以上这些需要和希望，都是我们 vuex 需要做的一些事情。

5. Vuex 有哪几种属性？

• state：基本数据

• getters：从基本数据派生的数据

• mutations：提交更改数据的方法，同步！

• actions：像一个装饰器，包裹 mutations，使之可以异步。

• modules：模块化 Vuex。

6. 如何让 CSS 旨在当前组件中起作用？

当前组件的 < style>标签修改为< style scoped>

7. 请列举出3个 Vue 中常见的生命周期钩子函数。

• beforeCreate：Vue 实例的挂载元素 $el 和数据对象 data 都为未定义，还未初始化。

• created：vue 实例的数据对象 data 有值了，$el 没有。

• beforeMount：vue 实例的 $el 和 data 都初始化了，但还是虚拟的 dom 节点，具体的 data.filter 还未替换掉。

• mounted：vue 实例挂载完成，data.filter 成功渲染

• beforeUpdate：data 更新时触发。

• updated：data 更新时触发。

• beforeDestroy：组件销毁时触发。

• destroyed：组件销毁时触发，vue 实例解除了事件监听以及 dom 的绑定（无响应了），但 DOM 节点依旧存在。

8. Vue 生命周期总共有几个阶段？

• beforeCreate 创建前

• created 创建后

• beforeMount 载入前

• mounted 载入后

• beforeUpdate 更新前

• updated 更新后

• beforeDestroy 销毁前

• destroyed 销毁后

9. 说出至少 4 种 Vue 当中的指令和它的用法？

• v-html：渲染文本（能解析 HTML 标签）

• v-text：渲染文本（统统解析成文本）

• v-bing：绑定数据

• v-once：只绑定一次

• v-model：绑定模型

• v-on：绑定事件

• v-if v-shou：条件渲染

10. vue-cli 工程中常用的 npm 命令有哪些？

• npm install：下载 node_modules 资源包的命令

• npm run dev：启动 vue-cli 开发环境的 npm 命令

• npm run build：vue-cli 生成生产环境部署资源的 npm 命令

11. 请说出 vue-cli 工程中每个文件夹和文件的用处。

• build 文件夹：存放 webpack 的相关配置以及脚本文件，在实际开发过程中只会偶尔用到 webpack.base.conf.js，配置 less、babel 等。

• config 文件夹：常用到此文件夹下的 config.js (index.js) 配置开发环境的端口号，是否开启热加载或者设置生产环境的静态资源相对路径、是否开启 gzip 压缩、npm run build 命令打包生成静态资源的名称和路径等。

• node_modules：存放 npm install 命令下载的开发环境和生产环境的各种依赖。

• src文件夹 ：工程项目的源码以及资源、包括页面图片、路由组件、路由配置、vuex、入口文件等。

• 其他文件：定义的一些项目信息，说明等等。

12. vue-router 路由的两种模式。

• hash 模式：

# 后面的 hash 值的变化，并不会导致浏览器向服务器发出请求，浏览器不发出请求，也就不会刷新浏览器，每次 hash 值的变化会触发 hashchange 事件。

• history 模式：

利用了 HTML5 中新增的 pushState 和 replaceState 方法。这两个方法应用于浏览器的历史记录栈，在当前已有的 back、forward、go 的基础之上，它们提供了对历史记录进行修改的功能。只是当它们执行修改时，虽然改变了当前的 URL，但浏览器不会立即向后端发送请求。

13. 如何解决 Vue 中的 ajax 跨域问题？

找到 config 文件夹中的 index.js 文件：

修改完之后的跨越请求就可以直接写成 /api/login 等等了。

14. Vue 打包命令是什么？Vue 打包后会生成哪些文件？

• npm run build ：Vue 打包命令

• Vue 打包后会在当前工作目录下生成一个 dist 文件夹，文件夹中会有 static 静态文件以及 index.html 初始页面。

15. Vue 如何优化首屏加载速度？

• 异步路由加载

• 不打包库文件

• 关闭 sourcemap

• 开启 gzip 压缩

16. scss 是什么？

SCSS 是 Sass 3 引入的新语法，其语法完全兼容 CSS3，并且继承了 Sass 的强大功能，唯一不同之处是 SCSS 需要使用分号和花括号而不是换行和缩进，SCSS 对空白符号不敏感。

17. axios 是什么？怎么使用？

axios 是一个基于 promise 的 HTTP 库，可以发送 get，post 请求，正是由于 Vue、React 的出现，促使了 axios 轻量级库的出现

特定：

• 可以在浏览器中发送 XMLHttpRequest 请求

• 可以在 node.js 发送 http 请求

• 支持 Promise API

• 拦截请求和响应

• 转换请求和响应

• 转换请求数据和响应数据

• 能够取消请求

• 自动转化 JSON 格式

• 客户端支持保护安全免受 XSRF 攻击

如何使用：

• npm install –save axios 安装axios

• 在入口 main.js 中导入 axios

• 使用 axios 发送 get 请求

• 使用 axios 发送 post 请求 post原生请求在后端是接收不到参数的，所有有两种解决方案，这里只写一种！第二种解决方案是用 QS。

18. vue-router 是什么？它有哪些组件？

vue-router 是 Vue.js 官方的路由管理器，它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：

• 嵌套的路由、是图标

• 模块化的、基于组件的路由配置

• 路由参数、查询、通配符

• 基于 Vue.js 过度系统的视图过渡效果

• 细粒度的导航控制

• 带有自动激活的 CSS class 的连接

• HTML 5 历史模式或 hash 模式，在 IE9 中自动降级

• 自定义的滚动条行为

vue-router 组件：

• < router-link to=\”\”> 路由的路径

• < router-link :to=\”{name:’‘l路由名’}\”> 命名路由

• < router-view> 路由的显示

19. 怎么定义 vue-router 的动态路由？怎么获取传递过来的动态参数？

在 router 目录下的 index.js 文件中，对 path 属性加上 /:id。使用 router 对象的 params.id，例如：this.$route.params.id。

20. MVVM 和其他框架 （jQuery）的区别是什么？哪些场景适合？

• Vue 是数据驱动，通过数据来显示视图层而不是节点操作。

• 处理数据交互的时候挺适合 MVVM 设计模式的。

本文为CSDN博主「红颜祸水nvn」的原创文章，CSDN 官方经授权发布。

原文链接：https://blog.csdn.net/qq_43647359/article/details/104774302

欢迎更多的开发者朋友加入 CSDN 原力计划！我们将用全新的方式来释放更多的流量，让优质、有深度、丰富有趣的内容得到精准的流量扶持，同时也帮助创作者和粉丝有更多互动和交流。点击下方图片了解详情。

☞比尔·盖茨退出微软公司董事会；苹果 WWDC、微软 Build 大会均改为线上举办；Rust 1.42.0 发布| 极客头条

☞11 国股市熔断，“祸及”程序员？！

☞2.2版本发布！TensorFlow推出开发者技能证书

☞Soul App 高管被捕，恶意举报导致竞品被下架

☞2020 年最新版 68 道Redis面试题，20000 字干货，赶紧收藏起来备用！

☞最近一个名为 BTCU 的比特币分叉，准备用新分叉解决比特币网络的旧问题

本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com