1. ajax 是什么?有什么作用?
- AJAX全称是 Asynchronous JavaScript and XML(异步的 JavaScript 和 XML ),它是一种无须刷新页面就可以为页面中的某一部分加载数据的技术,数据通常以JSON的格式来进行传送,是一种创建快速动态网页的技术。
- 作用:AJAX通过在后台与服务器进行少量数据交换,可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新,会带来更好的用户体验。
2. 前后端开发联调需要注意哪些事情?后端接口完成前如何 mock 数据?
- 注意事情:
- 约定双方需要传输的数据格式和接口参数,在接口文档中确定好参数的名称、格式等。
- 约定好前后端联调的时间。
- 约定请求和响应的格式和内容。
- MOCK数据:
- 使用server-mock或mock.js搭建模拟服务器,进行模拟测试。
- 使用XAMPP等工具,编写PHP文件来进行测试。
3. 点击按钮,使用 ajax 获取数据,如何在数据到来之前防止重复点击?
- 状态锁:当发起一个ajax请求的时候把状态锁关闭,状态锁关闭期间的点击事件都不执行,请求完成的时候再把状态锁给打开。
<pre>var isLoading = false;//设置状态锁 btn.addEventListener("click",function(){ if (isLoading) { alert('等待中。。。'); return; } else{ isLoading = true;//打开状态锁 //状态锁打开后,执行代码 isLoading = false;//执行完代码后,需要在回调函数的最后将状态锁关闭 } },false);
</pre> - 定时器:让ajax请求在多少毫秒后发出,中间只要重复点击就清空定时器,以最后一次点击事件为准。
<pre>var timer = null; btn.addEventListener("click",function(){ if(timer){ clearTimeout(timer); } timer=setTimeout (function(){ //to do... //开启定时器,执行代码 },3000);//3秒内提交一次,重复点击重新计时
</pre> - 禁用按钮:当请求发起的时候禁用掉按钮,当请求成功的时候按钮才能继续使用。
<pre>function myFunc(){ var btn=document.getElementById('btn'); //to do... btn.removeAttr("disabled");//执行 指定代码后可选择移除disabled属性,让按钮可以再次被点击 } btn.click(function(){ btn.attr("disabled",true);//让按钮无法再次点击 myFunc();//执行其他代码,比如提交事件等 });
</pre>
本文版权归本人和饥人谷所有,转载请注明来源。