json、ajax与正则表达式

作者: 叫我老村长 | 来源:发表于2018-07-29 23:51 被阅读10次

xml

老试格式、被取代了。

<person>
    <name>tom</name>
    <age>12</age>
</person>

在因特网上，JSON正逐渐代替XML成为首选的数据交换格式，这是因为JSON容易阅读并且它的结构匹配常见的编程概念，诸如对象和数组。JSON也比XML更高效（即更快的解析和网络传输），这是因为JSON更紧凑——没有开始和结束标签。

json

json指的是类似于javascript对象的一种数据格式

应用：JSON相关的API和工具十分丰富，这让你很容易的将JSON运用在你喜爱的编程语言，IDE 和运行环境里。此外，流行的NoSQL数据库，诸如MongoDB和ConchBase，都是基于JSON的。

JSON是一种简单的数据格式，它有三种基本的数据结构:

键/值对。
对象。{}
数组。[]
可相互嵌套符合需求

格式

{
    "name":"Tom",
    "age":18
}

注意：键一定要引起来

JSON 语法

JSON 语法规则

JSON 语法是 JavaScript 对象表示法语法的子集。

数据在名称/值对中
数据由逗号分隔
花括号保存对象
方括号保存数组

JSON 名称/值对

JSON 数据的书写格式是：名称/值对。
名称/值对包括字段名称（在双引号中），后面写一个冒号，然后是值：
“firstName” : “John”
这很容易理解，等价于这条 JavaScript 语句：
firstName = “John”

JSON 值

JSON 值可以是：

数字（整数或浮点数）
字符串（在双引号中）
逻辑值（true 或 false）
数组（在方括号中）
对象（在花括号中）
null

JSON 对象

JSON 对象在花括号中书写：
对象可以包含多个名称/值对：

{ "firstName":"John" , "lastName":"Doe" }

这一点也容易理解，与这条 JavaScript 语句等价：
firstName = “John”
lastName = “Doe”

JSON 数组

JSON 数组在方括号中书写：
数组可包含多个对象：

"employees": [
{ "firstName":"John" , "lastName":"Doe" },
{ "firstName":"Anna" , "lastName":"Smith" },
{ "firstName":"Peter" , "lastName":"Jones" }
]
}

在上面的例子中，对象 “employees” 是包含三个对象的数组。每个对象代表一条关于某人（有姓和名）的记录。
JSON 使用 JavaScript 语法
因为 JSON 使用 JavaScript 语法，所以无需额外的软件就能处理 JavaScript 中的 JSON。
通过 JavaScript，您可以创建一个对象数组，并像这样进行赋值：

例子

var employees = [
{ "firstName":"Bill" , "lastName":"Gates" },
{ "firstName":"George" , "lastName":"Bush" },
{ "firstName":"Thomas" , "lastName": "Carter" }
];

可以像这样访问 JavaScript 对象数组中的第一项：

employees[0].lastName;

返回的内容是：Gates
可以像这样修改数据：

employees[0].lastName = "Jobs";

JSON 文件

JSON 文件的文件类型是 “.json”
JSON 文本的 MIME 类型是 “application/json”

JSON 使用

把 JSON 文本转换为 JavaScript 对象
JSON 最常见的用法之一，是从 web 服务器上读取 JSON 数据（作为文件或作为 HttpRequest），将 JSON 数据转换为 JavaScript 对象，然后在网页中使用该数据。
为了更简单地为您讲解，我们使用字符串作为输入进行演示（而不是文件）。

JSON 实例 - 来自字符串的对象
创建包含 JSON 语法的 JavaScript 字符串：

var txt = '{ "employees" : [' +
'{ "firstName":"Bill" , "lastName":"Gates" },' +
'{ "firstName":"George" , "lastName":"Bush" },' +
'{ "firstName":"Thomas" , "lastName":"Carter" } ]}';

由于 JSON 语法是 JavaScript 语法的子集，JavaScript 函数 eval() 可用于将 JSON 文本转换为 JavaScript 对象。
eval() 函数使用的是 JavaScript 编译器，可解析 JSON 文本，然后生成 JavaScript 对象。必须把文本包围在括号中，这样才能避免语法错误：

var obj = eval ("(" + txt + ")");

在网页中使用 JavaScript 对象：
例子

<p>
First Name: <span id="fname"></span><br />
Last Name: <span id="lname"></span><br />
</p>

<script type="text/javascript">
document.getElementById("fname").innerHTML = obj.employees[1].firstName
document.getElementById("lname").innerHTML = obj.employees[1].lastName
</script>

{
    "name":"Tom",
    "age":18
    ”info“：[ 
    “male”：“gcs”
        {
            “work”:["html","css"]
        }
    ]
}

注释
JSON不允许有注释。注释原本是JSON的一部分，但是开发者将解析指令放入注释中，这极大地滥用了它们。当道格拉斯•克罗克福德看见开发者如此实践时，他从JSON里移除了注释，以此保持计算机平台的互操作性。

ajax

