JavaScript4：JSON、AJAX、；jQuery

最新推荐文章于 2024-04-09 10:00:00 发布
最新推荐文章于 2024-04-09 10:00:00 发布
阅读量308 收藏
点赞数
分类专栏： java 文章标签： jquery ajax js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_49324736/article/details/109190429
版权

JavaScript

JSON
//数据的封装
        <script type="text/javascript">
     //ES5没有类的概念 有对象  ES6 class 类这个概念
            //name age sex  eat()  sleep()

            function Student(name, age, sex) {
               	//alert("构造函数调用了")
                this.name = name;
                this.age = age;
                this.sex = sex;
                this.eat = function() {
                    alert("吃饭")
                }
                this.sleep = function() {
                    alert("睡觉")
                }

            }
            var stu = new Student("张三", 23, "男");
            var name = stu.name;
            var age = stu.age;
            var sex = stu.sex;
            stu.eat();
            stu.sleep();
            alert(name);
            alert(age);
            alert(sex);

            var obj = new Object();
            obj.name = "王五";
            obj.age = 100;
            obj.playGame = function() {
                alert("玩游戏")
            }

            obj.playGame();
            alert(obj.name);
            alert(obj.age);
    	</script>

//JSON对象
		<script type="text/javascript">
	//JSON:/* JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。它基于 ECMAScript (欧洲计算机协会制定的js规范)的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。 易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。 */
	
	//JSON：一种封装数据的格式，层次结构比较简单清晰，体积小，利于人们的阅读，因为他体积比较小，结构简单清晰，也作为了网络数据传输的首选格式。其他语言例如 Java 也是支持解析生成JSON格式的数据。
	
	//学生的信息 name="张三"  age=23  phone=100;
	//JOSN对象的格式 {"键":值,"键":值,"键":值}
	//键都是字符串类型，用双引号引起来
	//值是任意类型：字符串，布尔，数字，数组，json 函数
	//键值之间用冒号隔开
	//多个兼职对之前用逗号隔开
            var studentData={"name":"张三","age":23,"phone":"12344458897","eat":function(){alert("吃饭")}};
            var name=studentData.name;
            var age=studentData.age;
            var phone=studentData.phone;
            studentData.eat();
            alert(name);
            alert(age);
            alert(phone);
        </script>
	//JSON的嵌套
			<script type="text/javascript">
                var person = {
                    "name": "张三",
                    "age": 23,
                    "sex": "男",
                    "car": {
                        "carName": "宝马",
                        "price": 11111444.1,
                        "carColor":["白色","红色","黑色"]
                    }
                }
                //取黑色
                var color=person.car.carColor[2];
                alert(color);
            </script>

	//JSON数组
			<script type="text/javascript">
                var p1 = {
                    "name": "张三",
                    "age": 23,
                    "sal": 1000
                };
                var p2 = {
                    "name": "李四",
                    "age": 24,
                    "sal": 1000
                };
                var p3 = {
                    "name": "王五",
                    "age": 25,
                    "sal": 1000
                };
                var p4 = {
                    "name": "赵六",
                    "age": 26,
                    "sal": 1000
                };
                var arr = [p1, p2, p3, p4];
                //JSON数组
                var arr2 = [{
                    "name": "张三",
                    "age": 23,
                    "sal": 1000
                }, {
                    "name": "李四",
                    "age": 24,
                    "sal": 1000
                }, {
                    "name": "王五",
                    "age": 25,
                    "sal": 1000
                }, {
                    "name": "赵六",
                    "age": 26,
                    "sal": 10005555
                }];
                var v=arr2[3].sal;
                alert(v);
            </script>

	//JSON的遍历
                for(key in p1){
                    var v=p1[key];
                    //alert(key+"=="+v);
                }
				for(index in arr2){
                    var jsonObj=arr2[index];
                    for(key in jsonObj){
                        var v=jsonObj[key];
                        alert(v);
                    }
                }
	
	//JSON对象和JSON字符串的互转
			<script type="text/javascript">
                //JSON对象，我在js中 对象.key
                var jsonObj={"name":"张三","age":23};
                alert(jsonObj.name);

                //JSON格式字符串
                var jsonStr='{"name":"李四","age":23}';

                //因为其他语言，只能把JSON当成字符串来看待，那他返回给前台，是一个JSON字符串，前台要解析JSON字符串中的数据，就必须先把JSON字符串转换成JSON对象

                //JSON字符串转换成JSON对象
                var obj=JSON.parse(jsonStr);
                alert(obj.name);

                //注意的坑：1.就是JSON字符串不要美化（所谓的美化，就带有换行空格）那么你JSON.parse(jsonStr);就转换不了
                //2.var jsonStr2="{'name':'李四','age':23}"; 这种格式的JSON字符串是不符合规范的，那么你JSON.parse(jsonStr2)转换不了
                var jsonObj2={"name":"赵六","age":23};
                //JSON对象转换成JSON字符串
                var v=JSON.stringify(jsonObj2);
                alert(v);
            </script>
