ajax如何实现级联

最新推荐文章于 2021-08-05 22:38:16 发布
最新推荐文章于 2021-08-05 22:38:16 发布
阅读量730 收藏
点赞数
文章标签： jquery web ajax php
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/christine95/article/details/46826073
版权

ajax最大的优点就在于可以局部刷新，用户体验很好。

用ajax实现级联可以在不刷新页面的情况下实现与服务器交互。

下面这个例子是，勾选不同的省，对应该省的城市会显示出来，并且数据从数据库读出来。

//html简单布局

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<style>
ul{
width: 500px;
height: 500px;
border: 1px solid black;
}
</style>
</head>
<body>
<?php <pre name="code" class="php"><span style="white-space:pre">	</span>//从数据库读出所有省
include('conn.php'); $sql = "select * from province";$result = mysql_query($sql);?> 
 

<select id="province">
	<option value="0">--省--</option>
	<?php 
 

<span style="white-space:pre">		</span><span style="white-space:pre"></span>//循环遍历所有省，并显示在select里
		while($row = mysql_fetch_assoc($result)){
		?>
		<option value="<?php echo $row['id'] ?>"><?php echo $row['name'] ?></option>
		<?php
	}?>
</select><pre name="code" class="php">//这里存放所有的市
<select id="city">
		
</select>
 

 

//主要用的就是jquery里面的change事件，当下拉框中数据改变时，出发change事件，然后获得省份的id，通过ajax传到服务器端，查询到该省份的市有哪些。
 
 

<script>
		$(document).ready(function () {
			$("#province").change(function(event) {
				var select_id = $("#province").val();
				if(select_id != 0){
					$.get("9-2.php",{id:select_id,t:Math.random()},function (data){
						$("#city").html(data);
					})
				}
			});
			
		});
</script>
 
 

 </body> 

 </html> 

 


 
 

//9-2.php，得到相应的省，通过省来找所有的市在传回回调函数。
 

 

<?php 
	include('conn.php');
	$shengid = $_GET['id'];
	$sql = "select * from city where shengid=".$shengid;
	$result = mysql_query($sql);
	while($row = mysql_fetch_assoc($result)){
		?>
		<option value="<?php echo $row['id'] ?> "><?php echo $row['name'] ?></option>
		<?php
	}
?>
 

 

 


                

        

        

    




    

      

        

            

              
                
                  Seven_Cld
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                      0
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    0
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      










                



	

		

			

				
					
Ajax 实现级联菜单

				
			

			

				

					03-06
				

			

		

		

			
				
完整项目工程。 博文链接：https://plkong.iteye.com/blog/214447

			
		

	



                

              
                



	

		

			

				
					
javascript_ajax 地址三级联动

				
			

			

				

					weixin_30820077的博客
				

				

					01-11
					
					81
					
				

			

		

		

			
				
1.三级地址联动思路如下：

2.建立数据库。这里直接使用网上的地址数库，最后一个字段无用，先不去管它


3.建立一个server.php文件

 1 <?php 
 2     // 数据库连接
 3     mysql_connect("localhost","root","root") or die(mysql_error());
 4     my...

			
		

	



                


  
              

                


	

		

			

				
					
用ajax做级联操作,【转自：wlo_o】jquery用ajax实现级联

				
			

			

				

					weixin_29221191的博客
				

				

					08-05
					
					148
					
				

			

		

		

			
				
Js代码 //列表初始化方法进入页面后调用$(document).ready(function(){$.ajax({url:'init.action',//请求的URLcache:false,//不从缓存中取数据data:{pid:2},//发送的参数type:'Get',//请求类型dataType:'json',//返回类型是JSONtimeout:20000,//超时error:functi...

			
		

	





	

		

			

				
					
Ajax实现级联

				
			

			

				

					Zartillery的博客
				

				

					01-15
					
					784
					
				

			

		

		

			
				
级联代码：