发送http请求
ajax技术的目的是让javascript发送http请求，与后台通信，获取数据和信息。

1.获取

2.当前界面
只更新获取数据，别的不动。
和后台通信

3/默认不能跨遇请求。但是也能设置。
百度不能请求腾讯

$.ajax使用方法

常用参数：
1、url 请求地址
2、type 请求方式，默认是'GET'，常用的还有'POST'
3、dataType 设置返回的数据格式，常用的是'json'格式，也可以设置为'html'
4、data 设置发送给服务器的数据
5、success 设置请求成功后的回调函数
6、error 设置请求失败后的回调函数
7、async 设置是否异步，默认值是'true'，表示异步

部分参数含义：

404 服务器资源没找到
200请求成功
500 服务器挂了

适配
第一个

jsonp

ajax只能请求同一个域下的数据或资源，有时候需要跨域请求数据，就需要用到jsonp技术，jsonp可以跨域请求数据，它的原理主要是利用了script标签可以跨域链接资源的特性。
跨域请求
src标签

jsonpCallback 回调
跟调用地方一致

data:{}
传参数

请求对了200

数据密码写错了。
msg就会起到作用。msg:200.

跨域不需要服务器环境
empty清空列表

正则表达式

常用字符

/^ $\开头结尾
4 14 5 15

对象
RegExp
i忽略大小写
g全文搜索

/a/ig;

正则匹配字符串
数字字符串 true
/d 就看有没有数字
test

123ab1 也是false
/^ $\开头结尾

'+' 出现一次或多次（至少出现一次）
/^ \w+ $/
3、规则中的字符
1）普通字符匹配：
如：/a/ 匹配字符 ‘a’，/a,b/ 匹配字符 ‘a,b’

2）转义字符匹配：
\d 匹配一个数字，即0-9
\D 匹配一个非数字，即除了0-9
\w 匹配一个单词字符（字母、数字、下划线）
\W 匹配任何非单词字符。等价于[^A-Za-z0-9_]
\s 匹配一个空白符
\S 匹配一个非空白符
\b 匹配单词边界
\B 匹配非单词边界
. 匹配一个任意字符，除了换行符‘\n’和回车符‘\r’
\1 重复子项

4、量词：对左边的匹配字符定义个数
? 出现零次或一次（最多出现一次）

出现一次或多次（至少出现一次）

出现零次或多次（任意次）
{n} 出现n次
{n,m} 出现n到m次
{n,} 至少出现n次

5、任意一个或者范围
[abc123] : 匹配‘abc123’中的任意一个字符
[a-z0-9] : 匹配a到z或者0到9中的任意一个字符

6、限制开头结尾
^ 以紧挨的元素开头
$ 以紧挨的元素结尾

7、修饰参数：
g： global，全文搜索，默认搜索到第一个结果接停止
i： ingore case，忽略大小写，默认大小写敏感
m： multiple lines，多行搜索（更改^ 和$的含义，使它们分别在任意一行对待行首和行尾匹配，而不仅仅在整个字符串的开头和结尾匹配）

8、常用函数

1、test
用法：正则.test(字符串) 匹配成功，就返回真，否则就返回假
2、search
用法：字符串.search(正则) 匹配成功，返回位置，否则返回-1
3、match
用法：字符串.match(正则)；匹配成功，就返回匹配成功的数组，否则就返回null

4、replace
用法：字符串.replace(正则，新的字符串) 匹配成功的字符去替换新的字符

正则默认规则
匹配成功就结束，不会继续匹配，区分大小写

正则表达式demo

javascript正则表达式检验 
/********************************************************************************* 
* EO_JSLib.js 
* javascript正则表达式检验 
**********************************************************************************/

//校验是否全由数字组成 
function isDigit(s) 
{ 
var patrn=/^[0-9]{1,20}$/; 
if (!patrn.exec(s)) return false 
return true 
}

//校验登录名：只能输入5-20个以字母开头、可带数字、“_”、“.”的字串 
function isRegisterUserName(s) 
{ 
var patrn=/^[a-zA-Z]{1}([a-zA-Z0-9]|[._]){4,19}$/; 
if (!patrn.exec(s)) return false 
return true 
}

//校验用户姓名：只能输入1-30个以字母开头的字串 
function isTrueName(s) 
{ 
var patrn=/^[a-zA-Z]{1,30}$/; 
if (!patrn.exec(s)) return false 
return true 
}

//校验密码：只能输入6-20个字母、数字、下划线 
function isPasswd(s) 
{ 
var patrn=/^(/w){6,20}$/; 
if (!patrn.exec(s)) return false 
return true 
}

//校验普通电话、传真号码：可以“+”开头，除数字外，可含有“-” 
function isTel(s) 
{ 
//var patrn=/^[+]{0,1}(/d){1,3}[ ]?([-]?(/d){1,12})+$/; 
var patrn=/^[+]{0,1}(/d){1,3}[ ]?([-]?((/d)|[ ]){1,12})+$/; 
if (!patrn.exec(s)) return false 
return true 
}