AJAX
/* 
	 AJAX
	 AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。
	 
	 AJAX 不是新的编程语言，而是一种使用现有标准的新方法。
	 
	 AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。
	 
	 
	 什么是 AJAX ？
	 AJAX = 异步 JavaScript 和 XML。
	 
	 AJAX 是一种用于创建快速动态网页的技术。
	 
	 通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
	 
	 传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。
	 
	 有很多使用 AJAX 的应用程序案例：新浪微博、Google 地图、开心网等等。

	
	 */
	 
//原生的AJAX的使用
			<body>
                <button type="button" onclick="sendRequest()">点击发送</button>
            </body>
        </html>
        <script type="text/javascript">
            //1.创建Ajax对象
            // XMLHttpRequest 对象
            // 所有现代浏览器均支持 XMLHttpRequest 对象
            // XMLHttpRequest 用于在后台与服务器交换数据。
            // 这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
            //1.创建Ajax对象
            var xmlhttp = new XMLHttpRequest();
            function sendRequest(){
                //2.请求后台
                //向服务器发送请求
                //如需将请求发送到服务器，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法：
                //打开链接
                // http://wthrcdn.etouch.cn/weather_mini?city=商洛
                xmlhttp.open("GET", "http://wthrcdn.etouch.cn/weather_mini?city=西安", true);
                //发送
                xmlhttp.send();
                //3.接收后台返回的JSON数据
                // 服务器响应
                // 如需获得来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText 。

                //前台准备好接收数据
                //当 readyState 等于 4 且状态为 200 时，表示响应已就绪：
                xmlhttp.onreadystatechange = function() {
                    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                        //xmlhttp.responseText; 接收后台响应的json数据
                        var jsonStr=xmlhttp.responseText;
                        //document.write(jsonStr);
                        var JsonObj=JSON.parse(jsonStr);
                        alert(JsonObj.desc);
                    }
                }
            }
        </script>

jQuery

//使用

            <body>
                <button type="button">点击</button>
            </body>
        </html>
        <!-- 引入JQuery库文件 -->
        <script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            $('button').click(function(){
                alert("点击")
            })
        </script>
    
//语法
        //可以链式编程
            <body>
                    <button type="button" id="btn">一个按钮</button>
                </body>
            </html>
            <script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
            <script type="text/javascript">
                //var obj=$('#btn');
                //var obj2=jQuery('#btn');
                //var v=document.getElementById("btn");

                //alert($==jQuery);

                /* var obj=$('#btn').css('background','red');
                var obj2=obj.$('#btn').css('background','red');;
                obj2.css('color','#FFF'); */

                $('#btn').css('background','red').css('font-size','50px').css('color','#FFF');
            </script>  	
            
