jQuery学习笔记之五

最新推荐文章于 2020-07-09 16:47:57 发布

神奇的海螺先生

最新推荐文章于 2020-07-09 16:47:57 发布

阅读量207

点赞数

分类专栏： jQuery 前端文章标签： jquery

本文链接：https://blog.csdn.net/qq_38087648/article/details/78431438

版权

jQuery 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

前端

4 篇文章 0 订阅

订阅专栏

jquery对ajax编程的支持

load(url) order.jsp

作用：将服务器返回的数据直接插入到符合要求的节点之上，相当于obj.innerHTML = 服务器返回的数据
用法：$obj.load(请求地址,[请求参数]);
请求地址：服务器上某个组件的地址
请求参数：有两种形式，第一种形式是请求字符串，”name = zs&age=22”第二种对象的形式：{‘name’:’zs’,’age’:’22’}
load方法：当没有请求参数时，会使用GET方式向服务器发请求，如果有请求参数，会使用post方式向服务器发送请求。

xml配置

servlet

    request.setCharacterEncoding("utf-8");
    response.setContentType("text/html;charset=utf-8");
    PrintWriter out = response.getWriter();
    String uri = request.getRequestURI();
    String action = uri.substring(uri.lastIndexOf("/"),uri.lastIndexOf("."));
    if(action.equals("/priceInfo")) {
    String airline = request.getParameter("airline");
    if(airline.equals("CA1000")) {
    out.println("头等舱：￥2400<br/>商务舱：￥2200");
    }else {
    out.println("头等舱：￥2200<br/>商务舱：￥2000");
    }
    }

jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type = "text/javascript" src = "js/jquery-1.7.min.js"></script>
<script type="text/javascript">
    $(function(){
        $('a.s1').toggle(function(){
            var airline = $(this).parent().siblings().eq(0).text();
            $(this).next().load('priceInfo.do','airline='+ airline);
            //$(this).next().load('priceInfo.do',{'airline':airline});
            $(this).html('显示经济舱价格');
        },function(){
            $(this).next().empty();
            $(this).html('显示所有票价');
        });
    });
</script>
</head>
<body>
    <table cellpadding="0" cellspacing="0" width="60%" border="1">
        <tr>
            <td>航班号</td>
            <td><a href="#">机型</a></td>
            <td>起飞时间</td>
            <td>到达时间</td>
            <td>&nbsp;</td>
            <td>经济舱价格</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>CA1000</td>
            <td><a href="#">空客320</a></td>
            <td>18:00am</td>
            <td>20:00am</td>
            <td><a href="javascript:;" class = "s1">显示所有票价</a>
            <div></div>
            </td>
            <td>￥800</td>
            <td><input type="button" value ="订票"/></td>
        </tr>
        <tr>
            <td>MU1494</td>
            <td><a href="#">波音777</a></td>
            <td>8:00am</td>
            <td>10:00am</td>
            <td><a href="javascript:;" class = "s1">显示所有票价</a>
            <div></div>
            </td>
            <td>￥800</td>
            <td><input type="button" value ="订票"/></td>
        </tr>
    </table>
</body>
</html>

$.get(url,[data],[callback],[type]):其中，callback格式 function stock.jsp

作用：使用get方式向服务器端发请求
用法：$.get(url,[data],[callback],[type])
url：请求地址
[data]：请求参数
[callback]：回调函数function(data,statusText)
data:是服务器返回的数据
statusText：是服务器处理的状态
[type]：服务器返回的数据的类型 html:返回的是一个html内容
text：返回的是text
json：返回的是json字符串
xml：返回的是一个xml文档
script：返回的是一个javascript脚本

$.post()格式同上

使用post方式向服务器端发请求

配置xml

servlet层

Stock类

package bean;

public class Stock {
    private String name;
    private String code;
    private double price;
    public String getName() {
        return name;
    }
    public void setName(String name) {
        this.name = name;
    }
    public String getCode() {
        return code;
    }
    public void setCode(String code) {
        this.code = code;
    }
    public double getPrice() {
        return price;
    }
    public void setPrice(double price) {
        this.price = price;
    }

}

