码迷,mamicode.com
首页 > Web开发 > 详细

jQuery和Ajax的使用

时间:2016-09-21 21:31:02      阅读:164      评论:0      收藏:0      [点我收藏+]

标签:

 

在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.

 

jQuery和Ajax的使用

标签:

原文地址:http://www.cnblogs.com/lxnlxn/p/5894139.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!