//加载模式
            <script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
            <script type="text/javascript">
                //元素：标签。
            /* 	window.οnlοad=function(){
                    //var btn = document.getElementById("btn");
                    //alert(btn);
                    //$('button').css('background', 'red');
                } */
                //等待文档中的标签元素加载完成之后，调用。
                $(document).ready(function(){
                    //$('button').css('background', 'red');
                })
                // 上面的可以简写
                $(function(){
                    $('button').css('background', 'red');
                })
            </script>
                </head>
                <body>
                    <button type="button" id="btn">一个按钮</button>
                    <button type="button">阿斯顿发射点发生</button>
                </body>
            </html>
            <script type="text/javascript">
                $('button').css('background', 'red');
            </script>  	
            
//对象互换
                	<body>
                    <button type="button" id="btn">一个按钮</button>

                    <input type="button" name="" id="bbtn" value="又是个按钮" />
                </body>
            </html>
            <script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
            <script type="text/javascript">
                //alert($); //jQuery 对象方法内部
                //JQuery对象
                var obj=$('#btn');
                //alert(obj);
                obj.css('background','red');
                //原生的DOM对象
                var obj2=document.getElementById("btn");
                //alert(obj2);
                obj2.style.fontSize="50px";
                //JQuery对象和原生DOM对象的互换。
                //把JQuery对象转换成原生的DOM对象
                var v=obj.get(0);
                //alert(v);
                v.style.color="#FFF";
                //把元素DOM对象转换成Jquery对象。只需要把原生DOM对象，$(原生DOM对象) 这样来包裹一下。
                var bbtn=document.getElementById("bbtn");
                bbtn.style.color="#FFF";
                //alert(bbtn);
                $(bbtn).css('background','yellow');
            </script>
            
//元素的选择
                <body>
                    <button type="button" id="btn1">按钮</button>
                    <button type="button" class="bbb">按钮</button>
                    <button type="button">按钮</button>
                    <button type="button">按钮</button>
                    <button type="button">按钮</button>
                    <button type="button">按钮</button>
                    <button type="button">按钮</button>
                    <button type="button">按钮</button>
                    <button type="button">按钮</button>

                    <div id="wai">
                        <ul>
                            <li><a href="">asdfasdfasdf</a></li>
                            <li><a href="">asdfasdfasdf</a></li>
                            <li><a href="">asdfasdfasdf</a></li>
                            <li><a href="">asdfasdfasdf</a></li>
                            <li><a href="">asdfasdfasdf</a></li>
                            <li><a href="">asdfasdfasdf</a></li>
                            <li><a href="">asdfasdfasdf</a></li>
                        </ul>
                    </div>

                    <div id="d2">
                        <h1>阿斯顿发斯蒂芬</h1>
                        <h1>阿斯顿发斯蒂芬</h1>
                        <h1>阿斯顿发斯蒂芬</h1>
                        <h1>阿斯顿发斯蒂芬</h1>
                        <h1>阿斯顿发斯蒂芬</h1>
                        <h1>阿斯顿发斯蒂芬</h1>
                        <h1>阿斯顿发斯蒂芬</h1>
                        <h1>阿斯顿发斯蒂芬</h1>
                        <h1>阿斯顿发斯蒂芬</h1>
                        <h1>阿斯顿发斯蒂芬</h1>
                    </div>
                </body>
            </html>
            <script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
            <script type="text/javascript">
                /* var btnArr=document.getElementsByTagName("button");
                for(let i=0;i<btnArr.length;i++){
                    btnArr[i].style.background="blue";
                } */

                //var btn1=$('#btn1');

                //	$('button').css('background','red');
                var arr = $('button');
                //使用Jquery提供的一个遍历方法，来进行遍历
                arr.each(function(index, ele) {
                    //alert(index+"====="+ele);
                    //alert(ele);
                    if (index % 2 == 0) {
                        $(ele).css('background', 'red')
                    } else {
                        $(ele).css('background', 'yellow')
                    }
                })
                //$('选择器')
                //$('div ul li a').css('font-size','50px');
                $('#wai').find('ul').find('li').find('a').css('font-size', '50px');

                $('#d2>h1').css('color','red');

                $('#d2').children('h1').css('background','pink');
            </script>
