jQuery和Ajax的使用（杂记）

 

在jsp文件的获取绝对路径标签，其他jsp文件调用就行了

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>    
<base href="${pageContext.request.scheme }://${pageContext.request.serverName }:${pageContext.request.serverPort }${pageContext.request.contextPath}/">
<!-- 其内容先后为：完全的绝对路径：http://.... -->

1.

$(function(){
        //范围查询时，页面顺利跳转
        //$("a").click(function(){
        //    var serializeVal=$(":hidden").serialize();  序列化处理
        //    var href=this.href+"&"+serializeVal;
        //    window.location.href=href;
        //    return false;
        //});    
        
        //转到？ 页，处理
        $("#pageNo").change(function(){
            var val = $(this).val();
            //去空格
            val = $.trim(val);
            
            //1. 校验 val 是否为数字 1, 2, 而不是 a12, b，使用正则表达式
            var flag = false;
            var reg = /^\d+$/g;
            var pageNo = 0;
            
            if(reg.test(val)){
                //2. 校验 val 在一个合法的范围内： 1-totalPageNumber
                pageNo = parseInt(val);
                if(pageNo >= 1 && pageNo <= parseInt("${bookpage.totalPageNumber }")){
                    flag = true;
                }
            }
            if(!flag){
                alert("输入的不是合法的页码.");
                $(this).val("");
                return;
            }
            //3. 页面跳转
            var href = "bookServlet?method=getBooks&pageNo=" + pageNo + "&" + $(":hidden").serialize();
            window.location.href = href;
        });
    })

 

2.

$(function(){
        //删除数据的按钮
        $(".delete").click(function(){
            var $tr=$(this).parent().parent();
            var title=$.trim($tr.find("td:first").text());
            var flag=confirm("确定要删除"+title+"的信息吗?");
            
            if(flag){
                return true;
            }
            return false;
        });
        
        //ajax 修改单个商品的数量:
        //1. 获取页面中所有的 text, 并为其添加 onchange 响应函数. 弹出确认对话框: 确定要修改吗? 
        //在里面输入0，则表示要删除该书
        $(":text").change(function(){
            var quantityVal=$.trim(this.value);
            
            //校验输入的是否合法，即为数字
            var flag=false;
            var reg=/^\d+$/g;
            var quantity=-1;
            if(reg.test(quantityVal)){
                quantity=parseInt(quantityVal);
                if(quantity>=0){
                    flag=true;
                }
            }
            //如果输入的数为0或，小于0时，原来的值不变
            if(!flag){
                alert("输入的数量不合法！！！");
                //不合法，就恢复
                $(this).val($(this).attr("class"));
                return;
            }
            
            //弹出，是否要确定删除 文本框
            var $tr=$(this).parent().parent();
            var title=$.trim($tr.find("td:first").text());
            
            if(quantity==0){
                var flag2=confirm("你确定要删除"+title+"吗?");
                if(flag2){
                    //得到了 a 节点
                    var $a=$tr.find("td:last").find("a");
                    //执行 a 节点的 onclick 响应函数.
                    $a[0].onclick();
                    return ;
                }
            }
            //修改单个商品的数量:
            var flag=confirm("你确定要修改"+title+"的数量吗?");
            
            if(!flag){
                $(this).val($(this).attr("class"));
                return ;
            }
            //2. 请求地址为: bookServlet
            var url="bookServlet";
            
            //3. 请求参数为: method:updateItemQuantity, id:name属性值, quantity:val, time:new Date()
            var idVal=$.trim(this.name);
            var args = {"method":"updateItemQuantity", "id":idVal, "quantity":quantityVal, "time":new Date()};
            
            //4. 在 updateItemQuantity 方法中, 获取 quanity, id, 再获取购物车对象, 调用 service 的方法做修改
            //5. 传回 JSON 数据: bookNumber:xx, totalMoney
            
            //6. 更新当前页面的 bookNumber 和 totalMoney
            $.post(url, args, function(data){
                var bookNumber = data.bookNumber;
                var totalMoney = data.totalMoney;
                
                $("#totalMoney").text("总金额: ￥" + totalMoney);
                $("#bookNumber").text("您的购物车中共有" + bookNumber + "本书");
            },"JSON");
            
        });
                
        
    })

 

3.