AJAX多级下拉联动【JSON】

最新推荐文章于 2020-10-21 18:54:59 发布

公众号Java3y

最新推荐文章于 2020-10-21 18:54:59 发布

阅读量2.2k

点赞数 2

分类专栏： Ajax与JSON 文章标签： ajax struts json xml

本文链接：https://blog.csdn.net/hon_3y/article/details/72468761

版权

前言

前面我们已经使用过了XML作为数据载体在AJAX中与服务器进行交互。当时候我们的案例是二级联动，使用Servlet进行控制

这次我们使用JSON作为数据载体在AJAX与服务器交互，使用三级联动，使用Action进行控制….

省份-城市-区域三级联动【Struts2 + JSON版】

分析

与上次是一样的，只不过这次换了用JSON，使用Action控制罢了…

监听下拉框的变动，使用异步对象与服务器进行交互。

前台分析

监听下拉框的变动
得到服务器返回的JSON数据
使用eval()进行解析，得到具体的对象
使用DOM编程把数据填充到对应的下拉框上

后台分析

得到前台发送过来的数据
判断具体的数据是什么，给出对应的数据
使用Struts2提供的组件把数据封装成JSON
返回给浏览器

监听省份JSP页面


<%--
  Created by IntelliJ IDEA.
  User: ozc
  Date: 2017/5/18
  Time: 13:36
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>使用JSON数据载体与服务器进行交互</title>

      <script type="text/javascript" src="js/ajax.js"></script>
  </head>
  <body>


  <%--############前台页面##############################--%>
  <select name="province" id="provinceId">
    <option>请选择省份</option>
    <option>广东</option>
    <option>北京</option>
  </select>

  <select name="city" id="cityId">
    <option>请选择城市