m0_49324736
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue课程75 axios是只专注于网络请求的库
geyaoisnice的博客
07-01 226
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>D...
原生js操作ajax基本操作
407指导员
12-22 457
原生js操作ajax基本操作 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>AJAX GET 请求</title> <style>
Ajax的get请求
python_god的博客
07-24 9101
AJAX的操作步骤 GET请求 创建 xhr 对象 创建请求 - open() 设置回调函数 - onreadystatechange 1.判断状态 2.接收响应 3.业务处理 发送请求 - send(null) GET请求 示例 以下代码中显示主要功能: 1. a 标签 跳转到新的页面(....../ajax/ajax/02-server/)显示 "这是server02的响应" 2. ...
发送Ajax get请求详解
heliuerya的博客
05-05 1371
/注意这里的innerHTML是JavaScript中的语法，与ajax的XMLHttpRequest对象无关，//当XMLHttpRequest对象的readyState的状态码是4的时候，表示响应结束了。//响应结束之后，一般会有一个HTTP的状态码，HTTP状态码是HTTP协议的一部分，//user：用户名 psw：密码 是进行身份认证用的，这个主要看服务器的需要，不需要的情况下就省略了。//url：请求路径（请求地址）(这是前端服务器发送的请求需要有项目名 "/项目名/xxx")
AJAX学习笔记——发送Ajax的GET请求及GET请求的缓存问题
weixin_62117675的博客
11-08 547
AJAX的GET请求，以及AJAX的GET请求所存在的缓存问题 均是观看老杜视频所记的笔记。希望能对xdm有所帮助。若有补充，还希望大家不要吝啬自己的才华。写在评论区里。
flgl.rar_ajax json jquery_jquery json
09-19
标题“flgl.rar_ajax json jquery_jquery json”和描述中提到的主题主要集中在使用Ajax、JSON以及jQuery技术在前端实现与后端数据交互的过程。这里，我们详细探讨这些关键概念及其在实际开发中的应用。 首先，**...
jQuery Ajax异步处理Json数据详解
10-26
当我们将 `dataType` 设置为 `'json'` 时，jQuery 将自动解析服务器返回的 JSON 格式数据，并将其转化为 JavaScript 对象，这样我们就可以直接在回调函数中使用这些数据。 以下是一个基本的 jQuery AJAX 使用 JSON ...
1.Javascript & jQuery & Ajax & JSON
01-04
JavaScript、jQuery、Ajax和JSON是Web开发中的四个关键概念，它们在构建动态、交互式的网页应用中发挥着重要作用。下面将分别对这四个主题进行详细阐述。 **JavaScript** 是一种轻量级的脚本语言，主要用于客户端的...
gamehut:学校项目-Javascript Ajax JSON jQuery
03-21
【游戏小屋：JavaScript AJAX JSON jQuery 学校项目】 在这个"gamehut"项目中，学生将学习并应用JavaScript的核心概念，以及与之相关的AJAX（异步JavaScript和XML）、JSON（JavaScript对象表示法）和jQuery库。这些...
Ajax-json.rar_JSON_ajax json_java Jquery ajax_javascript_json aj
09-20
例如，当使用jQuery的AJAX方法（如`$.ajax()`或`$.getJSON()`）时，服务器返回的JSON数据可以自动解析成JavaScript对象。 **jQuery的AJAX功能** jQuery是一个流行的JavaScript库，它简化了JavaScript的许多操作，...
jQuery中Ajax的$.get()、$.post()、$.ajax()函数
欢迎来到长风沛雨的博客
10-12 5441
（笔记，黑马Ajax的教程day01）浏览器中提供的所以jQuery 对 XMLHttpRequest 进行了封装，提供了一系列的 Ajax相关的函数，极大的jQuery中发起Ajax请求最常用的三个方法如下↓。
ajax get请求
OVO_LQ_Start的博客
03-04 208
Ajax获取请求的步骤 第一步：创建Ajax的核心对象：XMLHttpRequest对象 new 一个XML对象 这对象是浏览器内置对象，可以直接使用。 第二步：注册回调函数。 调用onreadystatechange的回调函数 程序执行到这里的时候，后面的回调函数并不会执行，只是将函数注册到XMLHttpRequest对象。 等XMLHttpRequest对象的readySate发生改变的时候，...
JS同步程序和异步程序
HXL1611374495的博客
11-13 193
同步和异步： 同步：先煮完饭后，再去烧菜（一个时间段内，事情按照顺序做） 异步：煮饭同时也在烧菜。（一个时间段内，事情不按顺序做） 在程序中，同步和异步的区别就是在于代码的执行顺序。同步代码按照顺序运行，异步代码不按照顺序运行。 1.同步程序：程序从上往下逐行执行，只要中间任何地方出现了程序错误，后面的代码不会再执行 2.异步程序：不会影响主程序中代码的执行，等待主程序中的程序执行完毕再来执行异步程序中的代码，异步程序中如果报错，不影响同步程序中的使用 // 异步：setTimeout和setInt
网页设计中JS与Java的区别
桂林哈秋 - 我想学编程
01-05 5808
在各种网页制作技术论坛中，常常有人询问javascript与Java有什么区别，甚至有人误认为javascript就是Java。javascript与Java确实有一定的联系，但它们并不像我们想象的那样联系紧密，甚至可以肯定地说它们有很大的区别。 　　什么是JavaScript ？ 　　JavaScript 是对 ECMA 262 语言规范的一种实现。本教程的目的就是引导您学习使用 JavaScr
Ajax学习笔记（二）：jQuery 中的 AJAX、axios发送AJAX请求、AJAX-jQuery通用方法发送AJAX请求、fetch发送AJAX请求、同源策略、JSONP、CORS
最新发布
weixin_62764364的博客
04-09 1183
type:设置返回内容格式，xml, html, script, json, text, _default。实现用户校验，服务端响应体是一个函数，先声明handle函数，然后创建script标签，利用src属性请求数据。type:设置返回内容格式，xml, html, script, json, text, _default。AJAX默认遵循同源策略。这是一个跨原的一个请求的设置，匿名的意思，加上这个请求时将不会写在当前域名的。案，它的特点是不需要在客户端做任何特殊的操作，完全在服务器中进行处理，支持。
Ajax——get方法
jwz934738949的博客
09-07 1008
Ajax适用于页面与服务器相互传递数据，并且可以在页面不重新加载的情况下与服务器交换数据 Ajax的实现需要以下5个步骤： 创建异步对象； 设置请求的方式和请求地址； 发送请求； 监听状态的变化； 处理返回结果 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>ajax-get</title> </head> .
$.ajax(）get方法 请求数据 步骤使用实例
Ryhwqxb的博客
04-18 9320
ajax 使用get请求 总结一下ajax请求的操作流程，里面有些关键点还是需要特别注意的！ get请求时，后台通过request.getParameter()获取参数 发送的data即为要拼接的参数 当响应为json格式时，后台需要将数据包装成json对象传输数据 response.setContentType(“text/html;charset=utf-8”) 往浏览器回写数据时设置编码方式...
$.ajax()方法详解及get查询案例
热门推荐
weixin_42306620的博客
06-25 1万+
jquery中的ajax方法参数总是记不住，这里记录一下。1.url:要求为String类型的参数，（默认为当前页地址）发送请求的地址。2.type: 要求为String类型的参数，请求方式（post或get）默认为get。注意其他http请求方法，例如put和delete也可以使用，但仅部分浏览器支持。3.timeout: 要求为Number类型的参数，设置请求超时时间（毫秒）。此设置将覆盖$....
Ajax学习——jQuery下的post和get请求
极_晓的博客
09-24 8401
“要点” jQuery下的post，get请求 常用的jQuery的AJAX方法
项目：jSon和Ajax登录功能
06-01
您可以使用jQuery库来实现Ajax请求和jSon数据解析。下面是一个简单的示例代码： ```javascript //发送Ajax请求 $.ajax({ url: "login.php", method: "POST", data: { username: $("#username").val(), ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值