`
yingfang05
  • 浏览: 124306 次
  • 性别: Icon_minigender_1
  • 来自: 重庆
社区版块
存档分类
最新评论

借助 Ajax 自动保存 JSF 表单之一

    博客分类:
  • jsf
阅读更多
在客户端获取表单数据

本节将给出一个 JSF 表单,其数据通过 JavaScript 和 DOM 在 Web 浏览器中获得。 您可以在自已的 Web 表单应用程序中重用这里介绍的 JavaScript 代码。本节还将解释如何正确地编码表单数据以将它提交给服务器。

构建 JSF 表单

让我们先来看一个典型的 JSF 例子。SupportForm.jsp 这个页面包括一些基本 HTML 的元素,比如输入框、列表、单选按钮、复选框和提交按钮。所有输入组件都将其值绑定到称为 SupportBean 的 JavaBean 属性。这个页面的头部包括一个 <script> 标记,用来导入 AutoSaveScript.js 文件。此 JavaScript 文件包括一个函数,名为 setAutoSaving(),它在 <body> 标记的 onload 属性内调用,以便在 Web 浏览器加载页面后激活表单的自动保存功能。接下来显示了 SupportForm.jsp 页的部分源代码。

包含示例 JSF 表单的 SupportForm.jsp 页
               
<%@ taglib prefix="f" uri="http://java.sun.com/jsf/core" %>
<%@ taglib prefix="h" uri="http://java.sun.com/jsf/html" %>

<html>
<head>
<title>Support Form</title>
    <script src="AutoSaveScript.js">
    </script>
</head>
<body onload="setAutoSaving(10000)">

<f:view>

    <h1>Support Form</h1>

    <h:form id="supportForm">

        <p><h:outputText value="Name: "/>
        <h:message for="name"/><br>
        <h:inputText id="name" value="#{supportBean.name}"
                size="40" required="true">
        </h:inputText>
        ...
        <p><h:outputText value="Platform: "/>
        <h:message for="platform"/><br>
        <h:selectOneRadio id="platform" value="#{supportBean.platform}"
                layout="lineDirection" required="true">
            <f:selectItem itemValue="Windows" itemLabel="Windows"/>
            <f:selectItem itemValue="Linux" itemLabel="Linux"/>
            <f:selectItem itemValue="Mac" itemLabel="Mac"/>
        </h:selectOneRadio>
        ...
        <p><h:outputText value="Problem: "/>
        <h:message for="problem"/><br>
        <h:inputTextarea id="problem" value="#{supportBean.problem}"
                rows="10" cols="40" required="true"/>

        <p><h:commandButton id="submit" value="Submit"
            action="#{supportBean.submit}"/>

    </h:form>

</f:view>

</body>
</html>

当用户为了打开 JSF 页面而单击一个 JSF 链接或输入一个 URL 时,Web 浏览器会构建 HTTP 请求并把此请求发送至 Web 服务器,服务器识别包含页面的应用程序并会调用 FacesServlet(在 web.xml 内配置)来处理此请求。在进行了某些上下文初始化后,就会执行此页面,而且,JSF 框架还会创建组件树以镜像该 Web 页面所用的 JSF 标记。这些组件的呈现程序生成含有表单元素的 HTML 代码。

SupportForm.jsp 页面生成的 HTML 代码
               
<html>
<head>
<title>Support Form</title>
    <script src="AutoSaveScript.js">
    </script>
</head>
<body onload="setAutoSaving(10000)">

    <h1>Support Form</h1>

    <form id="supportForm" method="post"
        action="/autosave/faces/SupportForm.jsp"
        enctype="application/x-www-form-urlencoded">

        <p>Name: <br>
        <input id="supportForm:name" type="text"
            name="supportForm:name" size="40" />
        ...
        <p>Platform: <br>
        <table id="supportForm:platform">
        <tr>
            <td><label><input type="radio" name="supportForm:platform"
                value="Windows"> Windows</input></label></td>
            <td><label><input type="radio" name="supportForm:platform"
                value="Linux"> Linux</input></label></td>
            <td><label><input type="radio" name="supportForm:platform"
                value="Mac"> Mac</input></label></td>
        </tr>
        </table>
        ...
        <p>Problem: <br>
        <textarea id="supportForm:problem" name="supportForm:problem"
            cols="40" rows="10">
        </textarea>

        <p><input id="supportForm:submit" type="submit"
            name="supportForm:submit" value="Submit" />

        <input type="hidden" name="com.sun.faces.VIEW"
            value="H4sIAA..." />
        <input type="hidden" name="supportForm" value="supportForm" />

    </form>

</body>
</html>

在这个 HTML 表单的结尾,有一些隐藏元素。如果 javax.faces.STATE_SAVING_METHOD 参数在web.xml 文件中被设为 client,那么 JSF 实现会内部使用这些隐藏元素以识别所提交的表单和存储组件树在请求间的状态。从浏览器的角度看,一个 JSF 表单与其他 HTML 表单无异,可以使用 JavaScript 和DOM 在 Web 浏览器中访问表单元素。

获取及编码表单数据

AutoSaveScript.js 文件包含一个称为 getFormData() 的 JavaScript 函数,它获取一个 form 对象并对其元素进行迭代以构建包含名称-值对的字符串。这个字符串遵循标准的 application/x-www-form-urlencoded 格式,用 & 分隔参数,并在每个参数的名称和值之间使用 =。内部函数 addParam() 可以对单一参数进行编码,所使用的是 JavaScript API 提供的 escape() 函数。escape() 函数用 % 后跟被编码字符的两位 16 进制码代替了几乎所有非字母数字的 ASCII 字符。 我之所以说 “几乎所有非字母数字的 ASCII 字符”,是因为除此之外,还有字母数字字符以及无编码的其他一些字符(例如 +)。

例如,如果将字符串 a + b 传递给 escape(),结果将是 a%20+%20b(20 是空格符的 16 进制码)。这是一个符合 RFC 1738 的有效 URL 编码,但如果将这个已编码的字符串提交给服务器端脚本,例如JSP,结果将是一个空格而不是 + 字符。这也是正确的,因为描述 application/x-www-form-urlencoded 格式的RFC 1866 中规定空格符的编码为 +,并且所有非字母数字字符都以一个 % 后跟 16 进制码替代。当服务器对这个字符串进行解码时,任何 + 字符都会被还原成一个空格。

总之,由 escape() 执行的 URL 编码并不完全与 application/x-www-form-urlencoded 一样,因为 escape() 将 + 字符保留,不做编码,而在 application/x-www-form-urlencoded 中,空格则被编码为 + 字符。解决这个问题最简单的方法是将所有 + 字符都编码为 %2B(2B 是 + 的 16 进制代码)。也可以使用replace() 对 escape() 的返回结果执行此操作。在本例中,可以将字符串 a + b 编码为 a%20%2B%20b。下列所示的是 addParam() 内部函数,它将一个编码后的名称-值对添加到 getFormData() 的本地dataString 变量。

对单一请求参数进行编码
               
function getFormData(form) {
    var dataString = "";

    function addParam(name, value) {
        dataString += (dataString.length > 0 ? "&" : "")
            + escape(name).replace(/\+/g, "%2B") + "="
            + escape(value ? value : "").replace(/\+/g, "%2B");
    }
    ...
}

getFormData() 函数获取 form 对象的 elements 数组,并根据每个元素的类型调用 addParam()。单个名称-值会针对每个文本框、密码和隐藏字段添加。只有当对应的表单元素被选中时,复选框和单选按钮的值才会被编码。如果是列表,单个名称-值对会针对每个选中项添加。之后,getFormData() 会返回包含表单编码数据的字符串。

function getFormData(form) {
    ...
    var elemArray = form.elements;
    for (var i = 0; i < elemArray.length; i++) {
        var element = elemArray[i];
        var elemType = element.type.toUpperCase();
        var elemName = element.name;
        if (elemName) {
            if (elemType == "TEXT"
                    || elemType == "TEXTAREA"
                    || elemType == "PASSWORD"
                    || elemType == "HIDDEN")
                addParam(elemName, element.value);
            else if (elemType == "CHECKBOX" && element.checked)
                addParam(elemName,
                    element.value ? element.value : "On");
            else if (elemType == "RADIO" && element.checked)
                addParam(elemName, element.value);
            else if (elemType.indexOf("SELECT") != -1)
                for (var j = 0; j < element.options.length; j++) {
                    var option = element.options[j];
                    if (option.selected)
                        addParam(elemName,
                            option.value ? option.value : option.text);
                }
        }
    }
    return dataString;
}
分享到:
评论

相关推荐

    查看进程信息,方便排查问题

    查看进程信息,方便排查问题

    IDA Pro分析STM32F1xx插件

    IDA Pro分析STM32F1xx插件

    基于SSH的线上医疗报销系统.zip-毕设&课设&实训&大作业&竞赛&项目

    项目工程资源经过严格测试运行并且功能上ok,可实现复现复刻,拿到资料包后可实现复现出一样的项目,本人系统开发经验充足(全栈全领域),有任何使用问题欢迎随时与我联系,我会抽时间努力为您解惑,提供帮助 【资源内容】:包含源码+工程文件+说明等。答辩评审平均分达到96分,放心下载使用!可实现复现;设计报告也可借鉴此项目;该资源内项目代码都经过测试运行,功能ok 【项目价值】:可用在相关项目设计中,皆可应用在项目、毕业设计、课程设计、期末/期中/大作业、工程实训、大创等学科竞赛比赛、初期项目立项、学习/练手等方面,可借鉴此优质项目实现复刻,设计报告也可借鉴此项目,也可基于此项目来扩展开发出更多功能 【提供帮助】:有任何使用上的问题欢迎随时与我联系,抽时间努力解答解惑,提供帮助 【附带帮助】:若还需要相关开发工具、学习资料等,我会提供帮助,提供资料,鼓励学习进步 下载后请首先打开说明文件(如有);整理时不同项目所包含资源内容不同;项目工程可实现复现复刻,如果基础还行,也可在此程序基础上进行修改,以实现其它功能。供开源学习/技术交流/学习参考,勿用于商业用途。质量优质,放心下载使用

    matlab的小型的微电网仿真模型文件

    小型的微电网仿真模型,简单模拟了光伏,家庭负载变化的使用情况

    MATLAB代码实现:分布式电源接入对配电网运行影响深度分析与评估,MATLAB代码分析:分布式电源接入对配电网运行影响评估,MATLAB代码:分布式电源接入对配电网影响分析 关键词:分布式电源 配电

    MATLAB代码实现:分布式电源接入对配电网运行影响深度分析与评估,MATLAB代码分析:分布式电源接入对配电网运行影响评估,MATLAB代码:分布式电源接入对配电网影响分析 关键词:分布式电源 配电网 评估 参考文档:《自写文档,联系我看》参考选址定容模型部分; 仿真平台:MATLAB 主要内容:代码主要做的是分布式电源接入场景下对配电网运行影响的分析,其中,可以自己设置分布式电源接入配电网的位置,接入配电网的有功功率以及无功功率的大小,通过牛顿拉夫逊法求解分布式电源接入后的电网潮流,从而评价分布式电源接入前后的电压、线路潮流等参数是否发生变化,评估配电网的运行方式。 代码非常精品,是研究含分布式电源接入的电网潮流计算的必备程序 ,分布式电源; 配电网; 接入影响分析; 潮流计算; 牛顿拉夫逊法; 电压评估; 必备程序。,基于MATLAB的分布式电源对配电网影响评估系统

    基于Unity-Bolt开发的游戏demo.zip

    项目工程资源经过严格测试运行并且功能上ok,可实现复现复刻,拿到资料包后可实现复现出一样的项目,本人系统开发经验充足(全栈全领域),有任何使用问题欢迎随时与我联系,我会抽时间努力为您解惑,提供帮助 【资源内容】:包含源码+工程文件+说明等。答辩评审平均分达到96分,放心下载使用!可实现复现;设计报告也可借鉴此项目;该资源内项目代码都经过测试运行,功能ok 【项目价值】:可用在相关项目设计中,皆可应用在项目、毕业设计、课程设计、期末/期中/大作业、工程实训、大创等学科竞赛比赛、初期项目立项、学习/练手等方面,可借鉴此优质项目实现复刻,设计报告也可借鉴此项目,也可基于此项目来扩展开发出更多功能 【提供帮助】:有任何使用上的问题欢迎随时与我联系,抽时间努力解答解惑,提供帮助 【附带帮助】:若还需要相关开发工具、学习资料等,我会提供帮助,提供资料,鼓励学习进步 下载后请首先打开说明文件(如有);整理时不同项目所包含资源内容不同;项目工程可实现复现复刻,如果基础还行,也可在此程序基础上进行修改,以实现其它功能。供开源学习/技术交流/学习参考,勿用于商业用途。质量优质,放心下载使用

    重庆市农村信用合作社 农商行数字银行系统建设方案.ppt

    重庆市农村信用合作社 农商行数字银行系统建设方案.ppt

    光伏并网逆变器设计方案与高效实现:结合matlab电路仿真、DSP代码及环流抑制策略,光伏并网逆变器设计方案:结合matlab电路文件与DSP程序代码,实现高效并联环流抑制策略,光伏并网逆变器设计方案

    光伏并网逆变器设计方案与高效实现:结合matlab电路仿真、DSP代码及环流抑制策略,光伏并网逆变器设计方案:结合matlab电路文件与DSP程序代码,实现高效并联环流抑制策略,光伏并网逆变器设计方案,附有相关的matlab电路文件,以及DSP的程序代码,方案、仿真文件、代码三者结合使用效果好,事半功倍。 备注:赠送逆变器并联环流matlab文件,基于矢量控制的环流抑制策略和下垂控制的环流抑制 ,光伏并网逆变器设计方案; MATLAB电路文件; DSP程序代码; 方案、仿真文件、代码结合使用; 并联环流抑制策略; 下垂控制的环流抑制,光伏并网逆变器优化设计:方案、仿真与DSP程序代码三合一,并赠送并联环流抑制策略Matlab文件

    Matlab实现WOA-GRU鲸鱼算法优化门控循环单元的数据多输入分类预测(含模型描述及示例代码)

    内容概要:本文介绍了通过 Matlab 实现鲸鱼优化算法(WOA)与门控循环单元(GRU)结合的多输入分类预测模型。文章首先概述了时间序列预测的传统方法局限性以及引入 WOA 的优势。然后,重点阐述了项目背景、目标、挑战及其独特之处。通过详细介绍数据预处理、模型构建、训练和评估步骤,最终展示了模型的效果预测图及应用实例。特别强调利用 WOA 改善 GRU 的参数设置,提高了多输入时间序列预测的准确性与鲁棒性。 适合人群:对时间序列分析有兴趣的研究者,从事金融、能源、制造业等行业数据分析的专业人士,具备一定的机器学习基础知识和技术经验。 使用场景及目标:本项目旨在开发一个高度准确和稳定的多变量时间序列预测工具,能够用于金融市场预测、能源需求规划、生产调度优化等领域,为企业和个人提供科学决策依据。 其他说明:项目提供的源代码和详细的开发指南有助于学习者快速掌握相关技能,并可根据实际需求调整模型参数以适应不同的业务情境。

    基于vue+elment-ui+node.js的后台管理系统 .zip(毕设&课设&实训&大作业&竞赛&项目)

    项目工程资源经过严格测试运行并且功能上ok,可实现复现复刻,拿到资料包后可实现复现出一样的项目,本人系统开发经验充足(全栈全领域),有任何使用问题欢迎随时与我联系,我会抽时间努力为您解惑,提供帮助 【资源内容】:包含源码+工程文件+说明等。答辩评审平均分达到96分,放心下载使用!可实现复现;设计报告也可借鉴此项目;该资源内项目代码都经过测试运行,功能ok 【项目价值】:可用在相关项目设计中,皆可应用在项目、毕业设计、课程设计、期末/期中/大作业、工程实训、大创等学科竞赛比赛、初期项目立项、学习/练手等方面,可借鉴此优质项目实现复刻,设计报告也可借鉴此项目,也可基于此项目来扩展开发出更多功能 【提供帮助】:有任何使用上的问题欢迎随时与我联系,抽时间努力解答解惑,提供帮助 【附带帮助】:若还需要相关开发工具、学习资料等,我会提供帮助,提供资料,鼓励学习进步 下载后请首先打开说明文件(如有);整理时不同项目所包含资源内容不同;项目工程可实现复现复刻,如果基础还行,也可在此程序基础上进行修改,以实现其它功能。供开源学习/技术交流/学习参考,勿用于商业用途。质量优质,放心下载使用

    Python 实现基于BiLSTM-AdaBoost双向长短期记忆网络结合AdaBoost多输入分类预测(含模型描述及示例代码)

    内容概要:本文介绍了Python中基于双向长短期记忆网络(BiLSTM)与AdaBoost相结合的多输入分类预测模型的设计与实现。BiLSTM擅长捕捉时间序列的双向依赖关系,而AdaBoost则通过集成弱学习器来提高分类精度和稳定性。文章详述了该项目的背景、目标、挑战、特色和应用场景,并提供了详细的模型构建流程、超参数优化以及视觉展示的方法和技术要点。此外,还附有完整的效果预测图表程序和具体示例代码,使读者可以快速上手构建属于自己的高效稳定的时间序列预测系统。 适合人群:对深度学习特别是时序数据分析感兴趣的开发者或者科研工作者;正在探索高级机器学习技术和寻求解决方案的企业分析师。 使用场景及目标:适用于希望提升时间序列或多输入数据类别判定准确度的业务情境,比如金融市场的走势预估、医学图像分析中的病变区域判读或是物联网环境监测下设备状态预警等任务。目的是为了创建更加智能且可靠的预测工具,在实际应用中带来更精准可靠的结果。 其他说明:文中提供的所有Python代码片段和方法都可以直接运用于实践中,并可根据特定的问题进行相应调整和扩展,进一步改进现有系统的效能并拓展新的功能特性。

    maven-script-interpreter-javadoc-1.0-7.el7.x64-86.rpm.tar.gz

    1、文件内容:maven-script-interpreter-javadoc-1.0-7.el7.rpm以及相关依赖 2、文件形式:tar.gz压缩包 3、安装指令: #Step1、解压 tar -zxvf /mnt/data/output/maven-script-interpreter-javadoc-1.0-7.el7.tar.gz #Step2、进入解压后的目录,执行安装 sudo rpm -ivh *.rpm 4、更多资源/技术支持:公众号禅静编程坊

    在云服务器上搭建MQTT服务器(超详细,一步到位)

    在云服务器上搭建MQTT服务器(超详细,一步到位)

    复现改进的L-SHADE差分进化算法求解最优化问题详解:附MATLAB源码与测试函数集,复现改进的L-SHADE差分进化算法求解最优化问题详解:MATLAB源码与测试集全攻略,复现改进的L-SHADE

    复现改进的L-SHADE差分进化算法求解最优化问题详解:附MATLAB源码与测试函数集,复现改进的L-SHADE差分进化算法求解最优化问题详解:MATLAB源码与测试集全攻略,复现改进的L-SHADE差分进化算法求最优化问题 对配套文献所提出的改进的L-SHADE差分进化算法求解最优化问题的的复现,提供完整MATLAB源代码和测试函数集,到手可运行,运行效果如图2所示。 代码所用测试函数集与文献相同:对CEC2014最优化测试函数集中的全部30个函数进行了测试验证,运行结果与文献一致。 ,复现; 改进的L-SHADE差分进化算法; 最优化问题求解; MATLAB源代码; 测试函数集; CEC2014最优化测试函数集,复现改进L-SHADE算法:最优化问题的MATLAB求解与验证

    天津大学:深度解读DeepSeek原理与效应.pdf

    天津大学:深度解读DeepSeek原理与效应.pdf 1.大语言模型发展路线图 2.DeepSeek V2-V3/R1技术原理 3DeepSeek效应 4.未来展望

    光伏混合储能微电网能量管理系统模型:基于MPPT控制的光伏发电与一阶低通滤波算法的混合储能系统优化管理,光伏混合储能微电网能量优化管理与稳定运行系统,光伏-混合储能微电网能量管理系统模型

    光伏混合储能微电网能量管理系统模型:基于MPPT控制的光伏发电与一阶低通滤波算法的混合储能系统优化管理,光伏混合储能微电网能量优化管理与稳定运行系统,光伏-混合储能微电网能量管理系统模型 系统主要由光伏发电模块、mppt控制模块、混合储能系统模块、直流负载模块、soc限值管理控制模块、hess能量管理控制模块。 光伏发电系统采用mppt最大跟踪控制,实现光伏功率的稳定输出;混合储能系统由蓄电池和超级电容组合构成,并采用一阶低通滤波算法实现两种储能介质间的功率分配,其中蓄电池响应目标功率中的低频部分,超级电容响应目标功率中的高频部分,最终实现对目标功率的跟踪响应;SOC限值管理控制,根据储能介质的不同特性,优化混合储能功率分配,进一步优化蓄电池充放电过程,再根据超级电容容量特点,设计其荷电状态区分管理策略,避免过充过放,维持系统稳定运行;最后,综合混合储能和系统功率平衡,针对光伏储能微电网的不同工况进行仿真实验,验证控制策略的有效性。 本模型完整无错,附带对应复现文献paper,容易理解,可塑性高 ,光伏; 混合储能系统; 能量管理; MPPT控制; 直流负载;

    Matlab算法下的A星路径规划改进版:提升搜索效率,优化拐角并路径平滑处理,Matlab下的A星算法改进:提升搜索效率、冗余拐角优化及路径平滑处理,Matlab算法代码 A星算法 路径规划A* As

    Matlab算法下的A星路径规划改进版:提升搜索效率,优化拐角并路径平滑处理,Matlab下的A星算法改进:提升搜索效率、冗余拐角优化及路径平滑处理,Matlab算法代码 A星算法 路径规划A* Astar算法仿真 传统A*+改进后的A*算法 Matlab代码 改进: ①提升搜索效率(引入权重系数) ②冗余拐角优化(可显示拐角优化次数) ③路径平滑处理(引入梯度下降算法配合S-G滤波器) ,Matlab算法代码; A星算法; 路径规划A*; Astar算法仿真; 传统A*; 改进A*算法; 提升搜索效率; 冗余拐角优化; 路径平滑处理; 权重系数; S-G滤波器。,Matlab中的A*算法:传统与改进的路径规划仿真研究

    探索与Cursor协作创建一个完整的前后端分离的项目的最佳实践,提示词指南

    项目开发所用的主要提示词模板

    基于OpenVINO.NET实现的人脸检测。.zip

    项目工程资源经过严格测试运行并且功能上ok,可实现复现复刻,拿到资料包后可实现复现出一样的项目,本人系统开发经验充足(全栈全领域),有任何使用问题欢迎随时与我联系,我会抽时间努力为您解惑,提供帮助 【资源内容】:包含源码+工程文件+说明等。答辩评审平均分达到96分,放心下载使用!可实现复现;设计报告也可借鉴此项目;该资源内项目代码都经过测试运行;功能ok 【项目价值】:可用在相关项目设计中,皆可应用在项目、毕业设计、课程设计、期末/期中/大作业、工程实训、大创等学科竞赛比赛、初期项目立项、学习/练手等方面,可借鉴此优质项目实现复刻,设计报告也可借鉴此项目,也可基于此项目来扩展开发出更多功能 【提供帮助】:有任何使用上的问题欢迎随时与我联系,抽时间努力解答解惑,提供帮助 【附带帮助】:若还需要相关开发工具、学习资料等,我会提供帮助,提供资料,鼓励学习进步 下载后请首先打开说明文件(如有);整理时不同项目所包含资源内容不同;项目工程可实现复现复刻,如果基础还行,也可在此程序基础上进行修改,以实现其它功能。供开源学习/技术交流/学习参考,勿用于商业用途。质量优质,放心下载使用

    电力系统暂态稳定性仿真分析:Matlab编程与Simulink模型下的各类故障影响研究,电力系统暂态稳定性仿真分析:Matlab编程与Simulink模型下的各类故障影响研究,电力系统暂态稳定性Mat

    电力系统暂态稳定性仿真分析:Matlab编程与Simulink模型下的各类故障影响研究,电力系统暂态稳定性仿真分析:Matlab编程与Simulink模型下的各类故障影响研究,电力系统暂态稳定性Matlab编程 Simulink仿真 单机无穷大系统发生各类(三相短路,单相接地,两相接地,两相相间短路)等短路故障,各类(单相断线,两相断线,三相断线)等断线故障,暂态稳定仿真分析 Simulink搭建电力系统暂态仿真模型 通过仿真,观察串联电抗器,并联补偿器,自动重合闸,以及故障切除快慢对暂态稳定性的影响 ,电力系统暂态稳定性; Matlab编程; Simulink仿真; 短路故障; 断线故障; 暂态稳定仿真分析; 仿真模型搭建; 电抗器影响; 补偿器影响; 自动重合闸; 故障切除时间。,Matlab编程与Simulink仿真在电力系统暂态稳定性分析中的应用

Global site tag (gtag.js) - Google Analytics