教程博客

如何创建您自己的Ajax联系表

2008年10月27日由菲利普Beel · 6评论 邮政Twitter 邮政雅虎口碑 张贴到Digg 邮政的Reddit 邮政StumbleUpon




阿贾克斯 （异步JavaScript和XML）已经成为非常流行的网页设计工具。 本教程将教你如何使一个Ajax的联系表使用PHP和jQuery。 见行动代码这里。

第1步-的HTML

要启动东西了，可以创建一个新文件并调用它contact.html，里面 我们要建立像这样一个简单的HTML表单： 

  <div class="loader">“/分区” 
  <div class="bar">“/分区” 
  <div id="container"> 
    <form id="contactForm" method="" action="mail.php"> 
    <p> 
      <label for="name">名称“/标签” 
      <input id="name" name="name" /> 
    “/页” 
    <p> 
      <label for="email">电子邮件“/标签” 
      <input id="email" name="email" /> 
    “/页” 
    <p> 
      <label for="message">您的留言“/标签” 
      <textarea id="message" name="message" rows="4" cols="30"“”/ textarea的“ 
    “/页” 
    <p> 
      <input class="submit" type="submit" value="submit"/> 
    “/页” 
    “/表格” 
  “/分区”

现在我们有一个标准的接触形式，将提交mail.php

第2步-的PHP

现在我们要创建一个PHP称为mail.php这将处理表单的结果文件。 

  “？PHP的 
  / /声明的变量 
  $名称= $ _GET ['姓名']; 
  $电子邮件= $ _GET ['电子邮件']; 
  $评论= $ _GET ['评论']; 
  / /获取今天的日期 
  $ todayis =日期（“升，F的坐标，克：保险业”）; 
  / /设置为邮件标题 
  $主题=“消息”; 
  $消息=“消息：$评论\ṛ\ n从：$名\ṛ\ ñ回复：$电子邮件”; 

  / /把你的电子邮件地址在这里 
 电子邮件（“email@address.com”，$主题，$消息）; 
  ？“ 
  “！ -显示在回调三江源消息- ” 
  <h1> <span>谢谢<h10>“？PHP的echo $名字？”“/ h10”“/跨度”“/ H1基因” 
  <p> 
    <span>您的信息将得到回答，尽快。“/跨度” 
  “/页” 
  <h3>消息发送：“/ H3的” 
  <p> 
    <span>“？PHP的echo $ todayis？”“/跨度” 
  “/页”

在这个网页，我们创造了一些变数，从形式收集的姓名，电子邮件和即时消息，然后使用PHP 的mail（）函数将寄到指定的电子邮件地址。 就本教程中，我为了用email@example.com，但您可以使用任何你喜欢的。

一旦执行所有这一切，我们将显示一条消息感谢你。 使用我们所收集到的一些信息。

第三步-在jQuery

现在到了聪明的一部分。 首先我们需要包含了jQuery框架。 你可以从jQuery的网站本，然后将其附加像这样。 

  <script type="text/javascript" src="yourDirectory/jquery.js">

