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

  • 相关阅读:
    python数据类型详解
    DEDECMS首页循环调用一级栏目和二级栏目的实现方法
    DEDE无简略标题时显示完整标题
    Dede调用简略标题_简略标题标签(短标题)
    织梦include基础函数介绍(v5+系统的一些函数介绍)
    织梦dede模板中调用会员信息标签的方法
    安装系统的一些知识
    Java的设计模式 之 简单的工厂模式(二)
    Java的设计模式 之 简单的工厂模式(一)
    linux的UDEV
  • 原文地址:https://www.cnblogs.com/lxnlxn/p/5894139.html
Copyright © 2020-2023  润新知