首页 > 代码库 > jQuery和Ajax的使用

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="http://www.mamicode.com/${pageContext.request.scheme }://${pageContext.request.serverName }:${pageContext.request.serverPort }${pageContext.request.contextPath}/"><!-- 其内容先后为:完全的绝对路径:http://.... -->

1.

$(function(){        //范围查询时,页面顺利跳转        //$("a").click(function(){        //    var serializeVal=$(":hidden").serialize();  序列化处理        //    var href=http://www.mamicode.com/this.href+"&"+serializeVal;        //    window.location.href=http://www.mamicode.com/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 = "http://www.mamicode.com/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.

 

jQuery和Ajax的使用