ajax实现点击下拉框显示不同数据（仅jsp页面代码）

淩粦卅喏

于 2023-02-07 16:11:51 发布

阅读量363

点赞数

文章标签： java ajax javascript

本文链接：https://blog.csdn.net/Fristadd/article/details/128920712

版权

显示页面代码

<%--
  Created by IntelliJ IDEA.
  User: haiyao510710
  Date: 2023/1/31
  Time: 20:45
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>银行信息显示</title>
  <style type="text/css">
    table {
      color: deepskyblue;
      border: 1px solid black;
      text-align: center;
    }

    tr {
      border: 1px solid black;
    }

    td {
      border: 1px solid black;
    }
  </style>
  <script type="text/javascript" src="js/jquery-1.12.4.js"></script>
  <script type="text/javascript">
    $(function (){
      // 初始化显示下拉框
   
      $.ajax({
        type: "POST",
        url: "bankServlet?methodName=selectBankName",
        dataType: "JSON",
        success:function (data) {
          for (var i = 0;i<data.length;i++){
            var opt = " <option value="+data[i].bankId+">"+data[i].bankName+"</option>";
            $("#pselect").append(opt);
          }
        }
      })
    })
    // 根据下拉框的值返回对应银行数据
    function showBack() {
      var ids = $("#pselect").val();
      $.ajax({
        type:"POST",
        url:"bankServlet?methodName=showUsersByBankId",
        data:{id:ids},
        dataType:"JSON",
        success:function (data) {
          $("tr:gt(0)").remove();
          var trvalue = "";
          for (var i=0;i<data.length;i++){
            trvalue ="<tr><td>"+data[i].userId+"</td>"
                    +"<td>"+data[i].userName+"</td>"
                    + "<td>"+data[i].userIdCard+"</td>"+
                    "<td>"+data[i].userPhone+"</td>"+
                    "<td>"+data[i].userPassword+"</td>"+
                    "<td>"+data[i].userAddress+"</td>"+
                    "<tr><td>银行卡号</td>"+
                    "<td>银行卡号余额</td></tr>";
            for (var j =0;j<data[i].bankcarList.length;j++){
            trvalue+= "<tr><td>"+data[i].bankcarList[j].backCardId+"</td>"+
              "<td>"+data[i].bankcarList[j].remainSum+"</td></tr>";
            }

                   trvalue+="</tr>";
            console.log(trvalue);
            $("#table1").append(trvalue);
          }
          console.log(trvalue);
        }
      })
    }

    // 模糊查询
      function refer() {
        var nameValue = $("#names").val();
        var idValue = $("#idCard").val();
        var phoneValue = $("#phone").val();
        $.ajax({
          type:"POST",
          url:"bankServlet?methodName=ajaxrefer",
          data:{name:nameValue,id:idValue,phone:phoneValue},
          dataType:"JSON",
          success:function (data){
            $("tr:gt(0)").remove();
            var trvalue = "";
            for (var i=0;i<data.length;i++){
              trvalue ="<tr><td>"+data[i].userId+"</td>"
                      +"<td>"+data[i].userName+"</td>"
                      + "<td>"+data[i].userIdCard+"</td>"+
                      "<td>"+data[i].userPhone+"</td>"+
                      "<td>"+data[i].userPassword+"</td>"+
                      "<td>"+data[i].userAddress+"</td>"+
                      "<td>"+data[i].bankCar.backCardId+"</td>"+
                      "<td>"+data[i].bankCar.remainSum+"</td></tr>";
               $("#table1").append(trvalue);
            }

            console.log(trvalue);
          }
        })

      }
  </script>
</head>
<body>
<p >
  <select id="pselect" οnchange="showBack()"></select></p>
<tr>
  <p>姓名:<input id="names" type="text">&nbsp;&nbsp;
    身份证号:<input id="idCard" type="text">&nbsp;&nbsp;
    手机号:<input id="phone" type="text">&nbsp;&nbsp;
    <input id="butten" type="button" οnclick="refer()" value="搜索">
    <input id="bacd" type="hidden" value="${requestScope.backId}">
    <a style="margin-left: 280px" href="addUser.jsp">[添加用户]</a>
  </p>
</tr>

<table align="center" id="table1">
  <tr>
    <td>用户id</td>
    <td>用户名称</td>
    <td>用户身份证号码</td>
    <td>手机号</td>
    <td>用户支付密码</td>
    <td>用户家庭住址</td>
  </tr>
  <c:forEach items="${requestScope.userList}" var="user">
    <tr id="tr1">
      <td>${user.userId}</td>
      <td>${user.userName}</td>
      <td>${user.userIdCard}</td>
      <td>${user.userPhone}</td>
      <td>${user.userPassword}</td>
      <td>${user.userAddress}</td>
    <tr>
      <td>银行卡号</td>
      <td>余额</td>
  </tr>

      <c:forEach items="${user.bankcarList}" var="bankCar">
        <tr>
        <td>${bankCar.backCardId}</td>
        <td>${bankCar.remainSum}</td>
        </tr>
      </c:forEach>


    </tr>
  </c:forEach>


</table>

</body>
</html>

说明:当ajax返回数据中有集合数据，通过for循环遍历，通过+=进行添加输出即可。