`
cakin24
  • 浏览: 1395237 次
  • 性别: Icon_minigender_1
  • 来自: 西安
社区版块
存档分类
最新评论

应用Ajax技术制作分类列表框

    博客分类:
  • PHP
阅读更多

一 代码

<?php
    $conn = mysql_connect("localhost", "root", "root") or die("连接数据库服务器失败!".mysql_error()); //连接MySQL服务器
    mysql_select_db("db_database27",$conn);			//选择数据库db_database27
    mysql_query("set names utf8");						//设置数据库编码格式utf8
?>

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>添加商品信息</title>
</head>
<body>
<script language="javascript" src="index.js"></script>
<form name="form" method="post" action="">
  <table width="419" border="0" align="center" cellspacing="1" bgcolor="#9999CC">
    <tr>
      <td height="36" colspan="3" bgcolor="#FFFFFF"><font color="#0066CC" size="+2">添加商品</font></td>
    </tr>
    <tr>
      <td width="122" height="26" bgcolor="#FFFFFF" align="right">商品名称:</td>
      <td height="26" colspan="2" bgcolor="#FFFFFF"><input type="text" name="name" /></td>
    </tr>
    <tr>
      <td height="26" bgcolor="#FFFFFF" align="right">商品类别:</td>
      <td width="64" height="26" bgcolor="#FFFFFF"><select name="ptype" id="ptype" onchange="changetype(this.value)">
    <?php
	    include_once("conn/conn.php");//包含数据库连接文件
		$sql=mysql_query("select * from tb_commotype group by ptype");//按大类分组查询
		while($row=mysql_fetch_array($sql)){//循环输出下拉列表框选项
		  echo "<option value='".$row['ptype']."'>".$row['ptype']."</option>";
		}
	?>
      </select></td>
      <td width="219" height="26" bgcolor="#FFFFFF" id="showtype" name="showtype"></td>
    </tr>
    <tr>
      <td height="26" bgcolor="#FFFFFF" align="right">商品价格:</td>
      <td height="26" colspan="2" bgcolor="#FFFFFF"><input type="text" name="price" /></td>
    </tr>
    <tr>
      <td height="26" bgcolor="#FFFFFF">&nbsp;</td>
      <td height="26" colspan="2" bgcolor="#FFFFFF"><input type="submit" name="Submit" value="提交" /></td>
    </tr>
  </table>
</form>
<script language="javascript">
    changetype(document.getElementById("ptype").value);//页面载入即执行函数,显示子类内容
</script>
</body>
</html>

 

<?php
    include_once("conn/conn.php");//包含数据库连接文件
	//echo $_GET['ptype'];
	//$ptype=iconv("gb2312","utf-8",$_GET['ptype']);//把参数值做编码转换
	$sql=mysql_query("select stype from tb_commotype where ptype='".$_GET['ptype']."'");//查询子类内容
	echo "<select name='stype' id='stype'>";//输出html
	while($row=mysql_fetch_array($sql)){//循环输出列表框选项中子类内容
	  echo "<option value='".$row['stype']."'>".$row['stype']."</option>";
	}
	echo "</select>";//输出html
?>

 

function changetype(v){
	var xml;
	if(window.ActiveXObject){//如果是浏览器支持ActiveXObjext则创建ActiveXObject对象
	  xml=new ActiveXObject('Microsoft.XMLHTTP');
	}else if(window.XMLHttpRequest){//如果浏览器支持XMLHttpRequest对象则创建XMLHttpRequest对象
	  xml=new XMLHttpRequest();
	}
    xml.open("GET","type.php?ptype="+v,true);//使用GET方法调用type.php并传递参数的值
    xml.onreadystatechange=function(){//当服务器准备就绪执行回调函数
      if(xml.readyState==4 && xml.status==200){//如果服务器已经传回信息并未发生错误
        var msg=xml.responseText;//把服务器传回的值赋给变量msg
		//document.getElementById("showtype").innerHTML=msg;
		alert(msg);
	    showtype.innerHTML=msg;//把传回的值显示在id=showtype的元素中
      }
    }
    xml.send(null);//不发送任何数据,因为数据已经使用请求URL通过GET方法发送
}

 

二 运行结果

 
  • 大小: 5.2 KB
1
1
分享到:
评论

相关推荐

    超级列表框存为网页.rar

    综上所述,"超级列表框存为网页.rar"的内容可能涵盖了从Windows应用程序到Web应用的数据迁移技术,以及前端和后端的开发知识。通过学习这些内容,开发者能够将桌面程序的数据无缝集成到Web环境中,提升用户体验并...

    jquery+ajax写的无限级选择框select

    在IT行业中,构建交互式用户界面是至关重要的,特别...这个技术在实际应用中非常常见,例如在组织结构、地理位置选择、产品分类等场景中。通过这种方式,用户可以方便地浏览和选择复杂的层次结构,而无需多次刷新页面。

    asp.net+ajax 制作一个简单的社区聊天室

    ASP.NET是微软提供的一个强大的Web应用程序开发框架,而AJAX(Asynchronous JavaScript and XML)则是一种提升用户体验的技术,通过异步更新网页部分,实现页面无刷新交互。 首先,ASP.NET提供了多种开发模型,如...

    70个流行的AJAX 应用演示和源码下载

    - **功能介绍**:由Nigel Crawley制作的一个BBC新闻RSS阅读器,用户可以通过AJAX技术实时获取最新的新闻内容。 - **技术实现**:使用XMLHttpRequest对象进行后台数据的异步加载。 #### AJAX Python多人象棋 - **...

    Jquery AutoComplete组件+Ajax实现搜索框输入提示功能小记

    本文主要介绍如何使用Jquery AutoComplete组件与Ajax技术来实现搜索框的实时输入提示功能。这种功能能够显著提升用户的交互体验,尤其是在需要大量数据检索的应用场景下。 #### 背景技术及术语解释 - **JQuery**:...

    AJAX+JSF制作7个特效

    当用户滚动页面到底部时,可以使用AJAX加载更多数据,这种技术常用于新闻列表或评论区。JSF可以通过监听滚动事件,配合AJAX请求,动态地从服务器获取并插入新内容,避免一次性加载大量数据导致的页面延迟。 3. ...

    Web技术与应用 网页制作

    ### Web技术与应用:网页制作的关键知识点 #### 核心概念与技能 1. **HTML基础知识**:HTML,即超文本标记语言,是用于创建网页的标准标记语言。它由一系列的元素组成,这些元素通过标签表示,可以插入图片、链接...

    jquery自动滚动下拉列表框.zip

    在前端开发中,jQuery是一个非常流行的JavaScript库,它简化了HTML文档遍历、事件处理、动画制作和Ajax交互。在“jquery自动滚动下拉列表框.zip”这个项目中,我们聚焦于一个特定的用户界面元素——下拉列表框,并...

    jQuery下拉列表框双向选择

    在IT行业中,jQuery是一个广泛使用的JavaScript库,它极大地简化了DOM操作、事件处理以及动画...了解并掌握以上知识点后,你可以构建一个高效、灵活的jQuery下拉列表框双向选择系统,提升用户在Web应用中的交互体验。

    绝对经典的---ajax幻灯片

    【标签】:“ajax 幻灯片”明确了主要涉及的技术和应用场景。AJAX标签表示此项目的核心在于使用AJAX技术,而幻灯片标签则暗示这是一个与动态展示内容相关的项目。 【压缩包子文件的文件名称列表】:Design-lin可能...

    AJAX 评论留言插件

    - `动态网站制作指南.url`:指向一个教程或指南,帮助开发者了解如何构建动态网站,可能包括 AJAX 的应用。 在实际使用 AJAX 评论插件时,开发者需要考虑的问题包括安全性(防止跨站脚本攻击和跨站请求伪造)、兼容...

    练手博客网页(单页应用,响应式布局)(计划使用React,AJAX制作动态部分)

    描述中提到的“计划使用React,AJAX制作动态部分”揭示了该项目的技术栈。React是Facebook开发的一个开源JavaScript库,主要用于构建用户界面,特别是单页应用。它采用组件化开发方式,可以方便地创建可复用、可维护...

    asp.net ajax留言板

    在网页应用中,AJAX技术允许数据在后台无刷新地异步加载,从而提供了更加流畅、高效的用户体验。在这个案例中,我们将深入探讨如何使用ASP.NET AJAX来构建一个实时更新的留言板系统。 首先,我们需要了解ASP.NET的...

    jQuery实现双向选择列表框

    在IT领域,jQuery是一个广泛使用的JavaScript库,它简化了HTML文档遍历、事件处理、动画制作和Ajax交互。本文将深入探讨如何使用jQuery实现双向选择列表框,这在需要同步两个下拉列表的选择时非常有用,例如在一对一...

    Jquery API (字母排序与列表框两种均有)

    jQuery,一个强大的JavaScript库,极大地简化了JavaScript的DOM操作、事件处理、动画制作以及Ajax交互。它以其简洁易用的API(应用程序编程接口)著称,使得开发者能够高效地编写出高性能的网页应用。本篇文章将深入...

    asp.net+jquery+ajax无刷新最简单实用的例子

    jQuery则简化了JavaScript的DOM操作、事件处理和动画制作,使得在网页上应用Ajax变得更加容易。 【标签】"ajax"、"asp.net"、"jquery"进一步明确了主要涉及的技术领域。Ajax不仅包括JavaScript,还涵盖了...

    jQuery利用Ajax搜索框补全代码.zip

    在IT领域,jQuery是一款广泛使用的JavaScript库,它简化了HTML文档遍历、事件处理、动画制作和Ajax交互...通过这个示例,开发者可以学习如何结合jQuery和Ajax实现动态搜索框功能,提升网站或应用的交互性和用户满意度。

    jquery+ajax分页

    **jQuery + AJAX 分页技术详解** 在Web开发中,数据分页是一种常见的用户界面策略,用于处理大量数据的展示,避免一次性加载所有内容导致页面加载过慢或内存消耗过大。jQuery是一个轻量级的JavaScript库,它简化了...

    C# Asp.net Jquery Ajax 经典案例

    在IT行业中,C#、Asp.net、Jquery和Ajax是构建高效、动态Web应用程序的关键技术。本篇文章将深入探讨这些技术以及它们在实际开发中的经典应用案例。 首先,C#是一种面向对象的编程语言,由微软公司为.NET框架开发。...

    Ajax之实时天气预报源码

    其实也可以不这个样子做,CascadingDropDown这个控件就是相关联的下拉列表控件,功能是当改变其中一个时候另外一个下拉列表,框的值也会跟着改变.常见的应用就是地区的选择了哈,当选择其中一个省会时候,自动二级城市的...

Global site tag (gtag.js) - Google Analytics