Ajax+PHP实现的分类列表框功能示例

本文实例讲述了Ajax+PHP实现的分类列表框功能。分享给大家供大家参考,具体如下:

一 代码

conn.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
?>

index.php:

<!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"> </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>

type.php:

<?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
?>

index.js:

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方法发送
}

二 运行结果

更多关于PHP相关内容感兴趣的读者可查看本站专题:《PHP+ajax技巧与应用小结》、《PHP网络编程技巧总结》、《PHP基本语法入门教程》、《php面向对象程序设计入门教程》、《php字符串(string)用法总结》、《php+mysql数据库操作入门教程》及《php常见数据库操作技巧汇总》

希望本文所述对大家PHP程序设计有所帮助。

(0)

相关推荐

  • Ajax+PHP实现的删除数据功能示例

    本文实例讲述了Ajax+PHP实现的删除数据功能.分享给大家供大家参考,具体如下: 一 代码 conn.php: <?php $conn = mysql_connect("localhost", "root", " ") or die("连接数据库服务器失败!".mysql_error()); //连接MySQL服务器 mysql_select_db("db_database27",$conn); /

  • Ajax+PHP实现的模拟进度条功能示例

    本文实例讲述了Ajax+PHP实现的模拟进度条功能.分享给大家供大家参考,具体如下: 一 代码 fun.js: function progress(){ setInterval("beginProgress()", 200); } function beginProgress(){ $.get("progress.php", null, function(data){ $("#pg").css("width", data+&q

  • jQuery ajax+PHP实现的级联下拉列表框功能示例

    本文实例讲述了jQuery ajax+PHP实现的级联下拉列表框功能.分享给大家供大家参考,具体如下: 一 代码 fun.js: // JavaScript Document $(document).ready( function(){ $.get("returnpc.php?flag=p", null, function(data){ //向服务器发送GET请求,获取省份的值,并将结果追加到省份下拉列表中 $("#p").append(data); }); $(&

  • PHP+Ajax异步通讯实现用户名邮箱验证是否已注册( 2种方法实现)

    前 言 直接上代码有点不厚道.于是按照天朝传统,整段描述吧....(本人语言表达能力有限,大家忍着看) 功 能 在网站注册用户时使用,主要为了无刷新异步验证用户输入的用户名或者Email是否已注册. 这功能大家肯定见过,大多数网站都有的,我一直对这个功能很感兴趣,所以这几天研究了下 jQuery + Ajax 整了一个功能不算完善,但足以应付普通使用的代码 (更牛的功能大家自己去发掘) 文 件 说 明 reg.php //为注册页面 check_user.php //为用户验证页面 (GET,P

  • php注册系统和使用Xajax即时验证用户名是否被占用

    在php中使用Xajax能够即时与数据库发生交互 带给用户更好的体验 主要的应用有网页的即时.不刷新的登录系统 也可以利用于注册系统中 即时验证用户名是否被占用 一.基本目标 首先在mysql中有一张用户信息表user 编写一个用户注册系统,一开始注册按钮是禁用的状态 当用户输入用户名完毕时,马上检查这个用户名是否被占用,如果是,禁用注册按钮,并弹出对话框 如果用户输入的用户名没有被占用,则解锁注册按钮,但如果用户输入两次输入的密码不一致,同样不允许用户注册 直到用户满足所有注册条件的时候,才放

  • PHP+Ajax检测用户名或邮件注册时是否已经存在实例教程

    PHP+Ajax检测用户名或邮件注册时是否已经存在是论坛或会员系统中常见的一个重要功能.本文就以实例形式简单描述这一功能的实现方法.具体步骤如下: 一.PHP检测页面 check.php页面代码如下: <script type="text/javascript" src="jiance.js"></script> <form name="myform" action="" method="

  • PHP+AJAX实现无刷新注册(带用户名实时检测)

    很多时候,我们在网上注册个人信息,在提交完页面后,总得等待页面刷新来告诉我们注册是否成功,遇到网络差的时候,如果注册了一大串的东西,在经过漫长的等待页面刷新后,得到的确是"您的用户名已被使用"或XXXXXXX不合法,我想大家的心情一定特别不爽,今天就介绍个AJAX实现页面不刷新注册+实时检测用户信息的简单注册程序,希望对大家有所帮助.好的,先看注册界面代码: <table width="831" border="0" align="

  • PHP+Ajax实现的检测用户名功能简单示例

    本文实例讲述了PHP+Ajax实现的检测用户名功能.分享给大家供大家参考,具体如下: 一 代码 fun.js: function chkUsername(username){ if(username==''){ //判断用户名是否为空 alert('请输入用户名!'); }else{ var xmlObj; //定义XMLHttpRequest对象 if(window.ActiveXObject){ //如果是浏览器支持ActiveXObjext则创建ActiveXObject对象 xmlObj

  • Ajax+PHP实现的分类列表框功能示例

    本文实例讲述了Ajax+PHP实现的分类列表框功能.分享给大家供大家参考,具体如下: 一 代码 conn.php: <?php $conn = mysql_connect("localhost", "root", "root") or die("连接数据库服务器失败!".mysql_error()); //连接MySQL服务器 mysql_select_db("db_database27",$conn

  • Jquery+Ajax+PHP+MySQL实现分类列表管理(下)

    在上篇中,我们详细讲解了如何实现列表管理的新增和删除操作,可以看出,前端页面通过ajax与后台通信,根据后台处理结果响应前端页面交互操作,这是一个很典型的Ajax和JSON应用的例子. 本文将继续上篇文中的示例,完成编辑操作. 编辑项操作 用户通过单击"编辑"按钮,相应的项会立即变为编辑状态,出现一个输入框,用户可以重新输入新的内容,然后点击"保存"按钮完成编辑操作,也可以单击"取消"按钮取消编辑状态. 首先,通过单击"编辑"

  • Android仿QQ长按删除弹出框功能示例

    废话不说,先看一下效果图,如果大家感觉不错,请参考实现代码: 对于列表来说,如果想操作某个列表项,一般会采用长按弹出菜单的形式,默认的上下文菜单比较难看,而QQ的上下文菜单就人性化多了,整个菜单给用户一种气泡弹出的感觉,而且会显示在手指按下的位置,而技术实现我之前是使用popupWindow和RecyclerView实现的,上面一个RecyclerView,下面一个小箭头ImageView,但后来发现没有必要,而且可定制化也不高,还是使用多个TextView更好一点. 我封装了一下,只需要一个P

  • Jquery+Ajax+PHP+MySQL实现分类列表管理(上)

    在实际应用中,我们要管理一个客户分类,实现对客户分类的增加.删除和修改等操作,如何让这些操作变得更人性化,让用户操作起来更加方便成了我们必须研究的课题. 准备阶段 您需要具备HTML和Jquery等前端知识,以及基本的PHP程序和MySql数据库相关知识.要实现本文中的DEMO示例,首先需要一个mysql数据库: CREATE TABLE `catalist` ( `cid` int(11) NOT NULL auto_increment, `title` varchar(100) NOT NU

  • Android编程实现变化的双重选择框功能示例

    本文实例讲述了Android编程实现变化的双重选择框功能.分享给大家供大家参考,具体如下: 原理:定义四个RadioGroup,通过第一个RadioGroup的选择来控制其余几个radiogroup的显隐 布局: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android&quo

  • jQuery+ajax实现动态添加表格tr td功能示例

    本文实例讲述了jQuery+ajax实现动态添加表格tr td功能.分享给大家供大家参考,具体如下: 功能:ajax获取后台返回数据给table动态添加tr/td html部分: <table> <tbody></tbody> </table> ajax部分: var year = $('#year').val();//下拉框数据 var province= $('#province').val();//下拉框数据 $('table tbody').html

  • Yii框架弹出框功能示例

    本文实例讲述了Yii框架弹出框功能.分享给大家供大家参考,具体如下: <?php $this->beginWidget('zii.widgets.jui.CJuiDialog', array( 'id'=>'userinfo_edit',//弹窗ID // additional javascript options for the dialog plugin 'options'=>array(//传递给JUI插件的参数 'title'=>'修改个人信息', 'autoOpen

  • jQuery使用ajax方法解析返回的json数据功能示例

    本文实例讲述了jQuery使用ajax方法解析返回的json数据功能.分享给大家供大家参考,具体如下: 最近在用jQuery的ajax方法传递接收json数据时发现一个问题,那就是返回的data数据,有时候可以直接作为json数据使用,可有时候又不行.查了些资料,解释如下: $.ajax({ url: ajaxurl, type: "POST", success: function(data){ //假设返回的json数据里有status及info2个属性 //有时候可以直接ajaxo

  • jQuery基于ajax方式实现用户名存在性检查功能示例

    本文实例讲述了jQuery基于ajax方式实现用户名存在性检查功能.分享给大家供大家参考,具体如下: 对于拥有会员功能的网站,尤其是会员登录后可以留言或评论的网站,一般要求不能有两个或两个以上相同的用户名存在.因此,在用户注册的时就需要对用户名是否已经被注册进行检查防止出现相同的用户名.下面是我实现这种功能的一种解决方案. 1.方案原理:利用ajax的异步请求不刷新正在注册的页面向后端发送请求,后端对请求数据进行处理返回用户名是否已经存在的结果. 2.方案详情 (1)html代码部分,运用了in

  • Android编程实现ListView滚动提示等待框功能示例

    本文实例讲述了Android编程实现ListView滚动提示等待框功能.分享给大家供大家参考,具体如下: 其实原理很简单,只需要设置监听listview的滚动事件即可 file1: package cn.stay.activity; import java.util.ArrayList; import java.util.List; import com.aoran.R; import android.app.Activity; import android.os.Bundle; import

随机推荐