Web开发之jQuery框架的使用

nuist__NJUPT

于 2022-08-24 21:31:35 发布

阅读量1.7k

点赞数

分类专栏： Javaweb整理文章标签：前端 jquery javascript HTML ajax

本文链接：https://blog.csdn.net/nuist_NJUPT/article/details/126487772

版权

Javaweb整理专栏收录该内容

23 篇文章 3 订阅

订阅专栏

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。jquery它的插件机制特别丰富,在开发中可以选择非常多的相关插件，例如，表单校验插件，树型结构。

7、jQuery的ajax开发基于json

8、Ajax跨域问题

我们使用jQuery框架可以更好地实现以下操作：

html文档操作，对于dom相关操作优化
jquery提供更加方便与丰富事件处理
jquery提供简单动画特效
jquery提供ajax交互

jQuery的官网如下：jQuery官网，需要相关资料可以进入下载。

1、jQuery快速入门

首先导入jQuery文件jquery-1.8.3.min.js，并在script种引入jquery-1.8.3.min.js，最后执行相应的操作即可，具体如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery案例</title>
    <script type="text/javascript" src="WEB-INF/lib/jquery-1.8.3.min.js"></script>
    <script>
        $(function () {
            alert("jQuery入门") ;
        })
        $(function () {
            alert("这是页面加载完成执行的,jquery中可以绑定多次") ;
        })
        
    </script>
</head>
<body>

</body>
</html>

注意:源生的js绑定，它只能绑定一次，而jquery允许绑定多次。

2、jQuery核心函数

通过id得到dom对象和jqury对象，以及dom对象和jquey对象的相互转换如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery案例</title>
    <script type="text/javascript" src="WEB-INF/lib/jquery-1.8.3.min.js"></script>
    <script>

        //得到div的dom对象
        var div = document.getElementById("d") ;
        //得到div的jQuery对象
        var jQueryDiv = $("#d") ;
        //将dom对象转换成jQuery对象
        $(div).html("jQuery对象") ;
        //将jQuery对象转换成dom对象
        jQueryDiv.get(0).innerHTML = "dom对象" ;
        
    </script>
</head>
<body>
<div id ="d"></div>
</body>
</html>

3、jQuery选择器

1）基本选择器

包括根据id查找元素，根据标签名称查找元素，根据class属性查找元素，匹配所有元素，以及将每一个选择器匹配到元素合并后一起返回。其中使用到了jQuery的一些方法，例如：html(),size(),index(),each(),text()等。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery案例</title>
    <script type="text/javascript" src="WEB-INF/lib/jquery-1.8.3.min.js"></script>
    <script>
        $(function () {
            //得到id=d1的元素中的内容显示出
            var id1 = $("#d1").html() ;
            var id1_1 = $("#d1").text() ;
            alert(id1 + "  " + id1_1) ;
            //将class=d2元素中的内容后面添加欢迎你
            $(".d2").each(function (i) {
                $(this).html($(this).html() + "欢迎你") ;
            })
            //得到class=d2的元素有几个
            var size =  $(".d2").size() ;
            alert(size)
            //得到id=d1这个div在整个页面上是第几个.
            var x = $("div").index("#d1") ;
            alert(x) ;
            //将所有的class=d2或id=d1元素中的内容设置为java
            $(".d2,#d1").html("java")  ;
        }) ;
        
    </script>
</head>
<body>
<div id ="d1">id属性</div>
<div class="d2">class属性</div>
<div class="d2">class属性...</div>
<div>div属性</div>
</body>
</html>

2）层级选择器

空格得到元素下的所有子元素(包含直接子元素与间接子元素)
大于号> 只获取直接的子元素
加号+ 只获取直接的一个兄弟元素
波浪线~ 所有的后边的兄弟元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery案例</title>
    <script type="text/javascript" src="WEB-INF/lib/jquery-1.8.3.min.js"></script>
    <script>
        $(function () {
            //获取id=d的所有<a>子元素
            var x  = $("#d a").size() ;
            alert(x) ;
            //获取id=d 的直接<a>子元素
            var y = $("#d>a").size() ;
            alert(y) ;
            //获取id=d第一个<p>兄弟元素
            var z = $("#d+p").html() ;
            alert(z)
            //获取id=d的所有<p>兄弟元素
            var u = $("#d~p").html() ;
            alert(u) ;
            //将id=d下的所有子元素<a>的文字颜色设置成红色
            $("#d a").css("color","red") ;
        }) ;

    </script>
