AJAX多级下拉联动【JSON】

前言

前面我们已经使用过了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>请选择城市
  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值