怎样用ajax实现三级联动

最新推荐文章于 2021-05-09 22:46:10 发布
最新推荐文章于 2021-05-09 22:46:10 发布
阅读量523 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/g1564335/article/details/84946213
版权

1 html代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .wrap
        {
            background-color: beige;
            width:   400px;
            height:  200px;
            margin:    0 auto;
            text-align: center;
            margin-top: 200px;
        }
        .wrap select
        {
            width:130px;
            height: 30px;
        }
    </style>
    <script type="text/javascript" src="jquery-1.8.3.min.js"></script>
</head>
<body>
<div class="wrap">
    <select id="province">
    </select>
    <select id="city">
    </select>
</div>
<script type="text/javascript">
    function getctiydata() {
        $("#city").empty();
        var pid = $("#province").val();
        $.ajax({
            url:"/getCitys?pid="+pid,
            dataType:"json"
        }).done(function (data) {
            for (var i in data)
            {
                $("#city").append($("<option value='"+ data[i].id +"'>"
                    + data[i].name +"</option>"))
            }
        })

<span class="token punctuation">}</span>

KaTeX parse error: Expected '}', got 'EOF' at end of input: …oken function">("#province").append($("<option value = ‘"+data[i].id+"’>"
+ data[i].name +"</option>"))
}
getctiydata()
});

$("#province").change(function () {
getctiydata()
})
</script>
</body>
</html>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63

2 javaservlet

package servlet;

import DButil.DataSourceUtil;
import com.alibaba.fastjson.JSON;
import domain.Province;
import org.apache.commons.dbutils.QueryRunner;
import org.apache.commons.dbutils.handlers.BeanListHandler;

import javax.jws.WebService;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.sql.SQLException;
import java.util.List;

@WebServlet("/getAllProvince")
public class ProvinceServlet extends HttpServlet
{
@Override
protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException
{
resp.setContentType(“application/json;charset=utf8”);
QueryRunner queryRunner = new QueryRunner(DataSourceUtil.getDataSource());
String sql = “select * from province”;
try
{
List<Province> provinces = queryRunner.query(sql, new BeanListHandler<Province>(Province.class));
Object json = JSON.toJSON(provinces);
resp.getWriter().print(json);

    <span class="token punctuation">}</span> <span class="token keyword">catch</span> <span class="token punctuation">(</span><span class="token class-name">SQLException</span> e<span class="token punctuation">)</span>
    <span class="token punctuation">{</span>
        e<span class="token punctuation">.</span><span class="token function">printStackTrace</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

<span class="token punctuation">}</span>

}

package servlet;

import DButil.DataSourceUtil;
import com.alibaba.fastjson.JSON;
import domain.City;
import org.apache.commons.dbutils.QueryRunner;
import org.apache.commons.dbutils.handlers.BeanListHandler;

import javax.jws.WebService;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.sql.SQLException;
import java.util.List;

@WebServlet("/getCitys")
public class CityServlet extends HttpServlet
{
@Override
protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException
{
resp.setContentType(“application/json;charset=utf8”);
QueryRunner queryRunner = new QueryRunner(DataSourceUtil.getDataSource());
String pid = req.getParameter(“pid”);
String sql = “select * from City where pid=?”;
try
{
List<City> cities = queryRunner.query(sql, new BeanListHandler<City>(City.class), pid);
Object toJSON = JSON.toJSON(cities);
resp.getWriter().print(toJSON);
} catch (SQLException e)
{
e.printStackTrace();
}
}
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80

2数据库池化

<?xml version="1.0" encoding="UTF-8"?>
<c3p0-config>
    <default-config>
        <property name="driverClass">com.mysql.jdbc.Driver</property>
        <property name="jdbcUrl">jdbc:mysql://localhost:3306/text</property>
        <property name="user">root</property>
        <property name="password">root</property>
        <property name="acquireRetryAttempts">0</property>
    </default-config>
</c3p0-config>
 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

以上就是省市联动的核心代码 如有错误请大佬指点~~~

