ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

前端初体验

2021-07-13 22:31:27  阅读:199  来源: 互联网

标签:初体验 XMLHttpRequest log 前端 ajax 服务器 console


前言

接到一个需求就是前端点击按钮,页面显示本地文件夹中最新的60张图片。
之前没怎么接触前端的编程语言, 借此机会体验一下; 顺便实践一下在陌生编程环境下如何学习跟适应。
期间通过W3school, 菜鸟教程学习了很多前端(HTML , javascript, IQuery 的$ajax, DOM的 document.write),服务器(nodejs)相关的技术

问题以及解决方案

问题:JavaScript 基于安全的考虑,是不允许直接操作本地文件的
解决:搭建一个nodejs服务器, 用于遍历本地文件夹
问: node搭建的服务器如何返回数据?(
答: 在Ajax的success : function(return_data) { }方法中,return_data就是就是从后端返回的数据

问:点击事件如何绑定多个操作

<a></a>锚可以直接设计onclick函数

问:ajax为什么都是j进入err回调函数
答:通过打印得到XMLHttpRequest.status = 0:
手动打开文件是用本地传输协议file://,而请求服务器文件使用http://协议,所以造成了跨域

–》nodejs设置允许跨域

问:success回调函数体内赋值给全局变量, 但是该全局变量出函数体就为空 答:(使用async:false)

总结

调试手段:不管什么语言, 一定要掌握调试手段, (知道错误码了,对症下药)可以事半功倍。

  • 前端的执行结果可以在网页上按F12查看打印
  • 前端js可以使用console.log(“err”, err), 然后在网页上按F12查看打印
  • $ajax返回错误的打印:
			error: function(XMLHttpRequest, textStatus, errorThrown) {
					//0
                 console.log("系统异常:",XMLHttpRequest.status);
				 //readyState0
				  console.log("readyState"+XMLHttpRequest.readyState);
				 //textStatuserror
				  console.log("textStatus"+textStatus);                   
              }
			  //dataType: json
	      })

标签:初体验,XMLHttpRequest,log,前端,ajax,服务器,console
来源: https://blog.csdn.net/sinat_20276189/article/details/118712221

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有