php+ajax无刷新实现省、地、市三级联动

<html>
<head>
<meta http-equiv="Content-Type" c />
<script type="text/javascript">
var xmlHttp;
var requestType="";
function createXMLHttpRequest()
{
if(window.ActiveXObject)
{
  xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
else if(window.XMLHttpRequest)
{
  xmlHttp=new XMLHttpRequest();
}
}
function queryCity(citycode){
createXMLHttpRequest();
type="city";
var url="data.php?provincecode="+citycode;
xmlHttp.open("GET",url,true);
xmlHttp.onreadystatechange=handleStateChange;
xmlHttp.send(null);
}
function queryArea(citycode){
createXMLHttpRequest();
type="area";
var url="data.php?citycode="+citycode;
xmlHttp.open("GET",url,true);
xmlHttp.onreadystatechange=handleStateChange;
xmlHttp.send(null);
}
function handleStateChange(){
if(xmlHttp.readystate==4){
  if(xmlHttp.status==200){
   if(type=="city"){
    showcity();
   }else if(type="area"){
    showarea();
   }
  }
}
}
function showcity(){
document.getElementById("city").innerHTML=xmlHttp.responseText;
document.getElementById("area").innerHTML="";
}
function showarea(){
document.getElementById("area").innerHTML=xmlHttp.responseText;
}
</script>
</head>
<body>
<?
$conn=mysql_connect("localhost","root","2328725");
mysql_select_db("novel");
mysql_query("set names 'utf8'");
$sql="select * from province";
$result=mysql_query($sql);
echo "<from id='form1'>\n";
echo "<select id='province' onchange='queryCity(this.options[this.selectedIndex].value)'>\n";
echo "<option value='-1' selected>请选择省份</option>\n";
while($row=mysql_fetch_row($result)){
  echo "<option value='$row[1]'>$row[2]</option>\n";
}
echo "</select>\n";
echo "<span id='city'></span>\n";
echo "<span id='area'></span>\n";
echo "</form>\n";
?>

</body>
</html>

时间: 2024-09-14 07:04:25

php+ajax无刷新实现省、地、市三级联动的相关文章

DropDownList实现Ajax无刷新省市三级联动错误解决方法

解决方法: (把dropdownlist改为客户端html控件select,然后用ajax存储,肯定不会有错误 ,但是这里表单有很多需要提交的数据,所以不考虑用客户端html控件) 1.在页面的<%@ page language="c#" autoeventwireup="true" codefile="default.asp教程x.cs" inherits="_default" %> 中添加 enableeven

.net Ajax无刷新技术

ajax|刷新|无刷新 [导读]Ajax技术了,号称无刷新,其实是在web上通过javascript,使用异步的xmlhttp请求,实现无刷新的web界面.本文通过一个实例带大家体验.net Ajax无刷新技术-- 下载一个.net Ajax开发包,该开发包包括ASP2.0和目前ASP1.1版使用的Ajax,详细地址参见http://ajax.schwarz-interactive.de/,接下来,开始. 1. 新建一个项目,在引用中添加引用Ajax.dll,Ajax.dll位于下载的压缩包里面

jQuery.form Ajax无刷新上传报错的解决方法

今天在用ajaxfileupload时firebug报了一个"jQuery.handleError is not a function"的错误.因为在以前使用jQuery.form一直都没有出现过这个问题,我对比以前的项目才发现,在这个项目中使用的jQuery是1.10.2的版本,而以前是使用的1.4.2.度娘一番之后,找到解决办法:jQuery.handleError is not a function 报错原因是: handlerError只在jquery-1.4.2之前的版本中存

js动态创建上传表单通过iframe模拟Ajax无刷新的具体实现

 这篇文章主要介绍了js动态创建上传表单通过iframe模拟Ajax无刷新的具体实现,需要的朋友可以参考下  代码如下: <script>  window.onload=function(){  upfile('file.php');  }      /*  ** url 路径  **/  function upfile(url){  //创建iframe  var iframe = document.createElement("iframe");  document.b

Ajax无刷新分页的性能优化方法_AJAX相关

Ajax无刷新分页,已经是一个大家比较熟悉的事物了,大概就是web前端页面上有一个js的方法,通过Ajax去请求服务器端的分页数据接口,拿到数据后再在页面上创建html结构,展现给用户,类似于下面这样: <script type="text/javascript"> function getPage(pageIndex){ ajax({ url:" RemoteInterface.cgi", method:"get", data:{p

jQuery实现form表单基于ajax无刷新提交方法详解_jquery

本文实例讲述了jQuery实现form表单基于ajax无刷新提交方法.分享给大家供大家参考,具体如下: 首先,新建Login.html页面: <!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.o

ajax无刷新(添加评论功能)

问题描述 ajax无刷新(添加评论功能) JSp,我 用ajax无刷新写了一个添加评论的功能,但是JS脚本这边解析servlet端构造的xml文档老是报错,代码如下: (当解析"item"根节点就报错了-"不支持该属性或方法",如果有其它的错误,请指出,该如何解决,谢谢!) servlet: StringBuffer sb=new StringBuffer(); sb.append(""); sb.append(""+coun

ajaxfileupload.js插件结合一般处理文件实现Ajax无刷新上传

先上几张图更直观展示一下要实现的功能,本功能主要通过Jquery ajaxfileupload.js插件结合ajaxUpFile.ashx一般应用程序处理文件实现Ajax无刷新上传功能,结合NPOI2.0实现数据读取.这个功能在实际工作种经常用到,希望能给需要做这方面的人有些帮助. 一.功能页面布局及介绍 1.上传页面布局及input file上传功能 2.上传页面文件正在上传效果 3.上传完成效果,多文件展示区 二.功能代码实现及资源引用 1.js资源文件引用 html页面js引用,需要引用j

Ajax无刷新 返回一个集合

问题描述 我要这样一个效果有一个下拉列表框,里面是产品的类型有:酒类.饮料类.日用品类.比如当我选择了酒类,那么就查询显示所有酒类的产品,显示的是一个集合.我想使用Ajax无刷新技术.但是貌似Ajax返回的只是一个String值,请问有谁知道可以返回一个集合实现我要的效果吗? 解决方案 解决方案二:dwr解决方案三:Ajax返回的是一个xml文件.你可以自己设计xml文件的结构,当然可以保存多个数据了.解决方案四: 解决方案五:组织成json数据解决方案六:使用json数据解决方案七:json数

spring mvc+mybatis框架使用怎么ajax无刷新批量上传图片?

问题描述 spring mvc+mybatis框架使用怎么ajax无刷新批量上传图片? spring mvc+mybatis框架怎么使用ajax无刷新批量上传图片?上传之后显示,哪位大神能不能给个demo,谢谢! 解决方案 Mvc Ajax 图片上传