//校验手机号码：必须以数字开头，除数字外，可含有“-” 
function isMobil(s) 
{ 
var patrn=/^[+]{0,1}(/d){1,3}[ ]?([-]?((/d)|[ ]){1,12})+$/; 
if (!patrn.exec(s)) return false 
return true 
}

//校验邮政编码 
function isPostalCode(s) 
{ 
//var patrn=/^[a-zA-Z0-9]{3,12}$/; 
var patrn=/^[a-zA-Z0-9 ]{3,12}$/; 
if (!patrn.exec(s)) return false 
return true 
}

//校验搜索关键字 
function isSearch(s) 
{ 
var patrn=/^[^`~!@#$%^&*()+=|///][/]/{/}:;'/,.<>/?]{1}[^`~!@$%^&()+=|///][/]/{/}:;'/,.<>?]{0,19}$/; 
if (!patrn.exec(s)) return false 
return true 
}

function isIP(s) //by zergling 
{ 
var patrn=/^[0-9.]{1,20}$/; 
if (!patrn.exec(s)) return false 
return true 
}

ajax demo

<script type="text/javascript">
            $.ajax({
                url: 'js/data.json',
                // url: 'http://localhost:8888/buickmall/js/data.json',
                type: 'get',
                dataType: 'json'
            })
            .done(function(data) {
                if(data.code == 200){
                    $('#logout1 em').html(data.data.name);
                    $('#login1,.cc1').addClass('hidden');
                    $('#logout1,.cc').addClass('show');
                    // $('#login').addClass('show');
                    // $('#logout').addClass('hidden');
                }else if(data.code == 404){
                    alert('对不起，页面不小心走丢了！')
                }else if(data.code == 500){
                    alert('对不起，服务器挂了！')
                }
            })
            .fail(function(jqXHR, textStatus, errorThrown) {
                alert('连接超时！请重试');
                console.log("error");
                /*打印jqXHR对象的信息*/
                console.log(jqXHR.responseText); //必要的时候编码一下:encodeURIComponent(jqXHR.responseText);
                console.log(jqXHR.status);
                console.log(jqXHR.readyState);
                console.log(jqXHR.statusText);
                /*打印其他两个参数的信息*/
                console.log(textStatus);
                console.log(errorThrown);
            });
        </script>
</head>
<body>
    <!-- 侧栏 -->
    <ul id="hp_nav_float" class="nav_float"  >
        <!-- <li id="nav_live800" class="zx" ></li> -->
        <li>
            <a class="ps" href="#">配饰</a>
        </li>
        <li>
            <a class="ss" href="#">首饰</a>
        </li>
        <li>
            <a class="jp" href="#">家品</a>
        </li>
        <li>
            <a class="wjbg" href="#">文具办公</a>
        </li>
        <li>
            <a class="dzzb" href="#">电子周边</a>
        </li>
        <li>
            <a class="tp" href="#">回到顶部</a>
        </li>
    </ul>
    <!-- 头部div -->
    <div id="header_module">
        <!-- top -->
        <div class="header_top">
            <div class="header_top_left">
                <h3 class="attention_h3">
                    <!-- 微博加关注 -->
                 <iframe name="ifr_weibo" id="ifr_weibo" width="136" height="26" frameborder="0" src="http://widget.weibo.com/relationship/followbutton.php?width=126&height=26&uid=1649595527&style=2&btn=light&dpc=1"></iframe>           
            </div>
            <div class="header_top_right">
<!-- loin -->
<!-- class="memberwwelcom" -->
                    <div id="logout1"  class="user_message cc"  >       
                        <a class="b" rel='nofollow' href="web2dl.html" target="_blank" class="reg">>
                        &nbsp;&nbsp;
                        退出
                        </a>
                        <!-- <span class="c"  style="display:inline;">或</span> -->
                        <a class="d" rel='nofollow' href="file:///D:/sumblm/projectcc/web2dl.html" >
                        欢迎你 <em></em>
                        </a>
                        <span class="a">欢迎来到杂良集！ &nbsp;</span>
                    </div>  
                    <div id="login1" class="user_message cc1" >     
                        <a class="b" rel='nofollow' href="file:///D:/sumblm/projectcc/web2zuce.html" target="_blank" class="reg">
                        注册
                        </a>
                        <span class="c"  style="display:inline;">或</span>
                        <a class="d" rel='nofollow' href="file:///D:/sumblm/projectcc/web2dl.html" >
                        登录
                        </a>
                        <span class="a">欢迎来到杂良集！ &nbsp; 请 &nbsp;</span>
                    </div>

json、ajax与正则表达式

xml

json

json指的是类似于javascript对象的一种数据格式

注意：键一定要引起来

JSON 语法

JSON 语法规则

JSON 名称/值对

JSON 值

JSON 对象

JSON 数组

JSON 文件

JSON 使用

ajax

$.ajax使用方法

部分参数含义：

jsonp

正则表达式

常用字符

正则表达式demo

ajax demo

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

Python

程序员

GIT