2.11 ajax

最新推荐文章于 2025-12-19 22:21:46 发布

原创最新推荐文章于 2025-12-19 22:21:46 发布 · 157 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ajax

ajax

2.11 ajax

2.11 ajax

同步异步请求模式示意图

1.原生ajax

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>$Title$</title>
  </head>
  <body>

  <input id="mytext" type="text" >
  <input type="button" value="发送异步请求" onclick="mySubmit()"/>
  <span id="showres"></span>
  </body>

  <script>
    function mySubmit(){
      //创建异步请求对象 与服务器交互
      //XMLHttpRequest  异步请求对象 （ajax核心对象）
      var xmlhttp;
      if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
      }
      else{// code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
      //发请求
      //请求地址  请求参数  method
      //配置回调函数 （当拿到响应数据 来调用的函数）
      xmlhttp.onreadystatechange= function(){
        //readyState ajax请求的状态 4代表请求发送完成
        //status     http的状态    200代表正确返回
        if(xmlhttp.status==200&&xmlhttp.readyState == 4){
            //编写处理代码
           console.log(xmlhttp.responseText);
           var myresp = xmlhttp.responseText;

           document.getElementById("showres").innerHTML=myresp;

        }
      }
      //开启配置对象
      xmlhttp.open("POST","testajax",true);
      //可选参数 配置自定义请求头
      xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
      //发送请求
      xmlhttp.send("mytext="+document.getElementById("mytext").value);
    }
  </script>

</html>

2.1 jquery中的ajax

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>$Title$</title>
    <script src="js/jquery-3.5.1.min.js"></script>
    <script>
      $(function(){
        $("#ajaxSubmitBtn").click(function(){
          //jquery的ajax
          //参数以json格式配置
          //url   请求地址
          //type  请求方式
          //data  发送的数据（传到服务器的参数）   key=val&key=val
          //dataType 返回数据解析的类型
          //success 响应成功时 调用的回调函数  data 表示响应的数据
/*          $.ajax({
            url:"testajax",
            type:"post",
            data:{"mytext":$("#mytext").val()},
            dataType:"text",
            success:function(data){
                console.log(data);
                $("#showres").html(data);
            }
          });*/
          $.get( "testajax", //请求地址
                  {"mytext":$("#mytext").val()},//请求参数
                  function(data){ //执行成功时的回调函数
                    console.log(data);
                    $("#showres").html(data);
                   },
                  "text")//响应数据解析类型
        })
      })

    </script>
  </head>
  <body>

  <input id="mytext" type="text" >
  <input id="ajaxSubmitBtn" type="button" value="发送异步请求" />
  <span id="showres"></span>
  </body>
  <script>
   function mySubmit(){
      //创建异步请求对象 与服务器交互
      //XMLHttpRequest  异步请求对象 （ajax核心对象）
      var xmlhttp;
      if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
      }
      else{// code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
      //发请求
      //请求地址  请求参数  method
      //配置回调函数 （当拿到响应数据 来调用的函数）

      xmlhttp.onreadystatechange= function(){
        //readyState ajax请求的状态 4代表请求发送完成
        //status     http的状态    200代表正确返回
        if(xmlhttp.status==200&&xmlhttp.readyState == 4){
            //编写处理代码
           console.log(xmlhttp.responseText);
           var myresp = xmlhttp.responseText;

           document.getElementById("showres").innerHTML=myresp;

        }
      }
      //开启配置对象
      xmlhttp.open("POST","testajax",true);
      //可选参数 配置自定义请求头
      xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
      //发送请求
      xmlhttp.send("mytext="+document.getElementById("mytext").value);

    }
  </script>
</html>

2.2示例1 （省市级联）

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script src="js/jquery-3.5.1.min.js"></script>
    <script>
        $(function(){
            $.ajax({
                url:"area",
                type:"post",
                data:{"pid":0},
                dataType:"json",
                success:function(mydata){
                    console.log(mydata);
                    /*
                    *  code: 10000
                        data: Array(3)
                        0: {areaId: 100, areaName: "河北"}
                        1: {areaId: 200, areaName: "河南"}
                        2: {areaId: 300, areaName: "山东"}
                        length: 3
                        __proto__: Array(0)
                        message: "执行成功"
                    *
                    * */
                    if(mydata.code == 10000){
                        $.each(mydata.data,function(i,d){
                            //console.log(d.areaId+"  --  "+d.areaName);
                            var mycontent = '<option value="'+d.areaId+'">'+d.areaName+'</option>';
                            $("#prov").append(mycontent);
                        })
                    }
                }
            })
            $("#prov").change(function(){
                var provid = $("#prov").val();
                $("#city").html('<option value="" disabled selected>------请选择-------</option>');
                $("#xian").html('<option value="" disabled selected>------请选择-------</option>');
                $.post("area",{"pid":provid},function(mydata){
                    console.log(mydata);
                    if(mydata.code == 10000){
                        //遍历返回的数据 拼成option 填入下拉列表
                        $.each(mydata.data,function(i,d){
                            //console.log(d.areaId+"  --  "+d.areaName);
                            var mycontent = '<option value="'+d.areaId+'">'+d.areaName+'</option>';
                            $("#city").append(mycontent);
                        })
                    }
                },"json")
            })
            $("#city").change(function(){
                var cityid = $("#city").val();
                $("#xian").html('<option value="" disabled selected>------请选择-------</option>');
                $.post("area",{"pid":cityid},function(mydata){
                    console.log(mydata);
                    if(mydata.code == 10000){
                        //遍历返回的数据 拼成option 填入下拉列表
                        $.each(mydata.data,function(i,d){
                            //console.log(d.areaId+"  --  "+d.areaName);
                            var mycontent = '<option value="'+d.areaId+'">'+d.areaName+'</option>';
                            $("#xian").append(mycontent);
                        })
                    }
                },"json")
            })
        })
    </script>
