Ajax入门例子
在customer.php的文件中，代码如下：
<html>
<head>
<script type="text/javascript">
function showCustomer(str)
{
var xmlhttp;
if (str=="")
{
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("txtHint").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("GET","/test/getcustomer.php?q="+str,true);//这里的url是指你的文件路径，例如，我的customer.php和getcustomer.php都在www下的test文件 目录下，所以就写成了此种形式
xmlhttp.send();
}
</script>
</head>
<body>
<form action="" style="margin-top:15px;">
<label>请选择一位客户：
<select name="customers" onchange="showCustomer(this.value)" style="font-family:Verdana, Arial, Helvetica, sans-serif;">
<option value="APPLE">Apple Computer, Inc.</option>
<option value="BAIDU ">BAIDU, Inc</option>
<option value="Canon">Canon USA, Inc.</option>
<option value="Google">Google, Inc.</option>
<option value="Nokia">Nokia Corporation</option>
<option value="SONY">Sony Corporation of America</option>
</select>
</label>
</form>
<br />
<div>客户信息将在此处列出 ...</div>
<div id="txtHint"></div>
</body>
</html>
在getcustomer.php的文件中，代码如下：
<?php
$q=$_GET["q"];
$con = mysql_connect('localhost', 'root', 'root');
if (!$con)
{
die('Could not connect: ' . mysql_error());
}
mysql_select_db("test", $con);
$sql="SELECT * FROM user1 WHERE firstname= '".$q."'";
//var_dump($sql);
$result = mysql_query($sql);
echo "<table border='1'>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>Hometown</th>
<th>Job</th>
</tr>";
while($row = mysql_fetch_array($result))
{
echo "<tr>";
echo "<td>" . $row['firstname'] . "</td>";
echo "<td>" . $row['lastname'] . "</td>";
echo "<td>" . $row['age'] . "</td>";
echo "<td>" . $row['hometown'] . "</td>";
echo "<td>" . $row['Job'] . "</td>";
echo "</tr>";
}
echo "</table>";
mysql_close($con);
?>
//数据库是test， 表是user1，一共有五个字段，分别是firstname，lastname，age，hometown和Job
最后能实现页面无刷新字段的变化的效果！刚学Ajax，感觉很不错！
Ajax入门例子的更多相关文章
- 掌握 Ajax，第 1 部分: Ajax 入门简介
转:http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro1.html 掌握 Ajax,第 1 部分: Ajax 入门简介 理解 Ajax 及其工作 ...
- ASP.NET AJAX入门系列（4）：使用UpdatePanel控件（一）
UpdatePanel可以用来创建丰富的局部更新Web应用程序,它是ASP.NET 2.0 AJAX Extensions中很重要的一个控件,其强大之处在于不用编写任何客户端脚本,只要在一个页面上添加 ...
- 【Bootstrap Demo】入门例子创建
本文简单介绍下如何来使用 Bootstrap,通过引入 Bootstrap,来实现一个最基本的入门例子. 在前一篇博文[Bootstrap]1.初识Bootstrap 基础之上,我们完全可以更加方便快 ...
- 【Bootstrap】入门例子创建
本文简单介绍下如何来使用 Bootstrap,通过引入 Bootstrap,来实现一个最基本的入门例子. 在前一篇博文[Bootstrap]1.初识Bootstrap 基础之上,我们完全可以更加方便快 ...
- spring boot入门例子
最近学习spring boot,总结一下入门的的基础知识 1新建maven项目,修改pom.xml <project xmlns="http://maven.apache.org/PO ...
- MINA经典入门例子----Time Server
原文地址 http://blog.sina.com.cn/s/blog_720bdf0501010b8r.html 貌似java的IO.NIO的入门例子都有相关的Time Server Demo.本例 ...
- 一个简单的iBatis入门例子
一个简单的iBatis入门例子,用ORACLE和Java测试 目录结构: 1.导入iBatis和oracle驱动. 2.创建类Person.java package com.ibeats;import ...
- JPA入门例子(采用JPA的hibernate实现版本) 转
JPA入门例子(采用JPA的hibernate实现版本) jpahibernate数据库jdbcjava框架(1).JPA介绍: JPA全称为Java Persistence API ,Java持久化 ...
- AJAX入门---DOM操作HTML
AJAX入门---DOM操作HTML 一边学习AJAX一边坐着总结加深印象.上次写的是怎样简单的使用XMLHttpRequest对象.今天写的是DOM(文档对象模型(Document Object M ...
随机推荐
- SHELL脚本--多命令逻辑执行顺序
bash&shell系列文章:http://www.cnblogs.com/f-ck-need-u/p/7048359.html Linux中可以使用分号“;”.双and号“&& ...
- 南大算法设计与分析课程OJ答案代码（2）最大子序列和问题、所有的逆序对
问题 A: 最大子序列和问题 时间限制: 1 Sec 内存限制: 4 MB提交: 184 解决: 66提交 状态 算法问答 题目描述 给定一整数序列 a1, a2, …, an,求 a1~an 的 ...
- iOS SQLite详解
这周比较忙,前几天都加班到11点左右,基本都是到家都是12点左右(稍稍的抱怨一下,免费加班,何为免费,就是任何补偿都没有,例如调休,加班薪,餐补等各项福利,是一点都没有呀)因为App要上线了!App上 ...
- 《C#并发编程经典实例》学习笔记—异步编程关键字 Async和Await
C# 5.0 推出async和await,最早是.NET Framework 4.5引入,可以在Visual Studio 2012使用.在此之前的异步编程实现难度较高,async使异步编程的实现变得 ...
- Redis学习笔记（2）-新建虚拟电脑，安装系统CentOSMini
下载CentOSMini download 点击download,网页显示结果如下 点击红框,跳转至镜像页面,选择任一镜像,下载即可. 新建虚拟机,装载CentOSMini 点击新建 输入名称 输入C ...
- Office 365平台及其价值主张
重要提示:<Office 365开发入门指南>视频教程还没有上架,目前会先公开几个小节的文字版本,让大家先睹为快,请大家转发给感兴趣的朋友,敬请留意课程的正式上架和优惠券发放通知. 从今天 ...
- ORACLE 配置连接远程数据库
ORACLE配置tnsnames.ora文件实例 客户机为了和服务器连接,必须先和服务器上的监听进程联络.ORACLE通过tnsnames.ora文件中的连接描述符来说明连接信息.一般tnsnames ...
- junit单元测试注意的问题
1.有返回值的方法不能直接测试 2.带参数的方法不能直接测试 3.访问权限在public一下的方法不能直接测试 4.static静态方法不能直接测试 5.不能给出现前四个条件中任意一个的方法添加@Te ...
- C#设计模式之十六观察者模式（Observer Pattern）【行为型】
一.引言 今天是2017年11月份的最后一天,也就是2017年11月30日,利用今天再写一个模式,争取下个月(也就是12月份)把所有的模式写完,2018年,新的一年写一些新的东西.今天我们开始讲“行为 ...
- ASP.NET MVC 使用Jquery异步操作JS代码
$(function () { var ajaxFormSubmit = function () { var $form = $(this); var options = { url: $form.a ...