</head>
<body>
<div id ="d">
    <a>Java</a>
    <p><a>matlab</a></p>
    <a>go</a>
</div>
<p>python</p>
<p>c++</p>
</body>
</html>

3）基本过滤器

过滤器它是在基本选择器与层次选择器获取到一批元素后，在进行过滤操作，使用过滤选择器基本都是”:”开头，除了属性过滤选择器。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery案例</title>
    <script type="text/javascript" src="WEB-INF/lib/jquery-1.8.3.min.js"></script>
    <script>
        $(function () {
            //设置表格第一行，显示为红色
            $("tr:first").css("color","red") ;
            //设置除表格第一行外，其余行为蓝色
            $("tr:not(tr:first)").css("color","blue") ;
            $("tr:gt(0)").css("color","blue") ;
            //设置偶数行为黄色，奇数行为红色
            $("tr:even").css("color","yellow") ;
            $("tr:odd").css("color","red") ;
            //设置页面标题颜色为灰色
            $(":header").css("color","gray") ;
        }) ;

    </script>
</head>
<body>
<h1>商品信息</h1>
<table border="1">
    <tr>
        <td>编号</td>
        <td>名称</td>
        <td>价格</td>
        <td>数量</td>
    </tr>
    <tr>
        <td>001</td>
        <td>电脑</td>
        <td>5500</td>
        <td>1000</td>
    </tr>

</table>
</body>
</html>

4）内容过滤器

内容过滤选择器它是根据元素内部文本内容进行选中。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery案例</title>
    <script type="text/javascript" src="WEB-INF/lib/jquery-1.8.3.min.js"></script>
    <script>
        $(function () {
            //设置含有java的div内容为红色
            $("div:contains('java')").css("color","red") ;
            //设置没有字元素的div内容为：这是空的div
            $("div:empty").html("这是空的div") ;
            //设置包含<a>标签的div颜色为蓝色
            $("div:has('a')").css("color","blue") ;
            //设置所有含有子元素span的字体为黄色
            $("span:parent").css("color","yellow") ;
        })

    </script>
</head>
<body>
<div>java</div>
<div>ios</div>
<div></div>
<div>
    <a>python</a>学习
</div>
<div>
    不学习<a>php</a>
</div>
<div>
    <span>android的市场越来越小了</span>
</div>
</table>
</body>
</html>

5）可见性过滤选择器

可见性过滤选择器它匹配display:none或表单中input hidden这样的元素.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery案例</title>
    <script type="text/javascript" src="WEB-INF/lib/jquery-1.8.3.min.js"></script>
    <script>
        $(function () {
            //获取表单中隐藏域的值
            var value = $("input:hidden").val() ;
            alert(value) ;
            //设置表格中所有可见的行元素北京为蓝色
            $("tr:visible").css("background-color","blue") ;
            //获取表格中隐藏行的文本值
             alert($("tr:hidden").text()) ;
             //将因此tr显示
            $("tr:hidden").show() ;
            //将显示的tr隐藏
            $("tr:visible").hide() ;
        })

    </script>
</head>
<body>
<form>
    <input type="text" name="email" /><br/>
    <input type="hidden" name="id"value="10"/>
</form>
<table>
    <tr style="display: none">
        <td>value1</td>
    </tr>
    <tr>
        <td>value2</td>
    </tr>
    <tr>
        <td>value3</td>
    </tr>
</table>
</body>
</html>

6）属性过滤选择器

该过滤器主要根据根据元素的属性来过滤，attr()设置或返回被选元素的属性值。具体如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery案例</title>
    <script type="text/javascript" src="WEB-INF/lib/jquery-1.8.3.min.js"></script>
    <script>
        $(function () {
            //设置所有id属性的div，字体是红色
            $("div[id]").css("color","red") ;
            //获取name=username的value值
            alert($("[name='username']").val()) ;
            //设置所有的多选框被选中
            //$("input[type='checkbox']").attr('checked',true) ;
            //设置class属性中含有class的被选中
            $("input[type='checkbox'][class*='class']").attr('checked',true) ;
            //获取class等于class2的多选框的name属性值
            alert($("input[type='checkbox'][class='class2']").attr("name")) ;

        })

    </script>
