ajax

最新推荐文章于 2024-08-11 21:47:18 发布
最新推荐文章于 2024-08-11 21:47:18 发布
阅读量153 收藏
点赞数
文章标签： ajax
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44426216/article/details/109145651
版权

ajax

它是浏览器提供的一套方法，可以实现无刷新更新数据，提高用户浏览网站应用的体验；

应用场景

  • 页面上拉加载更多数据；
  • 列表数据无刷新分页；
  • 表单项离开焦点数据验证；
  • 搜索框提示文字下拉列表；

运行环境
ajax技术需要运行在网站环境中才能生效；
在这里插入图片描述
ajax实现步骤
在这里插入图片描述
服务器端响应的数据格式
在这里插入图片描述

	<body>
	    <script>
	        //1.创建ajax对象
	        var xhr = new XMLHttpRequest();
	        //2.告诉ajax对象要向哪发送请求，以什么方式发送请求
	        // 1)请求方式 2)请求地址
	        xhr.open('get','http://localhost:3000/responseData');
	        //3.发送请求
	        xhr.send();
	        //不能直接接收服务端响应的文件
	        //4.获取服务器端响应到客户端的数据
	        xhr.onload = function(){
	            // console.log(xhr.responseText);
	            //返回string
	            // console.log(typeof xhr.responseText);
	            //将JSON字符串转换成JSON对象
	            var responseText = JSON.parse(xhr.responseText);
	            console.log(responseText);
	            var str = '<h2>'+responseText.name+'</h2>';
	            document.body.innerHTML = str;
	        }
	    </script>
	</body>

请求参数传递
在这里插入图片描述
在这里插入图片描述

	<body>
	    <p>
	        <input type="text" name="" class="username">
	    </p>
	    <p>
	        <input type="text" name="" class="age">
	    </p>
	    <p>
	        <input type="button" name="" value="提交" class="btn">
	    </p>
	    <script>
	        var btn = document.querySelector('.btn');
	        var username = document.querySelector('.username');
	        var age = document.querySelector('.age');
	
	        btn.addEventListener('click',function(){
	            //创建ajax对象
	            var xhr = new XMLHttpRequest();
	            //获取用户在文本框中输入的值
	            var nameval = username.value;
	            var ageval = age.value;
	            // alert(nameval);
	            // alert(ageval);
	            //拼接字符串
	            var params = 'username='+nameval+'&age='+ageval;
	            //配置ajax对象
	            xhr.open('get','http://localhost:3000/get?'+params);
	            //发送请求
	            xhr.send();
	            //获取服务器端响应的数据
	            xhr.onload = function(){
	                console.log(xhr.responseText);
	            }
	        })
	    </script>
	</body>

	app.get('/get',(req,res) =>{
	    res.send(req.query);
	})

在这里插入图片描述
在这里插入图片描述

    <script>
        var btn = document.querySelector('.btn');
        var username = document.querySelector('.username');
        var age = document.querySelector('.age');

        btn.addEventListener('click',function(){
            //创建ajax对象
            var xhr = new XMLHttpRequest();
            //获取用户在文本框中输入的值
            var nameval = username.value;
            var ageval = age.value;
            // alert(nameval);
            // alert(ageval);
            //拼接字符串
            var params = 'username='+nameval+'&age='+ageval;
            //配置ajax对象
            xhr.open('post','http://localhost:3000/post');
            //设置请求参数格式的类型（post请求必须要设置）
            xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
            //发送请求
            xhr.send(params);
            //获取服务器端响应的数据
            xhr.onload = function(){
                console.log(xhr.responseText);
            }
        });
    </script>