else if(action.equals("/quoto")) {
    //模拟生成八只股票的价格信息
    //然后将这些信息转换成json字符串，并发送到客户端
    List<Stock> stocks = new ArrayList<Stock>();
    Random r = new Random();
    DecimalFormat df = new DecimalFormat("#.##");
    for(int i=0;i<8;i++) {
    Stock s = new Stock();
    s.setName(("深发展")+r.nextInt(10));
    s.setCode("60001"+r.nextInt(10));
    double price = r.nextInt(100)+r.nextDouble();
    s.setPrice(Double.parseDouble(df.format(price)));
    stocks.add(s);
    }
    JSONArray arr = JSONArray.fromObject(stocks);
    String jsonStr = arr.toString();
    out.println(jsonStr);
    }

jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type = "text/javascript" src = "js/jquery-1.7.min.js"></script>
<script type = "text/javascript" src = "js/my.js"></script>
<title>Insert title here</title>
<style type="text/css">
    #d1{
        width:500px;
        height: 550px;
        background-color: #fff8dc;
        border: 1px solid red;
        margin-left: 300px;
        margin-top: 100px;
    }
    table {
        font-size:18px;
        font-style:italic;
}
</style>
<script type="text/javascript">
    $(function(){
        setInterval(quoto,3000);
    });
    function quoto(){
        $.post('quoto.do',function(data){
            //$.get()$.post $.ajax会自动将服务器返回的json字符串转换成js对象
            //data是服务器返回的数据
            $('#tb1').empty();
            for(i = 0;i<data.length;i++){
                $('#tb1').append('<tr><td>'+data[i].name+'</td><td>'+data[i].code+'</td><td>'+data[i].price+'</td></tr>');
            }
        },'json');
    }
</script>
</head>
<body style = "font-size:30px;font-style: italic;">
    <div id = "d1">
        <div id = "d2">股票实时行情</div>
        <div>
            <table cellpadding="0" cellspacing="0" width="100%">
                <thead>
                    <tr>
                        <td>股票名称</td>
                        <td>股票代码</td>
                        <td>股票价格</td>
                    </tr>
                </thead>
                <tbody id = "tb1"> 
                </tbody>
            </table>
        </div>
    </div>
</body>
</html>

$.ajax(options):options是一个形如{key1:value1,key2:value2}

用法：$.ajax({}); 选项参数如下：
url(string):请求地址
type(string):GET/POST
data(object/string):请求参数
dataType(string):预期服务器返回的数据类型，一般有：
html，text，json
success(function):
data:服务器返回的数据
textStatus：描述状态的字符串
error(function):
xhr:底层的XMLHttpRequest对象
案例，搜索时根据关键字会出现相应提示

xml

servlet

else if(action.equals("/find")) {
    String key = request.getParameter("key");
    if(key.equals("小")) {
    out.println("小学生作文,小米,小米2,小学生守则");
    }else if(key.equals("小学")) {
    out.println("小学生早恋,小学生上吊,小学生哭爹喊娘");
    }
    }
    out.close();

jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type = "text/javascript" src = "js/jquery-1.7.min.js"></script>
<title>Insert title here</title>
<style type="text/css">
    table {
    margin-left: 200px;
    margin-top: 80px;
    font-size: 24px;
}
    .select{
        background-color: red;
    }
</style>
<script type="text/javascript">
    $(function(){
    //版本产生的bug导致切换中文时，keyup无法使用
    $('#key').keyup(function(){
    $.ajax({
    type:'post',
    url:"find.do",
    data:{"key":$("#key").val()},
    dataType:"text",
    success:function(data){
    var arr = data.split(',');
    $('#tips').empty();
    for(i=0;i<arr.length;i++){
    $('#tips').append("<div class = 's1'>"+arr[i]+"</div>");//!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
    }
    //加亮光标经过的div
    $('.s1').mouseenter(function(){
    $(this).addClass('select').siblings().removeClass('select');
    });
    //当光标点击某个选项是，将该选项的值复制到key
    $('.s1').click(function(){
    $('#key').val($(this).text());
    $('#tips').empty();
    });
    }
    });
    });
    });
</script>
</head>
<body style = "font-size: 30px;">
    <table cellpadding="0" cellspacing="0">
        <tr>
        <td><input name = "key" id ="key"/></td>
        <td><input type= "button" value ="搜索"/></td>
        </tr>
        <tr>
            <td colspan ="2">
            <div id = "tips"></div>
            </td>
        </tr>
    </table>
</body>
</html>