</head>
<body>
<div id = "d">这是一个div</div>
<form>
    <input type="text" name="username" value="tom" /><br/>
    <input type="checkbox" class="class1" name="food" value="米饭"/>米饭
    <input type="checkbox" class="class2" name="milk" value="牛奶"/>牛奶
    <input type="checkbox" class="class3" name="vegetables" value="蔬菜"/>蔬菜
</form>
<span id = "s">这是一个span</span>

</body>
</html>

7）子元素过滤选择器

根据子元素顺序来获取。nth-child根据序号来选择，序号是从1开始,也可以设置odd even 根据奇偶来设置，也可以通过倍数来设置，first-child 获取第一个，last-child 获取最后一个，only-child 获取只有一个子元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery案例</title>
    <script type="text/javascript" src="WEB-INF/lib/jquery-1.8.3.min.js"></script>
    <script>
        $(function () {
            //设置列表中第2个li字号为30
            $("ul li:nth-child(2)").css("font-size",30) ;
            //设置列表第一行字体的颜色为红色
            $("ul li:first-child").css("color","red") ;
            //设置列表最后一行字体颜色为蓝色
            $("ul li:last-child").css("color","blue") ;
            //获取ul下只有一个li的信息
            alert($("ul li:only-child").html()) ;
        })

    </script>
</head>
<body>
<ul>
    <li>java</li>
    <li>python</li>
    <li>c</li>
    <li>matlab</li>
</ul>
<ul>
    <li>张无忌</li>
    <li>赵敏</li>
    <li>周芷若</li>
    <li>张三丰</li>
</ul>
<ul>
    <li>武松</li>
</ul>
</body>
</html>

8）表单过滤选择器

表单过滤选择器是用于选取表单中的元素，trim()它是去掉字符串左右空格，

常用事件处理，失去焦点事件 blur(function(){})，click(function(){}) 点击事件，submit() 表单提交。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery案例</title>
    <script type="text/javascript" src="WEB-INF/lib/jquery-1.8.3.min.js"></script>
    <script>
        $(function () { //页面加载完成后执行
            //当username和password失去焦点后判断录入不能为空
            $(":text,:password").blur(function () {
                //获取数据
                var value = $(this).val();
                if(value.trim() == ""){
                    alert($(this).attr("name") + "不能为空") ;
                }
            }) ;
            //对按钮添加点击事件
            $(":button").click(function () {
                $("form").submit() ;
            })
        })

    </script>
</head>
<body>
<form>
    用户名:<input type="text" name="username"><br/>
    密码:<input type="password" name="password"><br/>
    <input type="button" value="按钮">
</form>
</body>
</html>

9）表单对象属性过滤选择器

checked它是用于radio,checkbox 判断选中，selected它是用于select下拉框选中。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery案例</title>
    <script type="text/javascript" src="WEB-INF/lib/jquery-1.8.3.min.js"></script>
    <script>
        $(function () { //页面加载完成后执行
           //点击按钮，打印radio，checkbox，select中选中的值
            $(":button").click(function () {
                alert($(":radio:checked").val()) ;
                $(":checkbox:checked").each(function () {
                    alert($(this).val())
                }) ;
                alert($("select option:selected").val()) ;
            }) ;


        })

    </script>
</head>
<body>
<form>
    性别:<input type="radio" name="sex" value="man">男
    <input type="radio" name="sex" value="woman">女<br/>
    爱好:<input type="checkbox" name="hobby" value="basketball">篮球
    <input type="checkbox" name="hobby" value="football">足球
    <input type="checkbox" name="hobby" value="volleyball">网球<br/>
    城市:<select>
    <option value="">请选择...</option>
    <option value="beijing">北京</option>
    <option value="shanghai">上海</option>
    <option value="nanjing">南京</option><br/>
</select>
    <input type="button" value="提交" >
</form>
</body>
</html>

4、jQuery的DOM操作

1）插入操作

主要分为内部插入和外部插入两种，具体如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery案例</title>
    <script type="text/javascript" src="WEB-INF/lib/jquery-1.8.3.min.js"></script>
    <script>
        $(function () { //页面加载完成后执行
            //内部插入
            //在select开始选项前添加一项
           // $("#city").prepend("<option value='shenzhen'>深圳</option>") ;
            //在select选项最后一项添加一个
            //$("#city").append("<option value='guangzhou'>广州</option>") ;
            //外部插入
            $("#city option:first").before($("<option value='shenzhen'>深圳</option>"))  ;
            //$("#city option:last").after($("<option value='guangzhou'>广州</option>"))  ;
            $("<option value='guangzhou'>广州</option>").insertAfter($("#city option:last")) ;
        })

    </script>
