使用Ajax来自动帮用户填写信息

转载 2013年12月02日 02:42:58

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 " , ";
}
?>

cookie入门理解--自动填写用户登录信息的实现原理

cookie就是服务器放在用户机器上的一小块信息。cookie以前用来保存登录信息,这样用户就不用每次从同一台机器访问页面都要再次输入登录信息。cookie是第一个js可以利用的客户端-服务端的通信手...

巧用Ajax的 仅提交一次有效信息 提高用户体验

巧用Ajax的beforeSend 提高用户体验 jQuery是经常使用的一个开源js框架,其中的$.ajax请求中有一个beforeSend方法,用于在向服务器发送请求前执行一些动作。 具体可参考...

AJAX登入集成CAS的项目获取用户信息

获取与CAS集成项目的用户信息 hello var username="11"; v...

JSP+Servlet+Ajax实现后台异步检验用户信息实例

下面介绍JSP前台表单内容通过Ajax异步提交到后台Servlet进行校验(校验方式多种,包括提取数据库信息,校验用户名是否重复等),异步在JSP表单页面显示校验结果信息的基本过程。  一、说明...

ajax--用户信息的校验

--Servlet代码 package com.ajax.servlets; import java.io.IOException; import java.util.Arrays; import...

php AJAX实例根据邮编自动完成地址信息

一个根据邮编自自动完成地址信息的php+ajax示例,感兴趣的同学参考下,本示例没有带邮件数据库,请自行下载,感兴趣的同学参考下. 当客户输入一个POSTCODE后,zipcode.PHP就接收...
  • hhaeals
  • hhaeals
  • 2015年01月10日 14:44
  • 105

asp.net JQuery Ajax 结合 WebService 自动匹配 用户是否存在验证

创建WebService GetAuto.asmx的cs写入方法 using System; using System.Collections.Generic; using System.Linq;...

ASP.ENT Ajax自动补全(用户控件版)

源码下载 通过大量测试并升级的最终使用效果: 新增AjaxAutocompleteTable.ascx ...

提供了自动记录用户信息DLL

  • 2008年11月10日 14:07
  • 999KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:使用Ajax来自动帮用户填写信息
举报原因:
原因补充:

(最多只允许输入30个字)