jQuery是一个JavaScript框架，创建使生活更容易，如果它的第一次使用它，检查jQuery的15天 。 我们要创建一个函数发送不带我们到另一个网页的形式。 我们可以不喜欢这样的。 

  / /网页上进行负载 
  $（函数（）（ 
    / /触发提交阿贾克斯 
    $（'＃联系表'）。提交（函数（）（ 

      / /隐藏表格 
      $（'＃联系表'）。隐藏（）; 

      / /显示加载栏 
      $（'。装载机'）。追加($('.酒吧'））; 
      $（'。酒吧'）。的CSS（（显示：'块'））; 

      / /发送Ajax请求 
      $。获得（'mail.php'，（名称:$('#名称'）。缬氨酸（）， 
                      电子邮件:$('#电子邮件'）。缬氨酸（）， 
                      评论:$('#消息'）。缬氨酸（））， 

      / /返回数据 
     功能（数据）（ 
        / /隐藏图形 
        $（'。酒吧'）。的CSS（（显示：'无'））; 
        $（'。装载机'）。追加（数据）; 
      ））; 

    / /停留在页面 
   返回false; 
    ））; 
  ））;

此代码时，将触发表单提交一个事件，将隐藏的形式和显示装载酒吧。 美元。获得（）是线，使阿贾克斯的要求mail.php通过发送GET方法的表格细节。 一旦阿贾克斯获得了成功，结果便会显示在屏幕上。 这注入mail.php的内容，contact.html页。

步骤4 -的CSS

最后一步是添加一些CSS样式的形式，以确保我们可以显示和隐藏的东西正确。 它不是一个neccesity，但使它更清洁。 

 身体（ 
   字体家庭：海尔维希; 
  ） 

  。装载机（ 

  ） 

  。酒吧（ 
   显示：无; 
   背景：网址（'阿贾克斯- loader.gif'）不重复; 
   保证金左：20px; 
   保证金顶：50像素; 
   身高：20px; 
   宽度：230px; 
  ） 

  ＃联系表格（ 
   浮动：左; 
   位置：亲属; 
   背景颜色：＃fdfdfd; 
   高度：200px; 
  ） 

  ＃集装箱（ 
   填充：20px; 
   浮动：左; 
   位置：亲属; 
   高度：200px; 
   宽度：100px; 
  ）

第5步-放在一起

如果你把所有的代码连同您的contact.html应该像这样。 

 <html>的<head> <script type="text/javascript" src="../jquery.js">“/脚本”<script type="text/javascript"> / /在页面加载从事$（函数（）（/ /触发AJAX在提交$（'＃联系表'）。提交（函数（）（/ /隐藏的形式$（'＃联系表'）。隐藏（）; / /显示载入栏$（'。装载机'）。追加($('.酒吧'））; $（'。酒吧'）。的CSS（（显示：'块'））; / /发送Ajax请求$。获得（'mail.php'， （名称:$('#名称'）。缬氨酸（），电子邮件:$('#电子邮件'）。缬氨酸（），评论:$('#消息'）。缬氨酸（）），/ /返回数据的功能（数据）（/ /隐藏图形$（'。酒吧'）。的CSS（（显示：'无'））; $（'。装载机'）。追加（数据）;））; / /停留在页面返回false;））;））“/脚本”<style type="text/css">机构（字体家庭：海尔维希;）。装载机（）。列（显示：无;背景：网址（'阿贾克斯， loader.gif'）不重复，利润左：20px;保证金顶：50像素，高度：20px;宽度：230px;）＃联系表格（浮动：左;位置：亲属;背景颜色：＃fdfdfd;高度： 200px;）＃集装箱（填充：20px;浮动：左;位置：亲属;高度：200px;宽度：100px;）“/样式”“/头”的<Body> <div class="loader">“/分区” <div class="bar">“/分区”<div id="container"> <form id="contactForm" method="" action="mail.php"> <p> <label for="name">名称“/标签”<input id="name" name="name" />“/页”<p> <label for="email">电子邮件“/标签”“输入身份证=”电子邮件“名称= “电子邮件”/“”/页“<p> <label for="message">你的留言”/标签“<textarea id="message" name="message" rows="4" cols="30"”“ / textarea的“”/页“<p> <input class="submit" type="submit" value="submit"/>”/页“”/表“”/分区“”/体“”/的HTML“

因此，只用2我们创造你自己的强大的Ajax conatct表单文件。 它如此简单。 下载代码 ，并亲身体验。



评论

6回应“如何创建您自己的Ajax联系表”
  1. 安西- 说：
    08年10月28日在上午12时27分

    下一步是添加另一个验证这样一个问题，你问基于用户的验证领域的一些实物。

    甜和简单的一个非常基本形式教程...

  2. Monkeytail - 说：
    08年10月28日在12:09 pm

    该表格的Attr方法得到了价值..后在PHP文件中使用的全球瓦尔是$ _GET .. 为什么？

  3. 菲利普Beel - http:// 说：
    08年10月28日在12:58 pm

    您好Monkeytail，我们在这里使用的是提交功能，捕捉前的形式去任何地方，所以该职位将被忽略，但是我可以看到为什么会显得相当混乱。 美元。获得（）指定了GET Ajax请求时触发的方法，所以我们使用mail.php了$ _GET全球VAR的捕捉信息。 感谢您的问题

  4. Synthe - 说：
    08年10月28日在下午3时54分

    如果有人想利用自己的PHP的$彦博jQuery代码将是：

    $。阿贾克斯（（
    类型：'后'，
    网址：'mail.php'，
    数据：'名称='+ $（'＃姓名'）。缬氨酸（）+
    '＆电子邮件='+ $（'＃电子邮件'）。缬氨酸（）+
    '＆评论='+ $（'＃消息'）。缬氨酸（）），
    成功：功能（数据）（
    $（'。酒吧'）。的CSS（（显示：'无'））;
    $（'。装载机'）。追加（数据）;
    返回false;
    ）
    ））;

    使用后会留下一个退而求其次的选择，如果有人关闭JavaScript，他们点击提交（返回虚假不会去的形式，通过和行动将运行）。 你也必须改变方式方法发布。

  5. 乔泰- http://www.islanzilla.com 说：
    二零零八年一十月三十日在下午5点57分

    Theres一处打字错误：
    “
    第2步-的PHP

    “？PHP的
    / /声明的变量
    $名称= $ _GET ['姓名'];
    $电子邮件= $ _GET ['电子邮件'];
    $消息= $ _GET ['评论'];
    “

    $消息应该是$评论。

    尼斯图坦卡蒙。 Thanx。

  6. keco - 说：
    08年11月6日在上午06时12分

    喜...感谢你们。 您已解决了我与jQuery的问题。

教程博客