</head>
<body>
<form>
    城市:<select id = "city">
    <option value="beijing">北京</option>
    <option value="shanghai">上海</option>
    <option value="nanjing">南京</option><br/>
</select>
    <input type="button" value="提交" >
</form>
</body>
</html>

2）删除操作

remove和detach都是删除元素,remove连注册事件也删除,detach是不删除注册事件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery案例</title>
    <script type="text/javascript" src="WEB-INF/lib/jquery-1.8.3.min.js"></script>
    <script>
        $(function () { //页面加载完成后执行
           //$("#d1").empty() ; //将元素的所有子元素删除
            //给p注册事件
            $("#d1 p").click(function () {
                alert("ppppppppp") ;
            }) ;
            //remove和detach都是删除元素,remove连注册事件也删除,detach是不删除注册事件
            $("#d1 p").remove() ;
            $("#d1 p").detach() ;
            //在d2中的div追加标签p
            $("#d2").append(p) ;
        })

    </script>
</head>
<body>
<div id="d1">
    <p>pppppp</p>
    <span>sssss</span>
    <div id="d2"></div>
</div>
</body>
</html>

3）综合练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery案例</title>
    <script type="text/javascript" src="WEB-INF/lib/jquery-1.8.3.min.js"></script>
    <script>
        $(function () { //页面加载完成后执行
            $(":button").click(function () {
                //创建一个tr
                var tr = $("<tr></tr>") ;
                //创建四个td,并向其中添加内容
                var td1 = $("<td></td>") ;
                td1.append($("#username").val()) ;
                var td2 = $("<td></td>") ;
                td2.append($("#phone").val());
                var td3 = $("<td></td>") ;
                td3.append($("#email").val()) ;
                var td4 = $("<td></td>") ;
                //创建一个链接
                var a = $("<a href ='javascript:void(0)'>删除</a>") ;
                td4.append(a) ;
                //完成删除功能
                a.click(function () {
                    $(this).parents("tr").remove() ;
                })
                //td放到tr中
                tr.append(td1).append(td2).append(td3).append(td4) ;
                //tr放到table中
                $("#tab").append(tr) ;
            }) ;
        })

    </script>
</head>
<body>
<div align="center">
<table id="tab" border="1">
    <tr>
        <td>姓名</td>
        <td>电话</td>
        <td>邮箱</td>
        <td>删除</td>
    </tr>
</table>
    <hr>
    姓名:<input type="text" id="username"/>
    电话:<input type="text" id="phone"/>
    邮箱:<input type="text" id="email"/>
    <input type="button" value="添加"/>
</div>
</body>
</html>

5、jQuery事件处理

1）jQuery事件

Jquery中的事件与传统的javascript中事件区别:Jquery中事件允许绑定多个函数，而javascript中一个事件只能绑定一个函数.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery案例</title>
    <script type="text/javascript" src="WEB-INF/lib/jquery-1.8.3.min.js"></script>
    <script>
        //传统的js方式只能绑定单个事件
        window.onload = function(){
            document.getElementById("btn3").onclick = function () {
                alert("btn3") ;
            };
        } ;
        $(function () { //页面加载完成后执行
            //jQuery可以同时绑定多个事件
            $("#btn1").click(function () {
                alert("btn1") ;
            }) ;
            $("#btn2").click(function () {
                alert("btn2") ;
            }) ;

        })

    </script>
</head>
<body>

<input type="button" id="btn1" value="添加"/>
<input type="button" id="btn2" value="删除"/>
<input type="button" id="btn3" value="重置"/>

</body>
</html>

2)传统的JS事件绑定与jQuery事件绑定

