jquery ajax 函数用法详解
在前端开发中经常需要用到ajax请求后端接口，做异步请求，今天就来讲讲ajax函数的具体用法。
jQuery的$.ajax()函数是一种强大的工具，用于通过HTTP请求从服务器加载数据，而无需刷新整个页面。以下是对$.ajax()函数用法的详细解释：
- 基本用法
- 语法一：jQuery.ajax(settings)
- 参数settings是一个对象，包含了所有发送请求所需的额外参数设置[^1^]。
- 语法二：jQuery.ajax(url, settings)
- 这是语法一的变体，将参数对象settings中的可选属性url单独提取出来作为一个独立的参数[^1^]。
- 常用参数
- url（String类型）：请求的URL地址[^1^]。
- type（String类型）：请求类型，如“GET”或“POST”，默认为“GET”[^5^]。
- async（Boolean类型）：是否为异步请求，默认为true。如果设置为false，请求将是同步的[^5^]。
- beforeSend（Function类型）：在发送请求前可修改XMLHttpRequest对象的函数[^5^]。
- cache（Boolean类型）：指示是否缓存请求，默认为true。设置为false将强制浏览器不缓存当前请求[^5^]。
- data（任意类型）：发送到服务器的数据，可以是对象、字符串等[^5^]。
- dataType（String类型）：预期服务器返回的数据类型，如“json”、“xml”、“html”等[^5^]。
- success（Function类型）：请求成功时执行的回调函数[^5^]。
- error（Function类型）：请求失败时执行的回调函数[^5^]。
- complete（Function/Array类型）：请求完成后执行的回调函数，无论成功或失败都会调用[^1^]。
- 示例代码
总结来说，jQuery的$.ajax()函数提供了一种灵活且强大的方式来进行Ajax请求。通过合理配置其参数，可以实现各种复杂的数据交互需求。然而，需要注意的是，随着技术的发展和Web标准的变化，现代Web开发中更推荐使用Fetch API或其他更现代的技术来处理异步请求。
前端面试题《JQuery》
$() 函数是 jQuery() 函数的别称，$()函数用于将任何对象包裹成 jQuery对象，接着被允许调用定义在jQuery对象上的多个不同方法。甚至可以将一个选择器字符串传入$()函数，它会返回一个包含所有匹配的DOM元素数组的jQuery对象。这个问题我已经见过好几次被提及，尽管它非常基础，它经常被用来区分一个开发人员是否了解jQuery。
jQuery支持不同类型的选择器，例如ID选择器、class选择器、标签选择器。鉴于这个问题没提到ID和class，可以用标签选择器来选择所有的div 元素。jQuery代码：$(\”div\”)，这样会返回一个包含所有5个div标签的jQuery 对象。
这对于很多java零基础学jQuery的初学者来说是一个棘手的问题，其实是个简单的问题。$(this) 返回一个jQuery对象，你可以对它调用多个 jQuery方法，比如用text()获取文本，用val()获取值等等。而this代表当前元素，它是JavaScript关键词中的一个，表示上下文中的当前DOM元素。你不能对它调用 jQuery方法，直到它被 $() 函数包裹，例如 $(this)。
除了报错节省服务器带宽以及更快的下载速度这许多的好处之外, 最重要的是，如果浏览器已经从同一个CDN下载类相同的jQuery版本, 那么它就不会再去下载它一次，因此今时今日，许多公共的网站都将jQuery用于用户交互和动画, 如果浏览器已经有了下载好的jQuery库，网站就能有非常好的展示机会。
方法链是对一个方法返回的结果调用另一个方法，这使得代码简洁明了，同时由于只对DOM进行了一轮查找，性能方面更加出色。
可以用 jQuery方法appendTo()将一个HTML元素添加到DOM树中。这是jQuery提供的众多操控DOM的方法中的一个。可以通过appendTo()方法在指定的DOM元素末尾添加一个现存的元素或者一个新的HTML元素。
（1）get()取得所有匹配的DOM元素集合；
（2）get(index)取得其中一个匹配的元素.index表示取得第几个匹配的元素；
（3）append(content)向每个匹配的元素内部追加内容；
（4）after(content)在每个匹配的元素之后插入内容；
（5）html()/html(var)取得或设置匹配元素的html内容；
（6）find(expr)搜索所有与指定表达式匹配的元素；
（7）bind(type,[data],fn)为每个匹配元素的特定事件绑定事件处理函数；
（8）empty()删除匹配的元素集合中所有的子节点；
（9）hover(over,out)一个模仿悬停事件(鼠标移动到一个对象上面及移出这个对象)的方法；
（10）attr(name)取得第一个匹配元素的属性值。
获取页面的元素；修改页面的外观；改变页面大的内容；响应用户的页面操作；为页面添加动态效果；无需刷新页面，即可以从服务器获取信息；简化常见的javascript任务。
jQuery选择器支持CSS里的选择器，jQuery选择器可用来添加样式和添加相应的行为，CSS中的选择器是只能添加相应的样式。
jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的CSS选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。
Axure教程：获取页面尺寸、内联框架自适应大小
编辑导语：如何使用Axure去获取页面尺寸，并且使内联框架自适应大小呢？本文作者通过实际操作，进行了记录总结，希望看后对你有所帮助。
今天要演示的东西其实很简单，一两分钟就能做完，主要是用来弥补Axure IDE提供的交互功能中的不足，导致一些想法没办法很好地实现。
其实国外有大神(De Jongh)做了一个能在Axure发布框架内跑起来的Javascript拓展，这是地址：http://dejongh.dk/wiki/doku.php?id=interaction:axure_api&do=index。
一部分是Axure基于jQuery的函数，还有一部分是他补充的扩展函数，扩展函数看起来很不错，解决了很多问题；但是安装实在是麻烦，特别是如果面向不熟悉代码的设计师（流程设计师、视觉设计师等）简直是天书。
为此，结合我们常用的一些功能或函数，我梳理了一些不需要拓展库就能实现的，做成例子分享给大家。
今天，我们做一个iframe内联框架根据加载页面的尺寸自适应变化大小。Axure自带的页面属性是很简单的，只有一个pageName，完全不够用！如图：
通常我们做页面的时候，还会用到页面的尺寸。比如自定义视觉的滚动条、通过iframe（内联框架）做的页面切换等等，如果没有页面尺寸，会导致无法实现自适应等操作，所以今天来解决它。
这是演示地址，可能因为网络的原因，导致页面载入时间过长，高度值读取失败，请刷新一下：https://fa35br.axshare.com/#id=5cgvid&p=home。
我们先准备3个页面1个全局变量：1个是带菜单的主页面，2个演示用内容页，还有1个全局的变量。
交互流程与原理：
按钮点击触发，被加载的子页面在载入的时候，获取自己的页面高度，然后写入到全局变量，按钮动作延时改变iframe的尺寸。
主页面内我放置了2个按钮，1个iframe：2个按钮（矩形），没有命名要求；1个iframe，iframe的元件ID命名为“loadPageFrame”，设置为隐藏边框、从不滚动。
这两个页面随便找些文字，或者画一些测试的图形，尽可能把页面高度拉长，以便等会测试的时候体现出区别。
主页面当中按钮主要是触发iframe载入目标页面，然后延迟500ms（可根据需求调整，150ms基本也ok），根据全局变量“size”改变iframe的尺寸。
给菜单按钮添加交互，交互的次序不要错：要先把iframe缩小到10高度，然后打开链接，延迟后再设定尺寸。
内容页可任意制作，只需要在页面中添加页面的交互，作为载入时获取本页面的高度：
代码如下：javascript:void($axure.setGlobalVariable”size”, document.documentElement.scrollHeight));
采用延时触发，是因为跨页面的元件是无法直接交互的（IDE当中获取不到目标指针），所以只能通过跨页面的全局变量来实现。基本上延迟200ms左右是不被察觉的，当然考虑到终端的运行能力，可以适当延长。
示例代码中的626w是随意设置的iframe宽度，也可根据变量修改。[[size]]就是全局变量size，可以在IDE当中直接引用。
为了方便大家以后搜索，我用到的函数列举一下：
- $axure.setGlobalVariables[name,value]：赋值axure的全局变量，可以跨页面使用，无法通过代码创建，需要在Axure的IDE当中先定义变量；
- document.documentElement.scrollHeight：页面内容高度，一个很常规的HTML对象属性，只是在Axure IDE当中没有被暴露，可写在JS代码里。
当能获取页面尺寸，并通过全局变量修改iframe尺寸以做到自适应以后，我们就可以不再依赖“Axure母版”这个有限的玩法了，菜单框架页面做好，其他的内容页面可以随意做，并且多人协作时不再出现已放置在页面中的母版同步时效的问题。
并且使用浏览器本身的页面滚动条，要比iframe的滚动条要美观很多。
今天的文章比较干，或者说比较枯燥，本来还有一个很长的文章想要写的，虽然例子已经做好，主要是解决了Axure的IDE里面怎么通过JS代码准确定位到元件，以获得更多的自由度去封装应用。
考虑到内容更干所以还在酝酿怎么措辞，会尽快发布。
回到做这个系列的初衷，还是为了让懂代码的同事能预先用JS与原生IDE组合的方式，把一些组件预先根据团队的视觉交互规范封装好，以便不懂代码的同事可以方便并快速的使用来搭建交互原型。
关注我，下周会放出包括之前文章相关的源文件。
作者：ELement；公众号：ElementChen
本文由 @ELement 原创发布于人人都是产品经理，未经作者许可，禁止转载。
题图来自Unsplash，基于CC0协议。
本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com
文章为作者独立观点不代本网立场，未经允许不得转载。
投诉举报&联系我们：
