JSON和JQuery

Yuan_bao24

于 2019-12-28 10:08:52 发布

阅读量278

点赞数

本文链接：https://blog.csdn.net/nongxi6701/article/details/100606261

版权

JSON

1.javascript object notation 轻量级的数据交换格式

2.json语法：

【】数组 {}对象 "" 属性名或字符串类型的值：表示属性和值之间的分隔符，多个属性的间隔符或者多个元素的间隔符

实例展示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>json</title>
</head>
<body>
<script type="text/javascript">
    var p=new Object();
    p.name="yuanbao";
    p.age=20;
    p.address="beijing";
    console.log(p.name+".."+p.age+".."+p.address);
    var p1={name:"yuanbao",age:21,address:"tianjin"};
    console.log(p1.name+".."+p1.age+".."+p1.address);
    var json='{name:"yuanbao",age:21,address:"tianjin"}';//就是个字符换

    var p2=JSON.parse(json);
    console.log(p2.name+".."+p2.age+".."+p2.address);
    //要实现从对象转换为json字符串，使用json.stringify（）
    var arr=["北京","上海","南京"];
    var arr2=[{name:"xxx",age:20},{name:"yyy",age:22},{name:"zzz",age:30}];

</script>

</body>
</html>

json解析

public class JackSonTest {
    //解析
    @Test
    public void test1() throws Exception{
        // 对象嵌套数组嵌套对象
        String json1 = "{\"id\":1,\"name\":\"JAVAEE-1703\",\"stus\":[{\"id\":101,\"name\":\"刘一\",\"age\":16}]}";
        // 数组
        String json2 = "[\"北京\",\"天津\",\"杭州\"]";
        //1、创建对象映射
        ObjectMapper mapper=new ObjectMapper();
        Grade grade=mapper.readValue(json1, Grade.class);
        System.out.println(grade);
        //2、json字符串转成集合
        ArrayList<String> list=mapper.readValue(json2, 
                new TypeReference<ArrayList<String>>() {
        });
        System.out.println(list);

    }
    //生成
    @Test
    public void test2() throws JsonProcessingException{
        ArrayList<Student> list=new ArrayList<>();
        for(int i=1;i<3;i++){
            list.add(new Student(101+i, "码子", 20+i));
        }
        Grade grade=new Grade(100001,"张三", list);
        ObjectMapper mapper=new ObjectMapper();
        //将对象转换为JSON格式字符串
        String json=mapper.writeValueAsString(grade);
        System.out.println(json);
    }
}

Ajax

一种无需重新加载整个页面的情况下，能够实现局部更新的技术

ajax=异步javascript和xml 用于创建快速动态网页的技术

*使用ajax发送请求的四个步骤：

1.创建xmlhttprequest

	var xhr;
			if(window.XMLHttpRequest){
				xhr=new XMLHttpRequest();
			}else{
				//ie
				xhr=new ActiveXObject("Microsoft.XMLHTTP");
			}

2.设置onreadystatechange回调函数

xhr.onreadystatechange=function(){
				//处理数据  readyState==4表示服务器响应完毕    状态码 200  404  500  302
				if(xhr.readyState==4&&xhr.status==200){
					document.getElementById("mydiv").innerHTML=xhr.responseText;
				}
			}

3.open（）打开连接

xhr.open("GET","book.xml",true);

4.send发送请求

xhr.send();

Ajax的使用

****模拟登陆验证，验证是否可以注册利用ajax技术进行动态验证

1.编写注册页面

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>注册页面</title>
    <style type="text/css">
        .red{
            color: red;
        }
        .green{
            color: green;
        }
    </style>>
</head>
<body>
<h1>用户注册</h1>
<br action="" method="post">
    <input type="text" name="username" placeholder="请输入用户名" onblur="checkuser(this)"><span id="userspan"></span><br/>
    <input type="password" name="password" placeholder="请输入密码"></br>
    <input type="password" name="repassword" placeholder="请再次输入密码"><br/>
    <input type="email" name="email" placeholder="请输入邮箱"><br/>
    <input type="tel" name="phone" placeholder="请输入电话"><br/>
    <button type="submit">提交</button>
</form>
<script type="text/javascript">
    function checkuser(obj) {
        var username=obj.value;
        if (username==null||username.trim().length==0){
            return;
        }
        //1.创建xhr
        var xhr=new XMLHttpRequest();
        //2.设置回调函数
        xhr.onreadystatechange=function () {
            if (xhr.readyState==4&&xhr.status==200){
                var username=document.getElementById("userspan");
                if (xhr.responseText=="1"){
                    userspan.innerHTML="用户以及存在";
                    userspan.className="red";
                } else {
                    userspan.innerHTML="恭喜创建成功";
                    userspan.className="green";
                }
            }
        }
        //3.open
        xhr.open("get","checkuser?username="+username+"&n="+Math.random(),true)
        //4.send
        xhr.send();
    }
</script>

</body>
</html>

JQuery

1.简介是一种快速简洁的javascript库，封装了常用的javascript功能代码。

核心特征可以总结为具有独特的链式语法和短小清晰的多功能接口

具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。

2.jquery是一个jsp函数库用的时候导包到web目录下，

3.使用的两个方式，导包跟使用别的公司的cdn

4.语法 a.$(selector).action()

b.$(匿名函数)

Yuan_bao24

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JSON和JQuery

JSON1.javascript object notation 轻量级的数据交换格式2.json语法：【】数组 {}对象 "" 属性名或字符串类型的值：表示属性和值之间的分隔符，多个属性的间隔符或者多个元素的间隔符实例展示：<!DOCTYPE html><html lang="en...
复制链接

扫一扫