bind只能为存在的元素进行事件绑定，而live可以为没有存在，后续通过代码新添加的元素进行事件绑定。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery案例</title>
    <script type="text/javascript" src="WEB-INF/lib/jquery-1.8.3.min.js"></script>
    <script>
        //传统的js方式只能绑定单个事件
        window.onload = function(){
            document.getElementById("btn3").onclick = function () {
                alert("btn3") ;
            };
        } ;

        $(function () { //页面加载完成后执行
            //jQuery的简化的绑定事件方法
            $("#btn1").click(function () {
                alert("btn1") ;
            }) ;
            //bind用于绑定事件
            $("#btn2").bind("click",function(){
                alert("btn2") ;
            }) ;
            //unbind用于解绑
            $("#btn2").unbind("click") ;
            //使用live进行事件绑定
            $("#btn2").live("click",function () {
                alert("btn2") ;
            }) ;
            //使用die进行解绑
            $("#btn2").die("click") ;

        })

    </script>
</head>
<body>

<input type="button" id="btn1" value="添加"/>
<input type="button" id="btn2" value="删除"/>
<input type="button" id="btn3" value="重置"/>
<input type="button" id="btn4" value="选择" onclick="fun1()">
<script>
    function fun1() {
        alert("btn4") ;
    }
</script>
</body>
</html>

3）一次性事件和自动触发

one()是一次性触发，trigger()在每一个匹配的元素上触发某类事件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery案例</title>
    <script type="text/javascript" src="WEB-INF/lib/jquery-1.8.3.min.js"></script>
    <script>
        $(function () { //页面加载完成后执行
            //一次性事件
            $("#btn1").one("click",function () {
                alert("btn1")  ;
            }) ;
            //给按钮注册一个mouseover事件
            $("#btn1").bind("mouseover",function () {
                $(this).trigger("click") ;
            }) ;
        })

    </script>
</head>
<body>

<input type="button" id="btn1" value="添加"/>
<input type="button" id="btn2" value="删除"/>
<input type="button" id="btn3" value="重置"/>
<input type="button" id="btn4" value="选择" onclick="fun1()">
<script>
    function fun1() {
        alert("btn4") ;
    }
</script>
</body>
</html>

4）事件切换

hover这个操作它可以绑定两个函数，当触发mouseover时第一个函数执行，当触发mouseout时第二个函数执行。toggle用于绑定两个或多个事件处理器函数，以响应被选元素的轮流的 click 事件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery案例</title>
    <script type="text/javascript" src="WEB-INF/lib/jquery-1.8.3.min.js"></script>
    <script>
        $(function () { //页面加载完成后执行
            //先设置div隐藏
            $("div").hide() ;
            //给h1添加hover操作
            $("h1").hover(function () {
                //鼠标移入显示
                $("div").fadeIn(2000) ;
            },function () {
                //鼠标移出隐藏
                $("div").fadeOut(2000) ;
            }) ;
        })

    </script>
</head>
<body>
<h1>这是测试</h1>
<div>这是一个div</div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery案例</title>
    <script type="text/javascript" src="WEB-INF/lib/jquery-1.8.3.min.js"></script>
    <script>
        $(function () { //页面加载完成后执行
            //通过点击轮流显示三张照片
            $("img").toggle(function () {
                $(this).attr("src","2.png") ;
            },function () {
                $(this).attr("src","3.png") ;
            },function () {
                $(this).attr("src","1.png") ;
            }) ;
        })

    </script>
</head>
<body>
<img src="1.png" width="131" height="40">
</body>
</html>

6、jQuery的ajax开发

ajax是异步js和xml，一种创建交互式网页应用的网页开发技术，可以实现网页异步数据的更新，即不重新加载整个网页的情况下，对网页部分内容进行更新。

1.$.ajax()它是jquery提供的最基本的ajax编程方式。它的功能比较强大，但是使用比较麻烦，一般不使用，它是将远程数据加载到XMLHttpRequest对象中。

2.load get post 它们简化了$.ajax操作，get post针对get与post请求的，它们是开发中使用的比较多。

3.getScript getJSON 它们是用于解决ajax跨域问题的。

1)$.ajax介绍

使用$.ajax完成向服务器发送请求，如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery案例</title>
    <script type="text/javascript" src="jquery-1.8.3.js"></script>
    <script>
        $(function () { //页面加载完成后执行
            $("#username").blur(function () {
                //向服务器发送请求
                var usernameValue = $("#username").val() ;
                var url = "/servlet_war_exploded/LoadServlet" ;
                //使用$.ajax完成操作
                $.ajax({
                    url:url,
                    data:{'username':usernameValue},
                    type:"post",
                    dataType:"html",
                    success:function (data) { //参数data接收了服务器响应的数据
                        $("#username_span").html(data) ;
                    }
            }) ;
            });
        })

    </script>
