1.跨域问题：
什么是跨域：在页面中使用js访问其他网站的数据时，就会出现跨域
Access to XMLHttpRequest at 'http://localhost:8080/getProducts' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
从源头为null访问http://localhost:8080/getProducts请求 已被CORS策略阻止：请求的资源上不存在“Access Control Allow origin”标头。
为什么会出现跨域：
因为浏览器受同源策略的限制，当前域名的js只能读取同域下的窗口。
同源策略就是：指协议，域名，端口号相同 才允许共享资源，保障浏览器的安全
解决跨域：
可通过CORS配置请求头开启跨域资源共享，及代理层交给服务器处理
通过JSONP实现跨域：利用script的src属性请求服务器，通过参数（如：？callback=foo，foo为本地一个执行的方法）告诉服务器返回指定格式的JS脚本，并将数据封装在此脚本中（无法完成post请求只能get）
在script脚本中创建script标签，并且给其src属性赋值为要访问的url地址后面以问号分隔写callback参数，这个参数名要和后端定义的一致，其值为本地定义的函数的函数名，，再将scrip标签追加到页面中
<button>发送网络i请求</button> <script src="./jquery.min.js"></script> <script> function getMsg(data) { console.log(data); } $("button").click(function (e) { e.preventDefault(); // 直接访问会出现跨域的问题 1.jsonp 2.cors 3.代理服务器 // $.ajax({ // type: "get", // url: "http://localhost:8080/getProducts", // success: function (response) { // } // }); var script = document.createElement("script"); // callback 参数 必须要和后端定义的一致 // callback的值为本地定义的函数 script.src = "http://localhost:8080/getProducts?callback=getMsg"; $(script).appendTo("body"); }); </script>
2.轮播图插件
插件下载方式：
1.官网下载
2.BootCDN
3.npm
4.github
2.1 SuperSlider
下载方式：1.官网下载：SuperSlide | TouchSlide 官方网站 大话主席
2.BootCDN：没找到啦啦啦
3.npm：superslider - npm
4. github: SuperSlider/src/js at master · OTaylorUK/SuperSlider · GitHub
<script type="text/javascript">
// 对于参数的中的对象 如果为基本的一些值直接定义就可以
// 如果有一些需要指定标签时 需要指定类名 如果需要自定义 则一定要配置好对于的key
$(".slideBox").slide({ autoPlay: true,mainCell:".bd ul",pageStateCell:".pageState1111",mouseOverStop:false});
</script>2.2 Swiper
3.purl解析url
就是获取url地址的
1.利用bom对象的location来获取url地址
console.log(window.location);2.在原生js中直接用purl()获取对象然后调对象的属性可获得url
<script src="purl.js"></script>
var url = purl();
// // 获取方式1:
console.log(url.data.attr.source); // 完整地址
console.log(url.data.attr.protocol); // 协议
console.log(url.data.attr.port); //端口
console.log(url.data.attr.relative); // 相对路径
console.log(url.data.attr.file); // 文件
console.log(url.data.attr.host); // 主机3.在jquery中使用
先引入jquery脚本，再引入purl脚本，然后可以用对象调属性获取参数，也可以用对象调方法的形式获取参数
<script src="./jquery.js"></script>
<script src="purl.js"></script>
<script>
// 利用bom对象来获取 url地址 麻烦
// console.log(window.location);
//1 原生js中 不需要引入jquery 使用purl()
// var url = purl();
// 2. 在jquery中使用
var url = $.url();
// // 获取方式1:
console.log(url.data.attr.source); // 完整地址
console.log(url.data.attr.protocol); // 协议
console.log(url.data.attr.port); //端口
console.log(url.data.attr.relative); // 相对路径
console.log(url.data.attr.file); // 文件
console.log(url.data.attr.host); // 主机
url = $.url("http://markdown.com/awesome/language/markdown.html?show=all&name=123#top");
console.log(url)
console.log(url.attr());
url.attr('source');//"http://markdown.com/awesome/language/markdown.html?show=all#top"
url.attr('protocol');// "http"
url.attr('host');//"markdown.com"
url.attr('relative');// "/awesome/language/markdown.html?show=all#top"
url.attr('path');//"/awesome/language/markdown.html
url.attr('directory');//"/awesome/language/"
url.attr('file');// "markdown.html"
url.attr('query');//"show=all"
url.attr('fragment');// "top" 获取#后的值
//使用对象调用属性的方式 获取参数
console.log(" 获取 参数 === ",url.data.attr.query);// 字符串
console.log(" 获取 参数 === ",url.data.param.query);// object对象
console.log("方法的形式获取参数 = ", url.param())// obj
console.log("方法的形式获取参数 = ", url.param("show"))//all
</script>4.validate验证插件
https://www.runoob.com/jquery/jquery-plugin-validate.html
jQuery Validate 插件为表单提供了强大的验证功能，直接在客户端验证无需让服务端验证，减少服务端压力。
使用方法：通过CDN导入js库，包括jquery及jquery.validate.min.js"，
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script> <script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>要想验证的提示信息为中文，还需导入
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>4.1在控件中使用validate验证
控件也就是标签元素，根据校验规则，为控件添加属性及属性值，在js脚本中找到form表单调用validate()方法。
$().ready(function () { // 该函数必须要调用 从才能让form表单 使用validate验证插件 $("#commentForm").validate(); }); $.validator.setDefaults({ submitHandler: function (form) { alert("提交事件!"); // form.submit(); } });4.2 在js脚本中使用
在表单的validate()方法中传递rules对象，其中rules对象的key为表单中元素的name值，value值通过校验规则设置，进而验证，
其中校验用户名是否已被创建，可在用户名的校验对象中添加key为remote的对象
rules: { // key 为input对应的name字段的值 name: { required: true, minlength: 2, maxlength: 5, // 如果已经存在该用户 则验证不通过 进行远程校验 remote: { url: "http://localhost:8080/checkName", //后台处理程序 type: "post", //数据发送方式 dataType: "json", //接受数据格式 data: { //要传递的数据 name: function () { return $("#cname").val(); } } } },也可以通过自定义校验结合正则表达式：
用 jQuery.validator的.addMethod()方法
// 自定义校验 jQuery.validator.addMethod("isphone", function (value, element) { var tel = /^(13[0-9]|14[5|7]|15[0|1|2|3|4|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/; return this.optional(element) || (tel.test(value)); },添加自定义提示信息：
messages: { name: { required: "必须写", minlength: "最少2", maxlength: "最多5", } }
$().ready(function () {
// 自定义校验
jQuery.validator.addMethod("isphone", function (value, element) {
var tel = /^(13[0-9]|14[5|7]|15[0|1|2|3|4|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/;
return this.optional(element) || (tel.test(value));
}, "请输入正确手机号码");
$.validator.setDefaults({
debug: true,// 调试模式
ignore: ".ignore"// 添加忽略清单
});
// 该函数必须要调用 从才能让form表单 使用validate验证插件
$("#commentForm").validate({
success: "valid",// 验证成功添加该类名
rules: {
// key 为input对应的name字段的值
name: {
required: true,
minlength: 2,
maxlength: 5,
// 如果已经存在该用户 则验证不通过 进行远程校验
remote: {
url: "http://localhost:8080/checkName", //后台处理程序
type: "post", //数据发送方式
dataType: "json", //接受数据格式
data: { //要传递的数据
name: function () {
return $("#cname").val();
}
}
}
},
psw: {
required: true,
minlength: 6,
maxlength: 10,
},
apsw: {
required: true,
equalTo: ".psw1"// 为选择器
},
email: {
required: true,
email: true
},
url: {
required: true,
url: true
},
phone: {
required: true,
isphone: true
}
},
messages: {
name: {
required: "必须写",
minlength: "最少2",
maxlength: "最多5",
}
}
});
});
$.validator.setDefaults({
submitHandler: function (form) {
alert("提交事件!");
// form.submit();
}
});
553
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