在这里插入图片描述
get请求和传统网站的表单提交不能提交json对象数据格式

    <script>
        //1.创建ajax对象
        var xhr = new XMLHttpRequest();
        //2.告诉ajax对象要向哪发送请求，以什么方式发送请求
        // 1)请求方式 2)请求地址
        xhr.open('post','http://localhost:3000/json');
        //通过请求头告诉服务器端客户端向服务器端传递的请求参数的格式是什么
        xhr.setRequestHeader('Content-Type','application/json');
        //JSON.stringify 将json对象转换为json字符串
        //3.发送请求
        xhr.send(JSON.stringify({name:'victor',age:22}));
        //不能直接接收服务端响应的文件
        //4.获取服务器端响应到客户端的数据
        xhr.onload = function(){
            console.log(xhr.responseText);
        }
    </script>

在这里插入图片描述
在这里插入图片描述

    <script>
        var xhr = new XMLHttpRequest();
        //0 已经创建了ajax对象 但是还没有对ajax对象进行配置
        console.log(xhr.readyState);
        xhr.open('get','http://localhost:3000/readyState');
        //1 已经对ajax进行配置 但是还没有发送请求
        console.log(xhr.readyState);

        //当ajax状态码发生改变的时候触发
        xhr.onreadystatechange = function(){
            //2 请求已经发送
            //3 已经接收到服务端的部分数据
            //4 服务器端的响应数据已经接收完成
            console.log(xhr.readyState);
            //对ajax状态码进行判断
            //如果状态码的值为4就代表已经接收完成
            if(xhr.readyState == 4){
                console.log(xhr.responseText);
            }
        }
        //发送
        xhr.send();
    </script>

在这里插入图片描述

	<body>
	    <button class="button">发送ajax请求</button>
	    <script>
	        var btn = document.querySelector('.button');
	
	        btn.addEventListener('click',function(){
	            //1.创建ajax对象
	            var xhr = new XMLHttpRequest();
	            
	            xhr.open('get','http://localhost:3000/error');
	            xhr.send();
	            xhr.onload = function(){
	                //xhr.status 获取http状态码
	                console.log(xhr.responseText);
	                if(xhr.status == 400){alert('请求出错');}
	            }
	            xhr.onerror = function(){
	                alert('网络中断，hxd');
	            }
	        });
	    </script>
	</body>

	app.get('/error',(req,res) =>{
	    //不存在的变量 返回500
	    // console.log(abc);
	    res.status(400).send('not found');
	})

AJAX状态码：表示ajax请求的过程状态，ajax对象返回的
Http状态码：表示请求处理的结果，是服务器端返回的

在这里插入图片描述
解决方案：
在请求地址的后面添加请求参数，保证每一次请求中的请求参数的值都不相同；
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

    <script>
        function ajax(options){
            //默认值存储
            var defaults = {
                type: 'get',
                url: '',
                data: {},
                header:{
                    'Content-Type':'application/x-www-form-urlencoded'
                },
                success:function(){},
                error:function(){}
            };

            //使用options中的屬性覆蓋defaults中的屬性值
            Object.assign(defaults,options);

            //创建ajax对象
            var xhr = new XMLHttpRequest();
            //拼接请求参数的变量
            var params = '';
            //循环用户传递进来的对象格式参数
            for(var attr in defaults.data){
                params +=attr + '=' + defaults.data[attr] + '&';
            }
            params = params.substr(0,params.length-1);
            
            if(defaults.type == 'get'){
                defaults.url = defaults.url + '?' + params;
            }
            //配置ajax对象
            xhr.open(defaults.type,defaults.url);

            if(defaults.type == 'post'){
                //用户希望向服务器传递的请求参数的类型
                var contentType = defaults.header['Content-Type'];

                xhr.setRequestHeader('Content-Type',contentType);
                if(contentType == 'application/json'){
                    xhr.send(JSON.stringify(defaults.data));
                }else{
                    xhr.send(params);
                }
            }else{
                xhr.send();
            }
            //监听onload事件
            xhr.onload = function(){

                // xhr.getResponseHeader()
                //获取响应头中的数据
                var contentType = xhr.getResponseHeader('Content-Type');
                //
                var responseText = xhr.responseText;
                if(contentType.includes('application/json')){
                    responseText = JSON.parse(responseText);
                }
                // console.log(xhr.responseText);
                //当http状态码等于200的时候
                if(xhr.status == 200){
                    //请求成功，调用成功 调用处理成功情况的函数
                    defaults.success(responseText,xhr);
                }else{
                    //请求失败，调用成功 调用处理失败情况的函数
                    defaults.error(responseText,xhr);
                }
            }
        }

        ajax({
            //请求方式
            type:'post',
            //请求地址
            url:'http://localhost:3000/responseData',
            // data: {
            //     name: 'lizeyan',
            //     age: 22,
            // },
            // header:{
            //     'Content-Type':'application/json'
            // },
            success: function(data){
                console.log('this is success function ');
                console.log(data);
            },
            // error: function(data){
            //     console.log('this is error function '+data);
            // }
        });
    </script>

