黑马程序员技术交流社区

标题: 【上海校区】 ajax/ jsonp/ jQuery-jsonp/ jsonp公开接口/ 正则/正... [打印本页]

作者: 不二晨 时间: 2019-1-18 09:20
标题: 【上海校区】 ajax/ jsonp/ jQuery-jsonp/ jsonp公开接口/ 正则/正...
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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
jsonp

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jsonp</title>
<style type="text/css">

</style>

<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
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.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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
正则

<!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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
正则表达式

<!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>
---------------------
【转载，仅作分享，侵删】
作者：YRyr.*
原文：https://blog.csdn.net/weixin_43152725/article/details/86483403

作者: 不二晨 时间: 2019-1-23 17:27
奈斯，感谢分享

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2