</head>
<body>
<input type="text" name="username" id="username"> <span id = "username_span"></span><br/>
<input type="password" name = "password"><br/>
</body>
</html>

2）$.get与$.post介绍

$.get与$.post它们针对于get与post请求，向服务器发送请求。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery案例</title>
    <script type="text/javascript" src="jquery-1.8.3.js"></script>
    <script>
        $(function () { //页面加载完成后执行
            $("#username").blur(function () {
                //向服务器发送请求
                var usernameValue = $("#username").val() ;
                var url = "/servlet_war_exploded/LoadServlet" ;
                //使用$.get完成操作
                $.get(url,{"username":usernameValue},function (data) {
                    $("#username_span").html(data) ;
                },"html") ;
                //使用$.post完成操作只需要把get换成post

            });
        })

    </script>
</head>
<body>
<input type="text" name="username" id="username"> <span id = "username_span"></span><br/>
<input type="password" name = "password"><br/>
</body>
</html>

7、jQuery的ajax开发基于json

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式，json简单说就是javascript中的对象和数组.Fastjson是阿里提供的一个开源json插件，它可以将java的对象转换成json数据,也可以将一个json转换成java对象(不常用).

Fastjson使用介绍

导入相应的jar包
fastjson将java对象转换成json数据，String json=JSONObject.toJsonString(java对象);

1）将java对象和list集合转换为json

首先创建一个java的实体类。

public class Project {
    private int id ;
    private String name ;
    private int count ;
    private double price ;

    public int getId() {
        return id;
    }

    public void setId(int id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public int getCount() {
        return count;
    }

    public void setCount(int count) {
        this.count = count;
    }

    public double getPrice() {
        return price;
    }

    public void setPrice(double price) {
        this.price = price;
    }
}

写一个测试类，使用Fastjson将java对象和list集合转换为json，如下：

import com.alibaba.fastjson.JSONObject;

import java.util.ArrayList;
import java.util.List;

public class JsonTest {
    public static void main(String[] args) {
        test() ;
        test1() ;
    }

    private static void test1() {
        //将一个list集合转换成json
        List<Project> list = new ArrayList<Project>() ;
        Project project1 = new Project() ;
        project1.setId(1);
        project1.setCount(100);
        project1.setName("电视机") ;
        project1.setPrice(2000.00);
        Project project2 = new Project() ;
        project2.setId(2);
        project2.setCount(200);
        project2.setName("洗衣机机") ;
        project2.setPrice(3000.00);
        list.add(project1) ;
        list.add(project2) ;
        String json = JSONObject.toJSONString(list) ;
        System.out.println(json);
    }

    private static void test() {
        Project project = new Project() ;
        project.setId(1);
        project.setCount(100);
        project.setName("电视机") ;
        project.setPrice(2000.00);
        //将一个java对象转换成json
        String json = JSONObject.toJSONString(project) ;
        System.out.println(json);

    }
}

2）案例1-显示商品信息

创建一个html页面，页面上有一个”显示商品”连接
当我们点击页面上的连接时，向服务器发送ajax请求，获取商品信息.
服务器得到商品信息List<Product>,将集合信息转换成json响应到浏览器端。
在页面上来处理服务器响应回来的数据。

页面处理ajax向服务器发送的请求，以及将json数据封装成表格响应到浏览器如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>显示商品信息</title>
    <script type="text/javascript" src="jquery-1.8.3.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#a").toggle(function () {
                //向服务器发送请求得到商品信息并显示
                var url = "/servlet_war_exploded/ProductServlet" ;
                $.post(url,function (data) {
                   var ObjectJson = eval(data) ;
                   //处理响应的json数据，封装成table的html代码
                    var tab = $("<table border='1'><tr><td>编号</td><td>名称</td><td>数量</td><td>价格</td></tr></table>") ;
                    for(var i=0; i<ObjectJson.length; i++){
                        var tr = $("<tr><td>"+ObjectJson[i].id+"</td><td>"+ObjectJson[i].name+"</td><td>"+ObjectJson[i].count+"</td><td>"+ObjectJson[i].price+"</td></tr>") ;
                        tab.append(tr) ;
                    }
                    $("#content").append(tab) ;
                    $("#content").show() ;
                    },"json") ;
            },function () {
                //将商品信息进行隐藏
                $("#content").hide() ;
                //清空div
                $("#content").html("") ;
            })
        })
    </script>
