本文深入讲解了JSON作为数据交换格式的原理和使用，包括其轻量级特性和键值对组成。同时，详细阐述了Ajax在局部刷新和数据交互中的应用，演示了获取、添加和删除数据的实例。此外，还介绍了正则表达式的规则及其在数据验证中的作用。最后，简要提及URL重写技术在网站优化中的价值。
提示：以下是本篇文章正文内容，下面案例可供参考
目标
1、JSON对象【重点】
2、Ajax【难点】
3、正则表达式【重点】
4、Url重写【了解】
知识点讲解
一、JSON
1、why：
轻量级传递数据，便于人和机器阅读
2、what：
JavaScript object notation，轻量级数据交换格式，是JavaScript的一个子集
注：1、json完全独立于语言（json格式的数据可以在任何的语言c#、Java、Python等使用）
3、组成：键值对
4、how：
（一）定义json格式的数据（存储数据）
简单：值是基本类型字符串、数字、布尔
<script>
//var jsonobj= {key1:value1,key2:value2,key3:value3}
var jsonobj = { name: "猪八戒", age: 18, money: 9.9, married: false };//键值对 属性值
</script>
注：（1）键是字符串,如果键包含“-” ，必须用“”括起来
（2）值的类型：字符串“”、数字、布尔true|false、对象、数组、函数function、null
复杂：值是对象类型、数组类型、函数类型
（1）属性值是对象类型 ，用{}
//var jsonobj={ key1:value1,key2:object }
var jsonobj2 = { name: "猪八戒", age: 18, money: 9.9, married: false, wife: { name: "潘金莲", age: 18 } }
（2）属性值是数组，用[]
var jsonobj2 = { name: "猪八戒", age: 18, money: 9.9, married: false,
wife: { name: "潘金莲", age: 18 },
sons: [{ name: "猪大", age: 2 }, {name: "猪二",age:1}]
};
（3）属性值是函数，用function(){}
var jsonobj2 = { name: "猪八戒", age: 18, money: 9.9, married: false,
wife: { name: "潘金莲", age: 18 },
sons: [{ name: "猪大", age: 2 }, { name: "猪二", age: 1 }],
say: function () {
alert("大师兄，师傅被妖怪抓走了")
}
};
（二）取数据
语法：json对象.属性名 或者 json对象[“属性名”]
注：什么时候必须用"[]"取值，当属性名称有“-”连接符时
简单：
语法：json对象.键名 或json对象[“键名”]
//取猪八戒的名字和年龄
var n = jsonobj .name;
var a = jsonobj .age;
复杂：
值是对象： jsonobj.key1.key2.属性名 或者 jsonobj[“key1”][“key2”].属性名
// 取猪八戒媳妇的名字
var v2 = jsonobj2.wife.name;
值是数组： jsonobj.key[0]
//数组 取猪八戒第一个儿子的名字
var v3 = jsonobj3.sons[0].name
值是函数： jsonobj.key
//函数 聆听猪八戒唠叨
var s = jsonobj4.say;
s();
（三）c#后台输出json格式的字符串
using System.Web.Script.Serialization;//引入JavaScript序列号包
public void ProcessRequest(HttpContext context)//处理用户的请求
{
//设置输出的内容的类型
context.Response.ContentType = "text/plain";
//重点输出json格式的信息//
//这是c#后台程序
var stu = new { name = "王勤", age = 18, married = false };
//将c#对象转换为JavaScript里面的json格式的字符串
//创建一个JavaScript序列化对象
JavaScriptSerializer jss = new JavaScriptSerializer();
//转换为json格式的字符串"{ name: "王勤", age: 18, married: false }"
string jsonstr = jss.Serialize(stu);
//输出给浏览器
context.Response.Write(jsonstr);
}
二、 Ajax
1、what：
Asynchronous Javascript And XML 用于与服务器进行数据交互：获取或提交数据。
2、why：
局部刷新 （不需要刷新整个页面，就能从服务获取数据并更新到界面）
3、how：
原生ajax、第三方ajax框架
原生
var xmlHttpRequest = new XMLHttpRequest()
第三方框架：兼容型好、使用便捷，jQuery的ajax函数
jQuery通用语法：（常用）
$.ajax( {
url: "请求的网页地址",
type: "请求方式get|post，默认get，上传大的数据post",
dataType: "要求服务器返回的数据类型json|html|xml|script，常返回json数据",
data:{ username: "纪好靓",age: 18},//用于传递到服务器的数据
success:function(result,status){//请求成功事件。result由服务器返回的结果,并根据dataType参数进行处理后的数据；状态字符串
alert(result);
},
error:function (xhr,status,error) {//请求失败事件 三个参数：XMLHttpRequest 象、错误信息、可选）捕获的异常对象
alert(status);
}
} );
（一）取数据：异步从服务器获取json数据
$.ajax({
url: "请求的网页地址",
dataType: "json",
success:function(result,status){//请求成功事件。
$("#面板id").html(result);
},
error:function (xhr,status,error) {//请求失败事件
alert(status);
}
});
（二）取数据：异步从服务器获取HTML或XML
$.ajax({
url: "请求的网页地址",
dataType: "html",
success:function(result,status){//请求成功事件。
$("#面板id").html(result);
},
error:function (xhr,status,error) {//请求失败事件
alert(status);
}
});
（三）提交数据
//第一步：客户端异步请求服务器网页提交数据
$.ajax({
url: "请求的网页地址",
dataType: "json",
//data:{参数名:参数值},//需要提交的json数据
data:$("#表单id").serialize(),//需要提交的表单数据
success:function(result,status){//请求成功事件。
console.log(result);
},
error:function (xhr,status,error) {//请求失败事件
alert(status);
}
});
//第二步：服务端接收数据
String v=Request["表单名称"];
//或者
String v=context.Request["表单名称"];
例题：获取数据（新建HTML页）
前端
<!--前端-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!-- 新 Bootstrap4 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<!-- bootstrap.bundle.min.js 用于弹窗、提示、下拉菜单，包含了 popper.min.js -->
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
<!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<table class="table table-bordered">
<thead>
<tr>
<th>产品价格</th>
<th>价格</th>
<th>Email</th>
</tr>
</thead>
<tbody></tbody>
</table>
<script>
$.ajax({
url: "/ProductListJson",
type: "get",
dataType: "json",
success: function (ret, status) {//请求成功事件。result由服务器返回的结果,并根据dataType参数进行处理后的数据；状态字符串
for (var i in ret) {
//行
var row = ret[i]
//构建一个元素 行 节点
var $row = $(`<tr><td>${row.pname}</td><td>${row.price}</td><td>john@example.com</td></tr>`)
//将行添加到文档树
$(".table tbody").append($row);
}
}
});
</script>
</body>
</html>
后端
public class ProductListJson : IHttpHandler
{
public bool IsReusable => false;
public void ProcessRequest(HttpContext context)
{
//设置输出的内容的类型
context.Response.ContentType = "text/plain";
//查询
meixinEntities db=new meixinEntities();
List<m_product> obj = db.m_product.ToList();
//将c#对象转换为JavaScript里面的json格式的字符串
//创建一个JavaScript序列化对象
JavaScriptSerializer jss = new JavaScriptSerializer();
//转换为json格式的字符串
string jsonstr = jss.Serialize(obj);
//输出给浏览器
context.Response.Write(jsonstr);
}
}
创建处理程序==》》Web.config添加处理程序命令（ProductListJson ）
例题：添加
前端
<!--前端-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!-- 新 Bootstrap4 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<!-- bootstrap.bundle.min.js 用于弹窗、提示、下拉菜单，包含了 popper.min.js -->
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
<!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<form id="theForm">
<div class="form-group">
<label for="email">名称:</label>
<input type="text" class="form-control" name="name">
</div>
<div class="form-group">
<label for="pwd">价格:</label>
<input type="text" class="form-control" name="price">
</div>
<button type="submit" class="btn btn-primary" id="btn">提交</button>
</form>
<a href="default.html">列表</a>
<script>
$(function () {
//按钮单击，提交数据
$("#btn").on("click", function () {
$.ajax({
url: "/ProductAddJson",
type:"get",
dataType: "json",
//data:{参数名:参数值},//需要提交的json数据
data: $("#theForm").serialize(),//需要提交的表单数据 “”表单ID
success: function (result, status) {//请求成功事件。
alert(result.msg)
}
})
return false
})
})
</script>
</body>
</html>
后端
public class ProductAddJson: IHttpHandler
{
public bool IsReusable => false;
/// <summary>
/// 公开的接口：name 名称 price价格
/// </summary>
/// <param name="context"></param>
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
//接受客户端传递过来参数数据
string n = context.Request["name"];
string p = context.Request["price"];
//保存到数据库
meixinEntities db = new meixinEntities();
m_product obj = new m_product();//创建实体对象
obj.pname = n;
obj.price = Convert.ToDouble(p);
db.m_product.Add(obj);//添加到实体对象集合
db.SaveChanges();//同步到物理数据库
//返回给客户端结结果
var ret = new { status = true, msg = "添加成功" };
//转换为json格式的字符串
//转换为jsog格式的字符串数据
JavaScriptSerializer jss = new JavaScriptSerializer();
context.Response.Write(jss.Serialize(ret));//调用方法将ret转换为json格式的字符串
}
}
创建处理程序==》》Web.config添加处理程序命令（ProductAddJson）
例题：删除
前端
<!--前端-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!-- 新 Bootstrap4 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<!-- bootstrap.bundle.min.js 用于弹窗、提示、下拉菜单，包含了 popper.min.js -->
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
<!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<table class="table table-bordered">
<thead>
<tr>
<th>产品价格</th>
<th>价格</th>
<th>口味</th>
<th>操作</th>
</tr>
</thead>
<tbody></tbody>
</table>
<button id="btn">异步加载</button>
<a href="Add.html">添加</a>
<script>
//删除函数
function del(id) {
$.ajax({
url: "/ProductDeleteJson?id=" + id,
type: "get",
dataType: "json",
success: function (ret, status) {//请求成功事件。result由服务器返回的结果,并根据dataType参数进行处理后的数据；状态字符串
if (ret.status) {
alert(ret.msg)
//刷新==》清空table
$(".table tbody").html("")
$.ajax({
url: "/ProductListJson",
type: "get",
dataType: "json",
success: function (ret, status) {//请求成功事件。result由服务器返回的结果,并根据dataType参数进行处理后的数据；状态字符串
for (var i in ret) {
var row = ret[i]
//构建一个元素 行 节点
var $row = $(`<tr><td>${row.pname}</td><td>${row.price}</td><td>${row.category}</td><td onClick="del(${row.id})">删除</td></tr>`)
//将行添加到文档树
$(".table tbody").append($row);
}
}
})
}
}
})
}
$(function () {
//按钮单击，显示数据
$("#btn").on("click", function () {
$.ajax({
url: "/ProductListJson",
type: "get",
dataType: "json",
success: function (ret, status) {//请求成功事件。result由服务器返回的结果,并根据dataType参数进行处理后的数据；状态字符串
for (var i in ret) {
var row = ret[i]
//构建一个元素 行 节点
var $row = $(`<tr><td>${row.pname}</td><td>${row.price}</td><td>${row.category}</td><td onClick="del(${row.id})">删除</td></tr>`)
//将行添加到文档树
$(".table tbody").append($row);
}
}
})
})
})
</script>
</body>
</html>
后端
public class ProductDeleteJson : IHttpHandler
{
public bool IsReusable => false;
/// <summary>
/// 公开的接口：name 名称 price价格
/// </summary>
/// <param name="context"></param>
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
//接受客户端传递过来参数数据
string id = context.Request["id"];
//创建数据库对象
meixinEntities db = new meixinEntities();
m_product o = db.m_product.Find(Convert.ToInt32(id));
db.m_product.Remove(o);//将0从实体对象集合移除
db.SaveChanges();//同步到物理数据库
//返回给客户端结结果
var ret = new { status = true, msg = "删除成功" };
//转换为json格式的字符串
//转换为jsog格式的字符串数据
JavaScriptSerializer jss = new JavaScriptSerializer();
context.Response.Write(jss.Serialize(ret));//调用方法将ret转换为json格式的字符串
}
}
创建处理程序==》》Web.config添加处理程序命令（ProductDeleteJson）
三、正则表达式 规则
1、what：
regular expression ，描述了一种字符串匹配的模式（模板、模样 ）（pattern） =》模糊查询
2、why：
可以用来检查一个字符串是否含有某种子串、将匹配的子串替换或者从某个串中取出符合某个条件的子串等 （匹配包含、替换子字符串）
3、how：
由普通字符（abc）和特殊字符（元字符）组成字符模板
//a、引入命名空间
using System.Text.RegularExpressions
string zbj = "猪八戒提着200斤米高老庄提亲，被赶出来了";
//b、创建正则表达式对象
//Regex reg = new Regex(@"正则表达式");
Regex reg = new Regex(@"(\d{3})斤米");
//c、调用Regex对象的匹配方法 reg.Match(path);
Match match = reg.Match(path);
//d、判断是是否匹配成功
if(match.Success){ Response.Write("猪八戒提亲成功。"); }
//e、获取匹配项的子字符串match.Groups[1].Value
if(match.Success){ Response.Write("猪八戒提亲成功。彩礼"+match.Groups[0].Value); }
四、URL重写
what：
将网页真实的URL隐藏起来，使用户通过相应的虚拟URL访问网页资源以弥补真实URL的不足。常用于页面静态化技术，静态化技术：
a、伪静态（url重写） b、真静态 c、折中法
why：
a、满足搜索引擎需要，实现 搜索引擎中的排名优化 （SEO） =》将网页收录在搜索引擎数据库
b、隐藏网页实现技术，增强网站安全
c、提高网站的可用性和专业性 便于记网址
how：
1、urlMappings：url映射，不灵活，配置的地址是固定的，不支持通配符和正则表达式
2、正则表达式（通过过滤器）
using System.Text.RegularExpressions;//引入
private void Context_BeginRequest(object sender, EventArgs e)
{
HttpApplication contenx = sender as HttpApplication;
//1获取网页访问路径
string path = contenx.Request.Path;// /fff_4774_4664.html
//2 创建一个正则表达式对象 匹配 访问路径path 如果是“字母_数字_数字.html”的格式
Regex reg = new Regex(@"\w+_(\d+)_(\d+)\.html");
//3 调用reg的匹配方法 拿着 模板去与字符串 path
Match match = reg.Match(path);
if (match.Success) {
//重定向 跳转到真实的页面
//contenx.Response.Redirect("/money.aspx");
//转发 转发后的地址不在浏览器显示出来
contenx.Server.Transfer("/money.aspx?id="+match.Groups[1]+"&price="+ match.Groups[2]);
}
}
3、使用URLRewriter 第三方插件
a、引入第三方类库
b、在web.config文件中配置访问规则
<!--a、在<configuration>节点下，添加如下节点-->
<configSections>
<section name="RewriterConfig" type="URLRewriter.Config.RewriterConfigSerializerSectionHandler,URLRewriter"/>
</configSections>
<!--b、在<configuration>节点下，添加如下节点-->
<system.webServer>
<handlers>
<add verb="*" path="*.html" type="URLRewriter.RewriterFactoryHandler, URLRewriter" name="urlrewriter"/>
</handlers>
</system.webServer>
<!--c、在<configuration>节点下，添加URL重写规则 -->
<RewriterConfig>
<Rules>
<RewriterRule>
<LookFor>~/goods_(\d)+\.html</LookFor>
<SendTo>~/goodsList.aspx?id=$1</SendTo>
</RewriterRule>
</Rules>
</RewriterConfig>
扫一扫
618
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