</head>
<body>
    <select id="prov">
        <option value="" disabled selected>------请选择-------</option>

    </select> 省
    <select id="city">
        <option value="" disabled selected>------请选择-------</option>
    </select> 市
    <select id="xian">
        <option value="" disabled selected>------请选择-------</option>
    </select> 县/区
</body>
</html>

2.3 示例2（登录）

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>$Title$</title>
    <script src="js/jquery-3.5.1.min.js"></script>
    <script>
      $(function(){
        $("#username").change(function(){
          $.post( "checkName", //请求地址
                  {"username":$("#username").val()},//请求参数
                  function(data){ //执行成功时的回调函数  data 被自动解析为 响应的数据类型
                    console.log(data);
                    //var myjsonObj = JSON.parse(data);
                    //console.log(myjsonObj);
                    /*
                    * 根据后台返回数据 解析到页面中 展示响应结果
                    * */
                    console.log(data.code);
                    $("#showres").html(data.message);
                    $("#showres").css("color",data.data);
                   },
                  "json")//响应数据解析类型
        })
      })
    </script>
  </head>
  <body>
  用户名:<input id="username" type="text" >
  <span id="showres"></span>
  </body>
</html>

2.4示例3 （分页展示）

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="css/bootstrap.css">
    <style>
        td img{
            width: 80px;
            height: 80px;
        }
    </style>
    <script src="js/jquery-3.5.1.min.js"></script>
    <script>
        var page = ${page};
        var pageSize = ${pageSize};
        var totalPage = ${totalPage};
        $(function(){
            initBtn();
            $(".addCartBtn").click(function(){
                var pid = $(this).attr("pid");
                var pordid = "prod_"+pid;
                var pnum = 1;
                //遍历cookie 判断指定的cookie是否已存在 如果已存在 把value+1
                var ckarr = document.cookie.split("; ");
                $.each(ckarr ,function(i,d){
                    var kv = d.split("=");
                    //key已经存在
                    if(kv[0]==pordid){
                        var currentNum = parseInt(kv[1]);
                        pnum = currentNum+1;
                    }
                })
                document.cookie = pordid+"="+pnum+";path=/;expires="+new Date("2025-11-11 11:11:11");
            })
            $("#prevBtn").click(function(){
                location.href="prod?page="+(page-1)+"&pageSize=2&prodId="+$("#prodId").val()+"&prodName="+$("#prodName").val();
            })
            $("#nextBtn").click(function(){
                location.href="prod?page="+(page+1)+"&pageSize=2&prodId="+$("#prodId").val()+"&prodName="+$("#prodName").val();
            })
        })
        function initBtn(){
            if(page<=1){
                $("#prevBtn").prop("disabled",true);
            }
            if(page>=totalPage){
                $("#nextBtn").prop("disabled",true);
            }
        }
    </script>
</head>
<body>
    <form action="prod" method="post" class="form-inline">
        <div class="form-group">
            <label for="prodId">商品id</label>
            <input type="text" class="form-control" id="prodId" name="prodId" value="${queryProd.prodId}" placeholder="351123">
        </div>
        <div class="form-group">
            <label for="prodName">商品名称</label>
            <input type="text" class="form-control" id="prodName" name="prodName" value="${queryProd.prodName}"  placeholder="牙膏">
        </div>
        <button type="submit" class="btn btn-success">查询</button>
    </form>
    <table class="table">
        <thead>
        <tr><th>商品编号</th><th>商品名称</th><th>单价</th><th>描述信息</th><th>操作</th></tr>
        </thead>
        <tbody>
        <c:forEach items="${listprd}" var="prod">
            <tr><td>${prod.prodId}</td>
                <td>${prod.prodName}
                    <img src="${pageContext.request.contextPath}/${prod.prodImg}">
                </td>
                <td>${prod.prodPrice}</td>
                <td>${prod.prodDesc}</td>
                <td><input type="button" pid="${prod.prodId}" class="btn btn-info addCartBtn" value="添加到购物车"></td>
            </tr>
        </c:forEach>
     </tbody>
    </table>
<%--
通过链接地址 把用户分页查询的参数拼接在用户要点击的url上

--%>
<%--<a class="btn btn-default" href="prod?page=1&pageSize=2">1</a>
<a class="btn btn-default" href="prod?page=2&pageSize=2">2</a>
<a class="btn btn-default" href="prod?page=3&pageSize=2">3</a>
<a class="btn btn-default" href="prod?page=4&pageSize=2">4</a>--%>
<%--<a class="btn btn-default" href="prod?page=${page-1}&pageSize=2">上一页</a>
<a class="btn btn-default" href="prod?page=${page+1}&pageSize=2">下一页</a>--%>
<input id="prevBtn" type="button" value="上一页" class="btn btn-default">
<input id="nextBtn"  type="button" value="下一页" class="btn btn-default">
    <span>总共 <span>${totalPage}</span> 页, 当前第 <span>${page}</span> 页， 每页显示 <span>${pageSize}</span> 条记录</span>
</body>
</html>