模板引擎

    <!-- 1. 将模板引擎的库文件引入到当前页面 -->
    <script src="./js/template-web.js"></script>
    <div id="container"></div>
    <!-- 2. 准备art-template模板 -->
    <script type="text/html" id="tpl">
        <h1>{{username}} {{age}}</h1>
    </script>
    <script> 
        // 3. 告诉模板引擎将那个数据和那个模板进行拼接
        // 1)模板id 2)数据 对象类型
        //方法返回值就是拼接好的html字符串
        var html = template('tpl',{username:'lizeyan',age:30});
        document.querySelector('#container').innerHTML = html;
    </script>

在这里插入图片描述
![在这里插入图片描述](https://img-blog.csdnimg.cn/20201019201449537.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQyNjIxNg==,size_16,color_FFFFFF,t_70#pic_left
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

<body>
    <button id="btn">点我触发事件</button>
    <button id="btn2">点我是否覆盖</button>
    <!-- <script>
        function fn2(data){
            console.log('客户端fn函数被调用了');
            console.log(data);
        }
    </script> -->
    <script>
        var btn = document.getElementById('btn');
        var btn2 = document.getElementById('btn2');
        btn.addEventListener('click',function(){
            jsonp({
            url:'http://localhost:3001/better',
            success:function(data){
                console.log('卢本伟牛逼');
                console.log(data);
            }
            });
        });
        btn2.addEventListener('click',function(){
            jsonp({
                url:'http://localhost:3001/better',
                data:{
                    name:'Mr.Victor',
                    sex:'male'
                },
                success:function(data){
                    console.log('卢本伟捞逼');
                    console.log(data);
                }
            })
        })
        function jsonp(options){
            //动态创建script标签
            var script = document.createElement('script');
            //拼接字符串
            var params = '';
            for(var attr in options.data){
                params += '&' + attr + '=' + options.data[attr];
            }
            //随机名字
            var fnName = 'myJsonp' + Math.random().toString().replace('.','');
            //挂载到全局中
            window[fnName] =  options.success;
            //添加src属性
            script.src = options.url + '?callback=' + fnName + params;
            //追加到页面上
            document.body.appendChild(script);
            //为script添加onload事件
            script.onload = function(){
                document.body.removeChild(script);
            }
        }
    </script>
</body>

在这里插入图片描述

    <button class="btn">点我</button>
    <script src="./js/ajax.js"></script>
    <script>
        var btn = document.querySelector('.btn');
        btn.addEventListener('click',function(){
            ajax({
                type:'get',
                url:'http://localhost:3001/cross',
                success:function(data){
                    console.log(data);
                }
            });
        });
    </script>

	app.use((req,res,next) =>{
	    //1. 允许哪些客户端访问我
	    //* 代表全部都能访问
	    res.header('Access-Control-Allow-Origin','*');
	    //2. 允许客户端使用哪些请求方法访问我
	    res.header('Access-Control-Allow-Methods','get,post');
	    next();
	})

在这里插入图片描述

	app.get('/server',(req,res) =>{
		request('http:localhost:3001/cross',(err,response,body) =>{
			res.send(body);
		})
	})

在这里插入图片描述
cookie是实现服务器端和客户端身份识别的技术
在这里插入图片描述

	app.use((req,res,next) =>{
	    //1. 允许哪些客户端访问我
	    //* 代表全部都能访问
	    res.header('Access-Control-Allow-Origin','*');
	    //2. 允许客户端使用哪些请求方法访问我
	    res.header('Access-Control-Allow-Methods','get,post');
	    // 允许客户端发送跨域请求时携带cookie信息
		res.header('Access-Control-Allow-Credentials', true);
	    next();
	})
	app.post('/login', (req, res) => {
		// 创建表单解析对象
		var form = formidable.IncomingForm();
		// 解析表单
		form.parse(req, (err, fields, file) => {
			// 接收客户端传递过来的用户名和密码
			const { username, password } = fields;
			// 用户名密码比对
			if (username == 'itheima' && password == '123456') {
				// 设置session
				req.session.isLogin = true;
				res.send({message: '登录成功'});
			} else {
				res.send({message: '登录失败, 用户名或密码错误'});
			}
		})
	});
	
	app.get('/checkLogin', (req, res) => {
		// 判断用户是否处于登录状态
		if (req.session.isLogin) {
			res.send({message: '处于登录状态'})
		} else {
			res.send({message: '处于未登录状态'})
		}
	});

		loginBtn.onclick = function () {
			// 将html表单转换为formData表单对象
			var formData = new FormData(loginForm);
			// 创建ajax对象
			var xhr = new XMLHttpRequest();
			// 对ajax对象进行配置
			xhr.open('post', 'http://localhost:3001/login');
			// 当发送跨域请求时，携带cookie信息
			xhr.withCredentials = true;
			// 发送请求并传递请求参数
			xhr.send(formData);
			// 监听服务器端给予的响应内容
			xhr.onload = function () {
				console.log(xhr.responseText);
			}
		}

		// 当检测用户状态按钮被点击时
		checkLogin.onclick = function () {
			// 创建ajax对象
			var xhr = new XMLHttpRequest();
			// 对ajax对象进行配置
			xhr.open('get', 'http://localhost:3001/checkLogin');
			// 当发送跨域请求时，携带cookie信息
			xhr.withCredentials = true;
			// 发送请求并传递请求参数
			xhr.send();
			// 监听服务器端给予的响应内容
			xhr.onload = function () {
				console.log(xhr.responseText);
			}
		}

在这里插入图片描述

	<body>
	    <button id="btn">发送请求</button>
	    <script src="./js/jquery-3.5.1.min.js"></script>
	    <script>
	        $('#btn').on('click',function(){
	            $.ajax({
	                type:'get',
	                url:'/base',
	                success:function(response){
	                    //response为服务器端返回的数据
	                    //方法内部会自动将json字符串转换为json对象
	                    console.log(response);
	                },
	                error:function(xhr){
	                    console.log(xhr);
	                }
	            });
	        });
	    </script>
	</body>

    <script>
        var params = {name:'xiaolizi',sex:'male'};
        $('#btn').on('click',function(){
            $.ajax({
                type:'post',
                // url:'/base',
                url:'/user',
                beforeSend:function(){
                    alert('请求即将发送');
                    // return false;
                },
                //自动转换成字符串类型  name=xiaolizi&age=22
                // data:{
                //     name:'xioalizi',
                //     age:22
                // },
                data:JSON.stringify(params),
                contentType:'application/json',
                success:function(response){
                    //response为服务器端返回的数据
                    //方法内部会自动将json字符串转换为json对象
                    console.log(response);
                },
                error:function(xhr){
                    console.log(xhr);
                }
            });
        });
    </script>

在这里插入图片描述

    <script>
        $('#form').on('submit',function(){
            //将表单内容拼接成字符串类型
            // var params = $('#form').serialize();
            serializeObject($(this));
            
        });

        function serializeObject(obj){
            var result = {};
            var params = obj.serializeArray();
            $.each(params,function(index,value){
                result[value.name] = value.value;
            });
            return result;
        }
    </script>

在这里插入图片描述

    <script>

        function fn(response){
            console.log(response);
        }

        $('.btn').on('click',function(){
            $.ajax({
                url:'/jsonp',
                //向服务器端传递函数名字的参数名称
                jsonp:'cb',
                //自定义函数
                jsonpCallback:'fn',
                //发送jsonp请求
                dataType:'jsonp',
                // success:function(response){
                //     console.log(response);
                // }
            });
        });
    </script>

	app.get('/jsonp',(req,res) =>{
		// res.jsonp({
		// 	name:'tankunxin',
		// 	age:22	
		// })
		const cb = req.query.cb;
		const data = cb + "({name:'tankunxin'})";
		res.send(data);
	})

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

A PIG
关注
第1篇——JSP作业3之使用Ajax发送和接收数据
sunny_345的博客
03-18 606
JSP作业3之使用Ajax发送和接收数据 任务：利用中国天气网的公开接口，实现天气预报的查询功能 1.从js文件读取JSON数据 2.实现二级联动菜单 3.从服务器读取JSON数据 功能要求 当网页加载时，根据所给的json数据解析获得省（直辖市）的信息并显示在下拉列表框中。 当用户选择某个省（直辖市），在第二个下拉列表框中显示其从属的所有城市（地区）。 当用户选择了某个城市（地区），查询最近...
命令行请求jsp页面_jsp命令行页面-执行shell | 学步园
weixin_39805087的博客
12-22 246
看效果截图：jsp文件如下：放在同一目录下，需要导入jquery，jquery版本最低1.7：cmd.jspjsp命令行页面textarea{background-color: #000;color:red;width:100%;}$(function(){$("#cmd").keydown(function(event){if(event.keyCode==13){var cmd=getStrB...
ajax讲解
最新发布
m0_74064480的博客
08-11 946
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。JSON是用字符串来表示Javascript对象，例如可以在Servlet中发送一个JSON格式的字符串给客户端Javascript，Javascript可以执行这个字符串，得到一个Javascript对象。
jsp网页转发+请求
weixin_60786293的博客
04-04 998
登录页面 <html> <head> <meta charset="utf-8"> <title>Insert title here</title> </head> <body> <form action="index.jsp"> 用户名:<input type="text" name="uname"> <br> 密码:<input type="password".
命令行请求jsp页面_JSP学习-04 请求响应
weixin_39745269的博客
12-31 215
JSP 客户端请求当浏览器请求一个网页时，它会向网络服务器发送一系列不能被直接读取的信息，因为这些信息是作为HTTP信息头的一部分来传送的。信息描述Accept指定浏览器或其他客户端可以处理的MIME类型。它的值通常为image/png或image/jpegAccept-Charset指定浏览器要使用的字符集。比如 ISO-8859-1Accept-Encoding指定编码类型。它的值通常为...
JSP页面请求与响应以及保存页面状态
qq_41827511的博客
09-28 544
JSP内置对象简介 request 通过getParameter()方法能够得到请求的参数，请求类型（GET，POST,HEAD等）以及HTTPheaders(Cookies,Referer等)。 该对象的作用域：为用户请求期间。 response 它的作用是向客户端返回请求。注意输出流首先需要进行缓存。 该对象的作用域为页面执行期间。 out 将结果输出到客户端。 该对象的作用域为页面执行期间 ...
Ajax从入门到精通.pdf
05-09
Ajax从入门到精通.pdf 本书籍旨在深入浅出地介绍 Ajax 技术，从基础知识到高级应用，全面覆盖 Ajax 的核心概念、技术原理、实现方法和实践应用。书籍的主要内容包括： 1. Ajax 概述：本书首先介绍了 Ajax 的概念、...
谷歌浏览器插件—— Ajax Interceptor
03-16
**Ajax Interceptor：深入理解与应用** Ajax Interceptor 是一款专为谷歌浏览器（Chrome）设计的插件，它允许开发者在Ajax请求发送后和响应返回前进行干预，从而实现对AJAX请求数据的修改。这款插件对于前端开发、...
chrome扩展插件获取ajax请求记录
04-06
在IT领域，尤其是在Web开发中，Ajax（Asynchronous JavaScript and XML）是一种常用的技术，它使得网页可以在不重新加载整个页面的情况下与服务器交换数据并更新部分网页内容。这极大地提升了用户体验，因为用户不再...
Ajax实现文件下载
12-11
JQuery的ajax函数的返回类型只有xml、text、json、html等类型，没有“流”类型，所以我们要实现ajax下载，不能够使用相应的ajax函数进行文件下载。但可以用js生成一个form，用这个form提交参数，并返回“流”类型的...
C# 如何使用ajax请求
08-18
C# 如何使用ajax请求 C# 使用ajax请求是指在C# 项目中使用ajax技术来实现异步更新网页的内容。ajax即“Asynchronous Javascript And XML”（异步JavaScript 和 XML），是指一种创建交互式、快速动态网页应用的网页...
初学 Java web（三）JSP页面请求与响应
baidu_34211956的博客
11-22 2088
简单的用户注册界面 包括两个文件：zhuce.htm和zhuce.jsp zhuce.htm：显示注册表单界面 zhuce.jsp：获取所有的注册信息并显示 zhuce.html Insert title here 添加个人信息 用户名： 密码： 确认密码：
JS后端框架 Nest.js入门篇
清心
11-08 3741
一：多模块应用结构 0.多模块目录结构示例 src ├──cats │ ├──dto │ │ └──create-cat.dto.ts │ ├──interfaces │ │ └──cat.interface.ts │ ├─cats.service.ts │ ├─cats.controller.ts │ └──cats.module.ts ├──dogs │ ├──dto │ │ └──create-dog.dto.ts │ ├──
jsp与jsp页面间的值传递与接收
weixin_34257076的博客
04-13 1427
1.使用<a>标签 传递值 <a href="index.jsp?name=增加数据">增加数据</a> ///////目标页面/////值/////////// 接收值 <% String value=request.getParameter("name"); %> 2.使用<a>标签或表单&lt...
JSP页面请求和响应
xiaobailin_q的博客
03-28 4137
JSP页面请求和响应1、JSP内置对象2、out的方法3、out输出的方法4、page对象5、request获取客户端信息的方法6、request获取表单数据的方法7、request处理中文的方法8、response重定向的使用9、session对象session 的常用方法10、application对象application 对象常用方法11、config对象config 对象常用方法12、p...
二、Jsp同一页面提交和接收数据 第二讲(上)
dwt1220
10-31 894
同一页面提交和接收数据，要注意空值  我的计算机 function chenk(){ if(jisuan.num1.value==""){ window.alert("不能为空"); return false; } if(Math.round(jisuan.num1.value)!=jisuan.num1.value){
jsp之同一个页面提交和接收数据
kaikai_sk的博客
11-06 3287
jsp之简单的计算器续<!-- 这是一个简单计算器的界面 --> <%@ page contentType="text/html;charset=gb2312"%><html> <!-- 添加javascript代码，检验输入 --> <head> <script language="javascript"> //判断输入是否为空
JSP数据交互（一）
weixin_40745422的博客
05-23 619
什么是JSP内置对象？JSP内置对象，就是在编写JSP页面时，不需要做任何声明就可以直接使用的对象。
涉及JSP页面请求、响应、切换和数据传递的5个内置对象
abvedu的博客
01-13 1701
一个Java Web项目至少需要一个页面，项目执行时需要页面的初始化和导入；当一个Java Web项目右两个或者两个以上的页面时，页面切换过程中又需要页面的响应和页面间的数据传递。 页面的响应需要对页面进行加载。而页面间的数据传递需要在页面跳转时指定目标页面和需要传递的数据信息，并在新页面进行接收。涉及页面以上处理工作的内置对象有5个。与保存页面状态的4个内置对象一样，这5个内置对象在形成的ser
Ajax到JQuery Ajax学习指南
"这篇教程主要关注的是从基本的Ajax技术过渡到使用JQuery的Ajax功能的学习。Ajax（Asynchronous JavaScript and XML）是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。它通过在后台与服务器交换数据...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值