</head>
<body>
<a href="javascript:void(0)" id="a">显示商品信息</a>
<hr>
<div id="content">
</div>
</body>
</html>

定义的一个实体Product类，用于封装数据：

public class Product {
    private int id ;
    private String name ;
    private int count ;
    private double price ;

    public int getId() {
        return id;
    }

    public void setId(int id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public int getCount() {
        return count;
    }

    public void setCount(int count) {
        this.count = count;
    }

    public double getPrice() {
        return price;
    }

    public void setPrice(double price) {
        this.price = price;
    }
}

处理页面请求并相应json数据的servlet，如下：

import com.alibaba.fastjson.JSONObject;
import com.domain.Product;
import com.domain.Project;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;

public class ProductServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doGet(request,response);
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        response.setCharacterEncoding("utf-8");
        request.setCharacterEncoding("utf-8");
        List<Product> list = new ArrayList<Product>() ;
        Product p1 = new Product() ;
        p1.setId(1);
        p1.setCount(100);
        p1.setName("电视机") ;
        p1.setPrice(2000.00);
        Product p2 = new Product() ;
        p2.setId(2);
        p2.setCount(200);
        p2.setName("洗衣机机") ;
        p2.setPrice(3000.00);
        list.add(p1) ;
        list.add(p2) ;
        //将数据转换成json响应到浏览器
        String json = JSONObject.toJSONString(list) ;
        response.getWriter().write(json);

    }
}

最后需要在web.xml中配置用到的servlet，如下：

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
         version="4.0">
    <servlet>
        <servlet-name>ProductServlet</servlet-name>
        <servlet-class>com.controller.ProductServlet</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>ProductServlet</servlet-name>
        <url-pattern>/ProductServlet</url-pattern>
    </servlet-mapping>


</web-app>

3）案例2-省二级联动

会向服务器发送两次请求，第一次是页面加载完成后，获取省份信息，选择省份后，向服务器发送请求来获取相关的城市信息。
省份与城市信息，Province对应省份信息类，City对应城市信息类，我们自定义相关的信息Map<Province,List<City>>用来存储省份与城市信息。

1.完成服务器端操作

a.创建Province与City类

b.创建Map集合来封装数据

c.创建一个Servlet来处理浏览器端的请求。

2.关于浏览器端操作

a.页面加载完成后，要向服务器发送请求，来获取省份信息，添加到省份下拉框中。

b.当选择某一个省份后,chang事件触发，根据选择的省份，向服务器发送请求来获取对应的城市信息添加到城市的下拉框中。

服务器端的实体类City代码如下：

public class City {
    private int id ;
    private String name ;

    public int getId() {
        return id;
    }

    public void setId(int id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }
}

服务器端实体类Province代码：

public class Province {
    private int id ;
    private String name ;

    public int getId() {
        return id;
    }

    public void setId(int id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }
}

服务器端的servlet代码，用于封装数据和响应请求，如下：


import com.alibaba.fastjson.JSONObject;
import com.domain.City;
import com.domain.Product;
import com.domain.Province;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.*;

@WebServlet(name = "CityServlet")
public class CityServlet extends HttpServlet {
    Map<Province, List<City>> map = new HashMap<>() ;
    @Override
    public void init() throws ServletException {

        //创建省份
        Province p1 = new Province() ;
        p1.setId(1);
        p1.setName("黑龙江");
        City c11 = new City() ;
        c11.setId(1);
        c11.setName("哈尔滨");
        City c12 = new City() ;
        c12.setId(2);
        c12.setName("大庆");
        List<City> l1 = new ArrayList<City>() ;
        l1.add(c11) ;
        l1.add(c12) ;
        map.put(p1,l1) ;


        Province p2 = new Province() ;
        p2.setId(2);
        p2.setName("吉林");
        City c21 = new City() ;
        c21.setId(1);
        c21.setName("长春");
        City c22 = new City() ;
        c22.setId(2);
        c22.setName("四平");
        List<City> l2 = new ArrayList<City>() ;
        l2.add(c21) ;
        l2.add(c22) ;
        map.put(p2,l2) ;


        Province p3 = new Province() ;
        p3.setId(3);
        p3.setName("辽宁");
        City c31 = new City() ;
        c31.setId(1);
        c31.setName("沈阳");
        City c32 = new City() ;
        c32.setId(2);
        c32.setName("大连");
        List<City> l3 = new ArrayList<City>() ;
        l3.add(c31) ;
        l3.add(c32) ;
        map.put(p3,l3) ;

    }

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doGet(request,response);
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String method = request.getParameter("method") ;
        response.setCharacterEncoding("utf-8");
        request.setCharacterEncoding("utf-8");
        if(method.equals("pro")){
            //获取所有的省份信息,将省份信息封装到集合,转换成json数据,响应到浏览器
            Set<Province> set = map.keySet() ;
            String json = JSONObject.toJSONString(set) ;
            response.getWriter().write(json);
        }
        if(method.equals("city")){
            //获取省份名称
            String pname = request.getParameter("pname") ;
            //遍历省份，根据省份获取对应的城市集合
            for(Province p : map.keySet()){
                if(pname.equals(p.getName())) {
                    List<City> city1 = map.get(p);
                    //转换成json数据响应到浏览器
                    String json1 = JSONObject.toJSONString(city1) ;
                    response.getWriter().write(json1);
                    break ;
                }
            }
        }
    }
}

