ajax json二级联动,jQuery+JSON实现AJAX二级联动实例分析

本文实例讲述了jQuery+JSON实现AJAX二级联动的方法。分享给大家供大家参考,具体如下:

后台Handler.ashx

using System;

using System.Web;

using System.Data;

public class Handler : IHttpHandler

{

Common coObj = new Common();

public void ProcessRequest(HttpContext context)

{

if (context.Request.Params["n"] != null)

{

string num = context.Request.Params["n"].ToString();

context.Response.ContentType = "text/plain";

string str = "select * from address where a_num2=" + num;

DataTable dt = coObj.GetTable(str);

string json = JSONHelper.DataTableToJSON(dt);

context.Response.Write(json);

}

}

public bool IsReusable

{

get

{

return false;

}

}

}

前台dropdownlist.html

dropdownlit

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是一个简单的 Java Web 项目,实现了省份城市二级联动功能。该项目使用了 MySQL 数据库,通过 AJAX 请求获取 JSON 格式的省份和城市数据,然后通过 JavaScript 实现了省份和城市的二级联动。 1. 数据库部分: 创建两个表,一个用于存储省份数据,一个用于存储城市数据。在省份表中,包含省份的 id、名称和编码;在城市表中,包含城市的 id、名称、编码和所属省份的 id。 省份表 SQL 语句: ``` CREATE TABLE `province` ( `id` int(11) NOT NULL AUTO_INCREMENT, `name` varchar(255) NOT NULL, `code` varchar(255) NOT NULL, PRIMARY KEY (`id`) ) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=utf8; ``` 城市表 SQL 语句: ``` CREATE TABLE `city` ( `id` int(11) NOT NULL AUTO_INCREMENT, `name` varchar(255) NOT NULL, `code` varchar(255) NOT NULL, `province_id` int(11) NOT NULL, PRIMARY KEY (`id`), KEY `idx_province_id` (`province_id`), CONSTRAINT `fk_province_id` FOREIGN KEY (`province_id`) REFERENCES `province` (`id`) ) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=utf8; ``` 2. 后端部分: 创建一个 Java Servlet,用于处理 ajax 请求,并从数据库中获取省份和城市的数据。在 doGet() 方法中,根据请求参数获取对应的省份和城市数据,并将数据以 JSON 格式返回给前端。 ProvinceServlet.java 代码: ```java import java.io.IOException; import java.io.PrintWriter; import java.sql.Connection; import java.sql.DriverManager; import java.sql.PreparedStatement; import java.sql.ResultSet; import java.sql.SQLException; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import org.json.JSONArray; import org.json.JSONObject; public class ProvinceServlet extends HttpServlet { private static final long serialVersionUID = 1L; private static final String DB_DRIVER = "com.mysql.jdbc.Driver"; private static final String DB_URL = "jdbc:mysql://localhost:3306/test"; private static final String DB_USER = "root"; private static final String DB_PASSWORD = "root"; protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("application/json"); response.setCharacterEncoding("UTF-8"); String type = request.getParameter("type"); if ("province".equals(type)) { getProvinces(response); } else if ("city".equals(type)) { String provinceCode = request.getParameter("provinceCode"); getCities(response, provinceCode); } } private void getProvinces(HttpServletResponse response) throws IOException { Connection conn = null; PreparedStatement stmt = null; ResultSet rs = null; try { Class.forName(DB_DRIVER); conn = DriverManager.getConnection(DB_URL, DB_USER, DB_PASSWORD); String sql = "SELECT * FROM province"; stmt = conn.prepareStatement(sql); rs = stmt.executeQuery(); JSONArray provinces = new JSONArray(); while (rs.next()) { JSONObject province = new JSONObject(); province.put("id", rs.getInt("id")); province.put("name", rs.getString("name")); province.put("code", rs.getString("code")); provinces.put(province); } PrintWriter out = response.getWriter(); out.print(provinces); } catch (ClassNotFoundException | SQLException e) { e.printStackTrace(); } finally { if (rs != null) { try { rs.close(); } catch (SQLException e) { e.printStackTrace(); } } if (stmt != null) { try { stmt.close(); } catch (SQLException e) { e.printStackTrace(); } } if (conn != null) { try { conn.close(); } catch (SQLException e) { e.printStackTrace(); } } } } private void getCities(HttpServletResponse response, String provinceCode) throws IOException { Connection conn = null; PreparedStatement stmt = null; ResultSet rs = null; try { Class.forName(DB_DRIVER); conn = DriverManager.getConnection(DB_URL, DB_USER, DB_PASSWORD); String sql = "SELECT c.id, c.name, c.code FROM city c JOIN province p ON c.province_id = p.id WHERE p.code = ?"; stmt = conn.prepareStatement(sql); stmt.setString(1, provinceCode); rs = stmt.executeQuery(); JSONArray cities = new JSONArray(); while (rs.next()) { JSONObject city = new JSONObject(); city.put("id", rs.getInt("id")); city.put("name", rs.getString("name")); city.put("code", rs.getString("code")); cities.put(city); } PrintWriter out = response.getWriter(); out.print(cities); } catch (ClassNotFoundException | SQLException e) { e.printStackTrace(); } finally { if (rs != null) { try { rs.close(); } catch (SQLException e) { e.printStackTrace(); } } if (stmt != null) { try { stmt.close(); } catch (SQLException e) { e.printStackTrace(); } } if (conn != null) { try { conn.close(); } catch (SQLException e) { e.printStackTrace(); } } } } } ``` 3. 前端部分: 在 HTML 页面中添加两个 select 标签,一个用于选择省份,一个用于选择城市。给这两个 select 标签分别添加 id,例如:province 和 city。 然后,在 JavaScript 中,通过 ajax 发送请求,获取省份和城市的数据。在省份 select 标签中添加 option 标签,显示所有省份的名称。当用户选择某个省份时,再次发送 ajax 请求,获取该省份下的所有城市,并在城市 select 标签中添加 option 标签,显示所有城市的名称。 index.html 代码: ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>省份城市二级联动</title> </head> <body> <select id="province"></select> <select id="city"></select> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> <script> $(function() { // 获取所有省份 $.ajax({ url: "ProvinceServlet", type: "GET", data: { type: "province" }, success: function(data) { // 在省份 select 标签中添加 option 标签 for (var i = 0; i < data.length; i++) { var option = $("<option>").val(data[i].code).text(data[i].name); $("#province").append(option); } // 触发省份 select 标签的 change 事件 $("#province").trigger("change"); } }); // 当省份 select 标签的值发生变化时,获取该省份下的所有城市 $("#province").on("change", function() { var provinceCode = $(this).val(); $.ajax({ url: "ProvinceServlet", type: "GET", data: { type: "city", provinceCode: provinceCode }, success: function(data) { // 清空城市 select 标签中的 option 标签 $("#city").empty(); // 在城市 select 标签中添加 option 标签 for (var i = 0; i < data.length; i++) { var option = $("<option>").val(data[i].code).text(data[i].name); $("#city").append(option); } } }); }); }); </script> </body> </html> ``` 4. 部署和运行: 将上述代码保存在一个 Java Web 项目中,将 MySQL 驱动程序添加到项目的 classpath 中,然后部署到 Tomcat 服务器中运行。在浏览器中访问该项目的 index.html 页面,即可实现省份城市二级联动功能。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值