//一级下拉框
        var categoryLevel1 = $("#categoryLevel1"); //拿到一级下拉框元素
        categoryLevel1.append("&lt;option&gt;请选择&lt;/option&gt;")
        $.ajax({
            type: "GET",//请求类型
       ...

			
		

	



		

			
		



	

		

			

				
					
用ajax做级联操作,下拉菜单的级联操作（ajax）

				
			

			

				

					weixin_39768645的博客
				

				

					08-05
					
					699
					
				

			

		

		

			
				
在开发中常常会遇到菜单的级联操作，比如：国家、城市、乡镇的选择等。当选中某个国家的时候，后面的菜单会把该国家内的城市罗列出来，当选中城市的时候，后面的菜单会把对应的乡镇列出来。解决这种菜单的级联操作的办法，我理解的有两种：①使用js来实现，把页面所用到的级联数据放到js内，当页面加载完成后，通过js显示到对应的select内，这种方法的解决办法有很多种，最为直观的一种是放到多维数组中，每个人的思维...

			
		

	





	

		

			

				
					
ajax级联

				
			

			

				

					xiao_b_a_i的博客
				

				

					08-13
					
					132
					
				

			

		

		

			
				
界面：（使用onchange事件）

					* 所属项目
					 
						
							--请选择--
						
					
				
				
					* 所属楼栋
					 
						
							
						
					
				
				
					* 所属单元
					 
						
							
						
					
				
js：

&lt...

			
		

	





	

		

			

				
					
java AJAX实现级联下拉框

				
			

			

				

					10-30
				

			

		

		

			
				
AJAX实现级联下拉框 需要的JAVA类,大家可以学习下

			
		

	





	

		

			

				
					
级联 ajax实现方式

				
			

			

				

					08-14
				

			

		

		

			
				
级联 ajax实现方式  通过数据库分表方式 PHP语言实现

			
		

	





	

		

			

				
					
Ajax 实现级联下拉框

				
			

			

				

					sdvjbc的博客
				

				

					05-12
					
					3049
					
				

			

		

		

			
				
级联下拉框随处可见，最常见的就是省市的级联，在选择省份后，对应的区县的下拉选择列表的下拉选择内容也会发生相应改变，即所谓的级联下拉框。这种页面异步刷新，无可厚非，AJax是首选。
在做一个管理系统时，有这样一个需求，在选择了仓库后，对应的仓位下拉选择框的内容也需要改变。类似于省市级联。也是通过Ajax实现。
1、jsp页面部分
       jsp页面作为显示层，使用户直接看到的，jsp页面

			
		

	





	

		

			

				
					
级联下拉列表  ajax实现（两种方式）

				
			

			

				

					奔跑的年糕
				

				

					01-25
					
					8724
					
				

			

		

		

			
				
案例：设置一个级联下拉列表，省市区，根据id进行查找，同属于同一个省的城市前两位id相同，属于同一个市的区前4位id相同

数据库数据如下（部分）：


第一种方式：通过获取json对象，然后进行解析json对象数组，动态创建下拉列表
1：Dao代码如下：
package com.oracle.dao;

import java.util.List;

import com.orac

			
		

	





	

		

			

				
					
ajax实现级联菜单

				
			

			

				

					10-08
				

			

		

		

			
				
包含数据库字段设计、jsp页面代码编写、最后的运行效果

			
		

	





	

		

			

				
					
ajax省份级联

				
			

			

				

					11-25
				

			

		

		

			
				
$(function(){
	
		//$.post(地址,数据,回调函数);
		$.post("action1.action",{
			sign:"a1"	
		},function(data){
		for(var i=0;i<data.length;i++){
			//alert(data[i].sheng);
			$("#sheng").append("<option>"+data[i].sheng+"</option>");
		}
});
		
		
		
		$("#sheng").change(function(){
			
			var s="";
			if(s!=null){
				$("#shi option:not(:first)").remove();
			}
			//$.post(地址,数据,回调函数);
			$.post("action2.action",{
				shengname:$("#sheng option:selected").val()
			},function(data){
			for(var i=0;i<data.length;i++){
				
			s=s+"<option>"+data[i].shi+"</option>"	
			//$("#shi").append("<option>"+data[i].shi+"</option>");
			alert("sss"+s);	
			}
			$("#shi").append(s);
	});
			
		});
			
		
		
	});

			
		

	





	

		

			

				
					
ajax实现城市级联

				
			

			

				

					12-29
				

			

		

		

			
				
对于初学者Ajax 城市级联就是一个横好的例子，这里有对于Ajax的详细的的运用

			
		

	





	

		

			

				
					
ajax与json实现级联

				
			

			

				

					04-24
				

			

		

		

			
				
ajax与json实现城市动态级联ajax与json实现城市动态级联

			
		

	





	

		

			

				
					
通过ajax实现部门与员工的二级级联，三级级联相同的原理

				
			

			

				

					nb7474的博客
				

				

					12-29
					
					1345
					
				

			

		

		

			
				
首先看一下简单的样式： 
在页面加载完毕后，所有部门的名字也全部显示在下拉框中，下拉框绑定onchange事件，通过ajax获得部门对应的所有员工名。在加载部门的时候，我用的是ssm框架中的ModelAndView对象绑定了一个参数，参数中有所有部门的信息，在前台通过jstl标签处理参数。html代码：<form class="form-inline">
              <div cla

			
		

	





	

		

			

				
					
ajax级联实现

				
			

			

				

					weixin_34361881的博客
				

				

					01-10
					
					74
					
				

			

		

		

			
				
效果如下：


选择第一项，第二项、第三项的内容跟着改变。
选择第二项，第三项的内容跟着改变。
第三项则不影响第一项和第二项。
有几点值得提：
1.html到底是前台拼接还是后台拼接。
我选择的是前台拼接，这样可以节省流量，和后台的资源。这也比较符合程序处理，一般后台只负责提供数据。
通过json传递给前台，完了前台获取进行处理。
ajax函数

function ajax...

			
		

	





	

		

			

				
					
ajax实现级联下拉菜单

				
			

			

				

					男儿当自强
				

				

					07-31
					
					4457
					
				

			

		

		

			
				
ajax实现级联下拉菜单

			
		

	





	

		

			

				
					
基于ajax实现级联下拉菜单

					
最新发布

				
			

			

				

					12-19
				

			

		

		

			
				
级联下拉菜单是指一个下拉菜单的选项内容会根据另一个下拉菜单的选择而动态改变。这种功能可以通过Ajax来实现。

首先，我们需要在页面上创建两个下拉菜单元素，它们分别对应两个级联的选项。然后通过JavaScript监听第一个下拉菜单的change事件，当触发change事件时，利用Ajax技术向服务器发送请求，请求服务器返回根据第一个下拉菜单选择内容动态生成的选项列表。

在服务器端，我们创建一个处理Ajax请求的接口，当接收到来自客户端的请求时，根据请求参数返回相应的数据。这些数据可以是JSON格式的数据，包括第二个下拉菜单的选项内容。

当客户端接收到服务器返回的数据后，利用JavaScript动态生成第二个下拉菜单的选项内容，并将其添加到页面上。

通过这种方式，我们就实现了级联下拉菜单的功能。当用户选择第一个下拉菜单的选项时，第二个下拉菜单的选项内容会随之动态改变。这样的实现能够提升用户体验，使得用户可以更方便地快速选择到他们所需的内容。

			
		

	



              



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

  

      
    
          
  • 
              
    
                  
                  
              
    
              
    非常没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    一般
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    有帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    非常有帮助
    
          
    • 
      

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值