浏览器端发送请求，并根据响应显示的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>省市二级联动</title>
    <script type="text/javascript" src="jquery-1.8.3.js"></script>
    <script type="text/javascript">
        $(function () {
            //当页面加载完成,向服务器发送请求并获得省份信息
            var url = "/servlet_war_exploded/city" ;
            $.post(url+"?method=pro",function (data) {
                var objJson = eval(data) ;
                for(var i=0; i<objJson.length; i++){
                    //省份名称
                    var name = objJson[i].name ;
                    //生成省份的option添加到省份下拉列表
                    $("#province").append("<option>"+name+"</option>") ;
                }
            },"json");
            //当选择了省份,获取省份对应的城市信息
            $("#province").change(function () {
                //先清理之前的
                $("#city").html("<option>---选择城市---</option>") ;
                //获取省份对应的城市信息并显示在浏览器
                var pname = $(this).val() ;
                $.post(url+"?method=city",{"pname":pname},function (data) {
                    var jsons = eval(data) ;
                    //alert(jsons.length) ;
                    //  for(var i=0; i<jsons.length; i++){
                    //      $("#city").append("<option>"+jsons[i].name+"</option>") ;
                    //  }
                    $(jsons).each(function () {
                        var name = this.name ;
                        $("#city").append("<option>"+name+"</option>") ;
                    }) ;
                },"json") ;

            });
        });
    </script>
</head>
<body>
<select id="province">
    <option>---请选择省份---</option>
</select>
<select id="city">
    <option>---请选择城市---</option>
</select>
</body>
</html>

配置servlet的xml代码如下：

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
         version="4.0">
    <servlet>
        <servlet-name>CityServlet</servlet-name>
        <servlet-class>com.controller.CityServlet</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>CityServlet</servlet-name>
        <url-pattern>/city</url-pattern>
    </servlet-mapping>


</web-app>

8、Ajax跨域问题

跨域它是不同的域名(服务器)之间的相互的资源的访问。当协议，域名，端口号任意一个不相同，它们就是不同的域。正常情况下，因为浏览器安全问题，不同域的资源是不可以访问的。

什么情况下会使用到跨域？

一般情况是在自己的内部的工程中会出现跨域情况。

有三种解决方案:

1.代理方案前端页面访问本地的服务器，本地服务器访问其它域的资源，它是服务器端的跨域问题解决。
2.jsonp JSONP(JSON with Padding)是JSON的一种“使用模式”，可用于解决主流浏览器的跨域数据访问的问题。由于同源策略，一般来说位于 server1.example.com 的网页无法与不是 server1.example.com的服务器沟通，而 HTML 的<script> 元素是一个例外。利用 <script> 元素的这个开放策略，网页可以得到从其他来源动态产生的 JSON 资料，而这种使用模式就是所谓的 JSONP。用 JSONP 抓到的资料并不是 JSON，而是任意的JavaScript，用 JavaScript 直译器执行而不是用 JSON 解析器解析。

3.XHR2全称XMLHttpRequest Level2它是HTML5提供的方法，一般是在移动开发中使用。

nuist__NJUPT

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
0
评论
Web开发之jQuery框架的使用

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。jquery它的插件机制特别丰富,在开发中可以选择非常多的相关插件，例如，表单校验插件，树型结构。
复制链接

扫一扫