ajax/ jsonp/ jQuery-jsonp/ jsonp公开接口/ 正则/正则表达式

其他 2019-02-17 23:11:12 阅读次数: 0

ajax

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>ajax</title>
	<style type="text/css">
		
	</style>
	<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
	<script type="text/javascript">
		$.ajax({
			url: 'data.json',//请求的服务器路径，实际开发中写文档接口的路径
			type: 'get',//分get/post请求，涉及隐私或安全性要求较高的用post、安全要求不高及数据量较小的用get
			dataType: 'json',//要读取什么格式的数据，还可以是xml script html upload等
			// data:{page:1}//请求时要携带的参数
		})
		.done(function(data){//成功的时候会执行的函数，参数data是从后台接收到的数据，这里是json格式的字符串
			alert(data.name);
			console.log(data);
		})
		.fail(function(){//失败的时候会执行的函数
			console.log("error");
		})
		/*
		.fail(function(XMLHttpRequest, textStatus, errorThrown) {//失败（带参数）
			console.log("error");
			// 状态码
            console.log(XMLHttpRequest.status);
            // 状态
            console.log(XMLHttpRequest.readyState);
            // 错误信息   
            console.log(textStatus);
		})
		.always(function(){//不论成功与否都会执行
			console.log("always");
		})
		*/;
	</script>
</head>
<body>
	
</body>
</html>

jsonp

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>jsonp</title>
	<style type="text/css">
		
	</style>
	<!-- <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> -->
	<script type="text/javascript">
		// alert($);//function(a,b){return new n.fn.init(a,b)}

		/*
		jsonp可以跨域请求数据的原理：
			主要是利用了script标签可以跨域链接资源的特性
		*/
		function aa(dat){
			alert(dat.name);
		}
	</script>
	<script type="text/javascript" src="js/data.js"></script>
</head>
<body>
	
</body>
</html>

jQuery-jsonp

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>jQuery-jsonp</title>
	<style type="text/css">
		
	</style>
	<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
	<script type="text/javascript">
		$.ajax({
			url: 'http://localhost:8080/1803/js/data.js',//跨域请求的地址，也可用相对路径js/data.js
			type: 'get',
			dataType: 'jsonp',//使用jsonp跨域请求
			jsonpCallback:'aa'
		})
		.done(function(data) {
			alert(data.name);
		})
		.fail(function() {
			console.log("error");
		});
	</script>
</head>
<body>
	
</body>
</html>

jsonp公开接口

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>jsonp公开接口</title>
	<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
	<script type="text/javascript">
		//360搜索的公开接口
		//https://sug.so.360.cn/suggest?callback=suggest_so&encodein=utf-8&encodeout=utf-8&format=json&fields=word&word=s

		$(function(){
			$('#txt01').keyup(function() {
				var val = $(this).val();
				$.ajax({
					url: 'https://sug.so.360.cn/suggest?encodein=utf-8&encodeout=utf-8&format=json&fields=word',//请求360搜索的公开接口
					type: 'get',
					dataType: 'jsonp',//跨域请求
					data: {word: val},//携带参数
					jsonpCallback:'suggest_so'//指定360提供的jsonp的回调函数
				})
				.done(function(data) {
					console.log(data);
					// alert(data.result.length);//10条数据

					$('.list').empty();//先清空列表

					//模拟搜索联想，循环插入新列表
					for(var i=0; i<data.result.length; i++){
						var $li = $('<li>'+data.result[i].word+'</li>');
						$li.appendTo('.list');
					}
				})
				/*.fail(function(XMLHttpRequest, textStatus, errorThrown) {//失败
					console.log("error");
					// 状态码
		            console.log(XMLHttpRequest.status);
		            // 状态
		            console.log(XMLHttpRequest.readyState);
		            // 错误信息   
		            console.log(textStatus);
				});*/
				.fail(function(jqXHR, textStatus, errorThrown) {//失败
					console.log("error");
					/*弹出jqXHR对象的信息*/
		            console.log(jqXHR.responseText);
		            console.log(jqXHR.status);
		            console.log(jqXHR.readyState);
		            console.log(jqXHR.statusText);
		            /*弹出其他两个参数的信息*/
		            console.log(textStatus);
		            console.log(errorThrown);

				});
			});
		})

		
	</script>
</head>
<body>
	<input type="text" id="txt01">
	<ul class="list"></ul>
</body>
</html>

正则

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>正则</title>
	<style type="text/css">
		
	</style>
	<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
	<script type="text/javascript">
		//校验QQ
		/*
		//JS的方式比较麻烦
		function checkQQ(qq){
			var flag = true;//默认符合要求
			if(qq.length>=5 && qq.length<=15){
				if(qq.indexOf("0")){
					if(isNaN(qq)){
						flag = false;//不是数字
					}
				}else{
					flag = false;//以0开头，不符合QQ标准
				}
			}else{
				flag = false;//长度不符合
			}
			return flag;
		}

		console.log(checkQQ("012345"));
		console.log(checkQQ("a12b345"));
		console.log(checkQQ("123456"));//true
		console.log(checkQQ("1234567890987654321"));
		*/

		//正则匹配简单高效
		var regex = /^[1-9]\d{4,14}$/;
		
		console.log(regex.test("012345"));
		console.log(regex.test("a12b345"));
		console.log(regex.test("123456"));//true
		console.log(regex.test("1234567890987654321"));
	</script>
</head>
<body>
	
</body>
</html>

