使用Ajax来自动帮用户填写信息
来源：互联网 发布：linux系统初始化脚本 编辑：程序博客网 时间：2024/06/05 06:09
1/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//index.php
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Popconrn Sales Form(Ajax)</title>
<style type="text/css">
img
{
position:absolute;
left:400px;
top:50px;
}
</style>
<script type="text/javascript" src="popcornA.js"></script>
</head>
<body>
<h2>Welcome to Millenium Gymnastics Booster Club Popcorn Sales</h2>
<form method="get">
<table>
<tr>
<td>Buyer's Name: </td>
<td><input type="text" name="name" size="30"></input></td>
</tr>
<tr>
<td>Street Address: </td>
<td><input type="text" name="street" size="30"></input></td>
</tr>
<tr>
<td>Zip Code: </td>
<td><input type="text" name="zip" size="10" onkeyup="getPlace(this.value)"></input></td>
</tr>
<tr>
<td>City </td>
<td><input type="text" name="city" size="30" id="city"></input></td>
</tr>
<tr>
<td>State</td>
<td><input type="text" name="state" size="30" id="state"></input></td>
</tr>
<tr>
<td>Number</td>
<td><input type="number" name="number" size="30" id="name" value="2"></input></td>
</tr>
<tr>
<td>Search</td>
<td><input type="search" name="term" id="term"></input></td>
</tr>
<tr>
<td>Range</td>
<td><input type="range" min="0" max="1" step="0.01"></input></td>
</tr>
<tr>
<td>Color</td>
<td><input type="color" name="favcolor" ></input></td>
</tr>
<tr>
<td>Date</td>
<td><input type="date" name="eventStart" id="eventstart"></input></td>
</tr>
<tr>
<td>Time</td>
<td><input type="time" name="eventTime" id="eventTime"></input></td>
</tr>
<tr>
<td>Week</td>
<td><input type="week" name="week" id="week"></input></td>
</tr>
<tr>
<td>Month</td>
<td><input type="month" name="month" id="month"></input></td>
</tr>
<tr>
<td>Local DT</td>
<td><input type="datetime-local" name="localDT" id="localDT"></input></td>
</tr>
<tr>
<td>TelPhone</td>
<td><input type="tel" name="phone" id="phone" placeholder="e.g. 000-000-0000" autocomplete="on"
pattern="[0-9]{3}[-][0-9]{3}[-][0-9]{4}" required
title="Please provide your phone number in the following format:000-000-0000"></input>
</td>
</tr>
<tr>
<td>Datalists</td>
<td><input type="text" name="coffee" list="coffees">
<datalist id="coffees">
<option value="Americano"></option>
<option value="Cappuccino"></option>
<option value="Flat White"></option>
<option value="Latte"></option>
</datalist>
</input>
</td>
</tr>
<tr>
<td>Email</td>
<td><input type="email" name="email" id="email" placeholder="e.g. joe@example.com" required></input></td>
</tr>
<tr>
<td>video</td>
<td><video src="girl.rmvb" width="300" height="225" controls poster="py.jpg"></video></td>
</tr>
</table>
<img src="popcorn.jpg" alt="picture of Popcorn" height="550px" ></img>
<p><input type="submit" value="Submit Order"></input>
<input type="reset" value="Clear Order Form"></input>
</p>
</form>
</body>
</html>
2. /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///popcornA.js
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
function getPlace(zip){
var xhr=new XMLHttpRequest();
xhr.onreadystatechange=function(){
if(xhr.readyState==4&&xhr.status==200){
var result=xhr.responseText;
//When readyState is less than 4, the receiver function gets the response
//text, uses the split method to separate it into city and state, and sets
//the text boxes for city and state to the values produced by split.
var place=result.split(', ');
document.getElementById("city").value=place[0];
document.getElementById("state").value=place[1];
}
}
xhr.open("GET","getCityState.php?zip="+zip,true);
xhr.send(null);
}
3. //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//getCityState.php
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
<?php
$cityState=array("81611" => "Aspen, Colorado",
"81411" => "Bedrock, Colorado",
"80908" => "Black Forest, Colorado",
"80301" => "Boulder, Colorado",
"81127" => "Chimney Rock, Colorado");
$zip=$_GET["zip"];
if (array_key_exists($zip, $cityState)) {
print $cityState[$zip];
}
else
{
print " , ";
}
?>
- 使用Ajax来自动帮用户填写信息
- 利用DWR来自动填写表格
- 使用Ajax自动填写表单
- 使用Ajax自动填写表单
- 使用数据库的方式来自定义存储用户session信息
- 使用auto_ptr来自动释放内存
- 使用主题来自动包装控件样式
- 使用kickstart来自动安装Linux操作系统
- Servlet使用cookie来自动登录
- 通过Push信息来自动启动JAVA移动应用程序
- 通过Push信息来自动启动JAVA移动应用程序
- AJAX XML 实例 下面的例子将演示网页如何使用 AJAX 来读取来自 XML 文件的信息：
- 数独自动填写程序
- 在Eclipse中使用Ant来自动编译J2me程序
- 使用winrar来自动备份domino服务器数据
- 使用TFS来自动部署站点和Window Service
- 使用T4 模板来自动生成WCF 代理类 代码
- 深度学习第一课：使用autograd来自动求导
- ****** 如何使Android应用程序获取系统权限
- 文献检索与阅读技巧：如何高效的阅读和学习论文文献
- xaml中VisualState的使用
- ajaxFileUpload上传文件时传参 返回json
- 从epoll构建muduo-11 单线程Reactor网络模型成型
- 使用Ajax来自动帮用户填写信息
- Django DateField DateTimeField TimeField
- 大数据与网络科学
- Erlang学习：游戏服务端学习代码
- 蓝港在线王峰谈手游
- 学习方式
- PHP与MongoDB简介|安全|M+PHP应用实例
- Sorting_Searching 读入数字流求rank @CareerCup
- 执行能力