        </div>
					<link href="https://csdnimg.cn/release/phoenix/mdeditor/markdown_views-a47e74522c.css" rel="stylesheet">
            </div>
DYH1564335
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
用ajax做三级联动,利用Ajax怎么实现一个三级联动功能
weixin_29924799的博客
08-06 559
利用Ajax怎么实现一个三级联动功能发布时间：2021-03-08 11:05:27来源：亿速云阅读：76作者：Leah本篇文章给大家分享的是有关利用Ajax怎么实现一个三级联动功能，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。首先建立数据库，如下所示接口省importjava.util.List;publicinterface...
ajax三级联动啥意思,使用Ajax怎么实现一个三级联动功能
weixin_34032649的博客
08-05 1849
使用Ajax怎么实现一个三级联动功能发布时间：2020-12-31 16:51:38来源：亿速云阅读：71作者：Leah使用Ajax怎么实现一个三级联动功能？相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。前言：利用Ajax来实现一个地区的三级联动，用Java代码来读json文件，先eclipse做一个简单的，最基础的。(json我用的j...
Ajax之三级联动
Programer0的博客
02-29 645
Ajax练习：利用Ajax实现省、市、县三级联动显示，实现代码如下： HTML代码 <body onload="demo()"> 省: <select id="pro" onchange="demo1(this.value)"> <option>--请选择--</option> </select&g...
AJAX实现三级联动
LRC的专栏
02-27 90
var req; window.onload=function(){ } function Change_Select() { ...
Ajax实现的三级联动下拉菜单
10-20
struts2+jsp+json+javascript实现的三级下拉菜单，没有service和dao层,数据是虚拟的。需要的欢迎下载。项目直接导入myeclipse就可以使用。访问路径localhost:8080/ajax_day02_hw/proviencecityarea.jsp
ajax实现select三级联动效果
10-18
主要为大家详细介绍了ajax动态实现select三级联动，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Ajax JavaWeb JS 三级联动
05-07
在Web开发中，"Ajax JavaWeb JS 三级联动"是一个常见的功能需求，它涉及到前端JavaScript技术、后端JavaWeb服务以及Ajax异步通信。这个功能主要用于创建交互性强的下拉菜单，通常用于地区选择、商品分类等场景，用户...
ajax实现三级联动的基本方法
10-20
总结来说，这个例子展示了如何利用AJAX、jQuery和PHP来实现三级联动的交互效果，使得用户在选择一级分类时，二级和三级分类能相应地动态更新。这种技术在现代Web应用中非常常见，提高了用户体验并降低了服务器负载。
jQuery ajax实现省市县三级联动
10-20
下面将详细介绍如何使用 jQuery 和 AJAX 实现省市县三级联动。 ### 1. 数据库设计 首先，我们需要一个包含省、市、县（区）信息的数据库表。通常，这个表会有以下字段：`id`（唯一标识）、`parent_id`（上级区域ID...
原生javascript AJAX 三级联动的实现代码
10-18
主要介绍了原生javascript AJAX 三级联动的实现代码，非常不错代码简单易懂，具有一定的参考借鉴价值,需要的朋友可以参考下
AJAX版省市区三级联动下拉框
05-16
AJAX版省市区三级联动下拉框
Ajax+jQuery实现省市区三级联动功能
01-05
实现：省级下拉变化时市下拉区下拉跟着变化，市级下拉变化时区下拉跟着变化。
用jquery的ajax方法实现三级联动
dwill08的博客
10-31 2714
(function(){ var p = $('#province');//得到省份的select对象 var c = $('#city');//得到城市的select对象 var t = $('#town');//得到地区的select对象 $.ajax({//使用$.ajax()访问服务器 type:"get",//get类型访问 url:"ajax\/gys",//地址 a
使用Jquery实现三级联动
weixin_39230257的博客
09-10 4246
         使用Jquery实现三级联动，首先大家可以从网络上获取一份全国省市区的JSON数据，这里我展示部分，        获取JSON数据后，首先简单写一个页面，这里我简单写几个主要标签，如下图。                                                                         干货先上，代码如下 &lt;!D...
利用原生JS实现省市区三级联动（详解）
热门推荐
小苏(º﹃º )的博客
05-09 1万+
JavaScript实现省市区三级联动1.遍历数据2.二级联动的实现3.三级联动的实现 1.遍历数据 数据链接 提取码: bv3t 2.二级联动的实现 3.三级联动的实现
城市三级联动功能实现
u011415782的专栏
07-06 4704
背景：最近在进行商品购买流程的开发，需要用户填写自己的收货地址，为了保证地址的准确性，需要使用到全国城市的三级联动功能，其中可以有三个思路：1.使用 js 直接加载城市信息；2.自己建立数据库，然后使用 ajax 异步加载城市数据；3.借用第三方城市接口，例如阿里接口，获取数据。一.html 触发点击事件，直接获取js中的城市数据首先，这个功能在实现上最简单，本人参考了度娘搜索的网页，需要提醒的源代
原生js实现三级联动
小柒的前端之旅
03-30 4016
简单的三级联动，锻炼逻辑思维 js部分有注释 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> ...
省市县三级联动的实现方案
ratel的博客
11-15 3208
1. 问题的来源 在开发中经常需要进行一个页面级联效果，最经常使用莫过于省市级三级联动的效果，比如选完北京市然后把北京市下属的区丰台区，海淀区，昌平区…返回前端 2. 解决方案 本次解决方案仅涉及后端（ps：主要是前后端分离的项目写多，不会前端操作了） 2.1 数据库设计 CREATE TABLE `sys_china` ( `Id` int(11) NOT NULL COMMENT '...
Ajax局部刷新实现三级联动
u011277123的博客
03-24 2198
达人科技 2017-03-21 08:26 要实现从数据库获取出数据来实现联动，可以使用ajax（Asynchronous javascript and xml （异步的javascript 和 xml））局部刷新技术。ajax不是新的编程语言，而是一种局部刷新的技术，是局部刷新技术块的标准。 优点：不需要加载整个界面，就可以与服务器交互并且更新部分数据。ajax不需要任何浏览器插件，但是
利用ajax实现三级联动下拉列表
最新发布
05-26
好的，下面是利用ajax实现三级联动下拉列表的步骤： 1. 在HTML页面中创建三个select标签，分别代表省、市、县（或区）的下拉列表。 2. 在JavaScript中定义一个函数，用于获取省份数据。该函数会向服务器发送一个...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值