正则表达式

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>正则表达式</title>
	<style type="text/css">
		
	</style>
	<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
	<script type="text/javascript">
		//匹配字母a，i表示忽略大小写，g表示全文检索
		var re = new RegExp('a', 'ig');
		var re2 = /a/ig;

		var str = 'abc';
		//调用test方法进行匹配，匹配成功返回true，否则返回false
		// alert(re2.test(str));//true

		//匹配字母ac，忽略大小写，全文检索
		re2 = /ac/ig;
		// alert(re2.test(str));//false

		//匹配数字
		var re3 = /\d/;
		var str3 = '123';
		// alert(re3.test(str3));//true

		str3 = '123ab1';
		// alert(re3.test(str3));//true

		//匹配数字，全文检索
		re3 = /\d/g;
		// alert(re3.test(str3));//true

		//匹配数字开头并结尾
		re3 = /^\d$/;
		// alert(re3.test(str3));//false

		//匹配从开头到结尾有一个或多个数字
		re3 = /^\d+$/;
		// alert(re3.test(str3));//false

		//匹配数字、字母、下划线
		var re4 = /\w/;
		var str4 = '@asd';
		// alert(re4.test(str4));//true

		//匹配数字、字母、下划线开头
		re4 = /^\w/;
		// alert(re4.test(str4));//false

		str4 = 'as&d';
		// alert(re4.test(str4));//true

		//匹配从开头到结尾有一个或多个数字、字母、下划线
		re4 = /^\w+$/;
		// alert(re4.test(str4));//false

		var str5 = '123adfas894fasdfas15122dfad85';
		var re5 = /\d+/g;//全文检索一个或多个数字
		var arr = str5.match(re5);
		// alert(arr);//123,894,15122,85

		var re6 = /d/;//匹配字母d
		// alert(str5.search(re6));//4//search相当于indexOf()函数

		//replace函数用于替换
		var str6 = str5.replace(re5, '*');
		// alert(str6);//*adfas*fasdfas*dfad*

		//正则表达式的替换功能
		var s = "Once111a22wolf,3always4a5wolf!";
		var regex = /\d+/g;
		var s2 = s.replace(regex, " ");
		// console.log(s2);

		/*叠词*/
		//快快乐乐、高高兴兴
		regex = /(.)\1(.)\2/;//()表示分组，.表示任意字符，匹配第一组任意字符再出现一次、第二组任意字符再出现一次
		// console.log(regex.test("快快乐乐"));//true
		// console.log(regex.test("快乐乐乐"));
		// console.log(regex.test("高高兴兴"));//true
		// console.log(regex.test("快乐快乐"));

		//快乐快乐、高兴高兴
		regex = /(..)\1/;//匹配两个任意字符再出现一次
		// console.log(regex.test("快乐快乐"));//true
		// console.log(regex.test("高兴高兴"));//true
		// console.log(regex.test("快快快快"));//true
		// console.log(regex.test("快快乐乐"));

		//叠词切割
		// s = 'sdqqfgkkkhjppppkl';
		// regex = /(.)\1+/;
		// var arr = s.split(regex);
		// console.log(arr);//由于()中的是子表达式，会导致保留一个叠词字母，不符合要求

		s = 'sdqqfgkkkhjppppkl';
		regex = /(.)\1+/g;//匹配叠词，即多个重复的字母
		var s2 = s.replace(regex, " ");//将叠词替换为空格
		var arr = s2.split(' ');//再按照空格进行切割
		// console.log(arr);//返回["sd","fg","hj","kl"]，符合要求

		//字符串替换
		var s = "我我....我...我.要...要要...要学....学学..学.编..编编.编.程.程.程..程";
		var s2 = s.replace(/\.+/g, "");//删除所有的点
		// console.log(s2);
		var s3 = s2.replace(/(.)\1+/g, "$1");//全文检索叠词，替换为单个字符，例如多个“我”替换成一个“我”
		// console.log(s3);

		//提取手机号
		//regex = /^1[3578]\d{9}$/;手机号的正则，只能匹配17688888888
		var s = '我的手机号码是17688888888，曾经用过13187654321，还用过13512345678';
		var regex = /1[3578]\d{9}/g;//第一位是1，第二位是3578中的一个，后面9位是任意数字，并全文检索
		var arr = s.match(regex);//match方法返回匹配成功的数组
		console.log(arr);//["17688888888","13187654321","13512345678"]
	</script>
</head>
<body>
	
</body>
</html>

猜你喜欢

转载自blog.csdn.net/weixin_43152725/article/details/86483403
今日推荐
开源日报 | Chrome内置Gemini的意义不在于Gemini；中国AI追随之路的五大误区；ECharts创始人“下海”养鱼；谷歌I/O开发者大会什么都有，只是没有惊喜
微软回应中国区AI团队“打包赴美”传闻
基于大语言模型的开源知识库问答系统 MaxKB GitHub Star 数量突破 5,000 个！
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
《2024 年一季度互联网投融资运行情况》研究报告
报告：Django 仍然是 74% 开发者的首选
周排行
laravle中orm简单的增删改查
文本分类 特征选取之CHI开方检验
Spark核心编程-WordCount
大数据开发实战系列之电信客服(1)
读书笔记 - 把时间当作朋友 by 李笑来
python 笔记--if else
SpringBoot/Mybatis/Druid, 多数据源MultiDataSource配置思路
排序三个整数
redis集群搭建【2】-Windows中Redis集群搭建
STM32F030驱动TM1650点亮4联数码管
每日归档
更多
2024-05-16(6)
2024-05-15(24)
2024-05-14(0)
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022