ajax实现联动

最新推荐文章于 2023-05-22 10:33:37 发布

我tm叫夏洛

最新推荐文章于 2023-05-22 10:33:37 发布

阅读量260

点赞数

分类专栏： java 文章标签： ajax

本文链接：https://blog.csdn.net/qq_42868897/article/details/103073980

版权

java 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

思路

1、在jq就绪函数中用Ajax获取第一个下拉框里面的所有数据
2、通过循环拼装下拉框
3、通过下拉框的改变事件进行监听并且获得第二层下拉框的数据，完成拼装
4、在第一个下拉框改变事件中进行二层下拉框清空，
5、以此类推就可以事件多层的联动

代码

后端代码就不放了
下面是前端的代码

<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2019/11/4
  Time: 9:27
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>到家美食汇</title>
    <script src="js/jquery-3.3.1.min.js"></script>
  </head>
  <body>
  <div style="margin-left: 10px; margin-bottom: 10px;">
    <form>
      <input id="keyW" name="keyW" type="text" style="margin-right: 10px;">
    </form>
    <button onclick="findShop()" style="margin-bottom: 10px;">点击搜索</button>
    <div id="foodL" style="margin-left: 10px; margin-bottom: 10px;"></div>
    <table id="shopTab" border="1px">

    </table>
  </div>

  <button onclick="toAdd()" style="margin-bottom: 10px; margin-left: 10px;">添加菜品</button>

  <%--这是添加菜品的表单，后面要隐藏--%>
  <div id="addFood" style="margin-left: 10px; margin-bottom: 10px;">
    <form id="addForm">
      <input type="hidden" name="fid" id="fid">
      菜名：<input type="text" name="fname" id="fname"  style="margin-bottom: 10px;">
      <br/>
      价格：<input type="text" name="price" id="price" style="margin-bottom: 10px;">
      <br/>
      餐厅：
      <select id="sid" name="sid" style="margin-bottom: 10px; margin-top: 10px;" onchange="findCate()">

      </select>
      <br/>
      菜品：
      <select id="cid" name="cid" style="margin-bottom: 10px; margin-top: 10px;">

      </select>
      <br/>

    </form>
    <button onclick="add()" id="save">保存</button>
    <button onclick="update()" id="upd">更新</button>
  </div>
  </body>

<script>
  //就绪函数
    $(function () {
        $("#addFood").hide()
    })

  function lookFood(sid) {
      clearTab()
      $.ajax({
          url:"LookFood",
          type:"post",
          data:{"sid":sid},
          dataType:"",
          success:function (obj) {
              var list=eval(obj);
              var cList=list[0]
              var foodListList=list[1]
              for (var i = 0; i <cList.length; i++) {
                  $("#foodL").append(
                      "菜品:&nbsp;&nbsp;"+cList[i].cname+"<hr size='5px' noshade=true color='red' align='left' width='20%'/>"
                  )
                  for (var j = 0; j <foodListList[i].length; j++) {
                      $("#foodL").append(
                          "菜名:"+foodListList[i][j].fname+
                          "&nbsp;&nbsp;&nbsp;&nbsp;价格："+foodListList[i][j].price+"<hr size='1px' noshade=false color='black' align='left' width='15%'/><br/>"
                      )
                  }
              }

              $("#foodL").append(
                  "<button οnclick='clearDiv()'>返回</button>"
              )
          }
      });

  }

  function clearDiv() {
      $("#foodL").empty()
  }


  function findShop() {
      clearDiv()
      clearTab()
      AddFirstTr();
      var keyW=$("#keyW").val()
      $.ajax({
          url:"FindShop",
          type:"post",
          data:{"keyW":keyW},
          dataType:"",
          success:function (obj) {
              var list=eval(obj);
              var area=list[0]
              var shopList=list[1]
              if (area=="error"){
                   alert("搜索地址没有对应的区域，请重新搜索")
              }else {
                   alert("您的送餐地址位于"+area.name+"区域，共"+shopList.length+"家餐厅可选")
                  for (var i=0;i<shopList.length;i++){
                      $("#shopTab").append("<tr>" +
                          "<td>"+shopList[i].sid+"</td>" +
                          "<td><button οnclick='lookFood("+shopList[i].sid+")'>"+shopList[i].sname+"</button></td>" +
                          "<td><button οnclick='lookFood("+shopList[i].sid+")'>进入餐厅</button></td>" +
                          "</tr>"
                      )
                  }
              }
          }
      });
  }

  function clearTab() {
      $("#shopTab tr").remove()
  }

  function AddFirstTr() {
      $("#shopTab").append("<tr>" +
          "<td>ID</td>" +
          "<td>餐厅名</td>" +
          "<td>操作</td>" +
          "</tr>")
  }


  function clearForm() {
      $("#fname").val("")
      $("#price").val("")
      $("#sid option").remove()
      $("#cid option").remove()
  }
  
  function toAdd() {
      clearForm()
      $("#addFood").show(500)
      $("#udp").hide()
      $("#save").show()
      $.ajax({
          url:"ToAddFood",
          type:"post",
          data:"",
          dataType:"",
          success:function (obj) {
              var list = eval(obj)
              for (var i = 0; i <list.length; i++) {
                  $("#sid").append("<option value="+list[i].sid+">"+list[i].sname+"</option>")
              }
          }
      });

  }
  function findCate() {
      var sid=$("#sid option:selected").val()
      $("#cid option").remove()
      $.ajax({
          url:"findCategory",
          type:"post",
          data:{"sid":sid},
          dataType:"",
          success:function (obj) {
              var list = eval(obj)
              for (var i = 0; i <list.length; i++) {
                  $("#cid").append("<option value="+list[i].cid+">"+list[i].cname+"</option>")
              }
          }
      });
  }
  
  function add() {
      $("#addFood").hide(500)

      $.ajax({
          url:"AddFood",
          type:"post",
          data:$("#addForm").serialize(),
          dataType:"",
          success:function (obj) {
             if (obj=="ok"){
                 $("#cid option").remove()
                 alert("保存成功")
             }
             else {
                 alert("保存失败")
              }
          }
      });

  }
  
</script>
</html>