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

2008年10月27日，由菲利普Beel · 6评论




AJAX （异步JavaScript和XML）已成为一个非常流行的工具，在网页设计。 本教程将教你如何使用PHP和jQuery AJAX接触形式。 在行动中的代码在这里。

第1步 - 在HTML

要关闭启动的事情让我们创建一个新文件，并调用它 contact.html，它里面 我们要创建一个简单的HTML表单，像这样： 

 <div class="loader"> </ DIV> <div class="bar"> </ DIV> <div id="container"> <表格ID =“的ContactForm”方法=“”行动=“mail.php” > <P> <label f​​or="name">名称</标签> <input id="name" name="name" /> </ P> <P> <label f​​or="email">电子邮件< /标签> <input id="email" name="email" </ P> <P> <label f​​or="message">您的留言</标签> <textarea的ID =“消息”名称=“消息”行=“4”COLS =“30”> </ TEXTAREA> </ P> <P> <input class="submit" type="submit" value="submit"/> </ P> </ FORM> < / DIV>

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

第2步 - PHP的

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

  <？PHP
 / /声明变量
 $ NAME = $ _GET ['名称'];
 $电子邮件= $ _GET [“电子邮件”];
 $注释= $ _GET [“评论”];
 / /获取今天的日期
 todayis = DATE（“L，F J，Y，G：IA”）;
 / /设置消息的标题
 $主题=“消息”;
 $消息=“消息：$注释\ r \ n从：$ NAME \ R \ N回复：$电子邮件”;

 / /把你的电邮地址
邮件（“ [电子邮件保护]   “为主题，消息）;
 ？>
 < - ！显示在回调三江源消息 - >
 <H1> <SPAN>谢谢<h10> <？PHP的echo $名字？> </ H10> </ SPAN> </ H1>
 <P>
   <SPAN>您的信息将尽快回答。</ SPAN>
 </ P>
 <H3>消息发送：</ H3>
 <P>
   <SPAN> <？PHP的echo $ todayis？> </ SPAN>
 </ P>

在此页中，我们创建一些变量，它收集的姓名，电子邮件和即时消息的形式，然后使用PHP的mail （ ）函数将发送到指定的电子邮件地址。 为了本教程中，我已经使用[电子邮件保护] 但你可以使用任何你喜欢的。

一旦这一切都已经执行，我们将显示一个感谢你的消息。 使用我们收集的一些信息。

第3步 - jQuery的

现在到了巧妙的一部分。 要开始，我们将需要包括jQuery框架。 你可以从这个jQuery的网站，然后将其附加像这样。 

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

jQuery是一个JavaScript框架，创建使生活变得更加简单，如果你首次使用它，检查了15天的 jQuery 。 我们要创建一个函数来发送我们的形式我们没有考虑到另一页。 我们可以像这样做。 

 / /进行页面加载$（函数（）{/ /触发AJAX提交$（'＃的ContactForm“）提交（函数（）{/ /隐藏窗体$（'＃的ContactForm”），隐藏（）。 / /显示加载栏$（'装载机。“）追加($('.栏”））; $（'酒吧'{：块“）; / /发送Ajax请求。）CSS（显示}。” $。得到（“mail.php'，{名:$('#名称”）。VAL（），电子邮件:$('#电子邮件“）。VAL（）评论:$('#消息”）。VAL （）} / /返回数据的功能（数据）{/ /隐藏图形$（'吧。“）CSS（{显示：”无“。}）; $（'。装载机”）追加（数据） ;}）; / /留在页面上返回false;}）;}）;

此代码将表单被提交时触发的事件，这将隐藏的形式和显示加载栏。 美元。get（）方法是行，使Ajax调用mail.php通过GET方法发送的形式详细介绍。 一旦AJAX已成功的结果将显示在屏幕上。 这注入的内容mail.php contact.html页。

第4步 - 的CSS

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

  BODY {
  字体家庭：黑体;
 }

 。装载机{

 }

 。栏{
  显示：无;
  背景：网址（AJAX loader.gif“）不重复;
  保证金左：20像素;
  保证金：50像素;
  高度：20像素;
  宽度：230px;
 }

 ＃的ContactForm {
  浮动：左;
  位置：相对;
  背景颜色：＃fdfdfd;
  高度：200像素;
 }

 ＃集装箱{
  填充：20像素;
  浮动：左;
  位置：相对;
  高度：200像素;
  宽度：100像素;
 }

第5步 - 把它在一起

如果你把所有的代码放在一起，你contact.html看起来应该像这样。 

 <HTML> <HEAD> <script type="text/javascript" src="../jquery.js"> </ SCRIPT> <script type="text/javascript"> / /进行页面上的负载（功能（）{/ /触发AJAX提交$（'＃的ContactForm“）提交（函数（）{/ /隐藏的形式$（'＃的ContactForm”）隐藏（）; / /显示加载栏$（“。装载机“。）追加($('.栏”））; $（'。栏“），CSS（{显示：”块“}）; / /发送Ajax请求$（'mail.php'， {:$('#名称名称“）。VAL（），电子邮件:$('#电子邮件”）。VAL（），评论:$('#消息“）。VAL（）} / /返回数据的功能（数据）{/ /隐藏图形$（'吧。“）CSS（{显示：”无“}）;。$（”。装载机“）追加（数据）;}）; / /留在页面上返回false;}）;}）; </ SCRIPT> <style type="text/css"> BODY {字体家庭：。栏黑体;}装载机{} {显示：无;背景：URL（“AJAX loader.gif“）不重复;保证金左：20像素;保证金顶：50像素，高度：20像素，宽度：230px;}＃的ContactForm：左位置：亲属;背景色：＃fdfdfd;高度： 200像素;}＃集装箱{填充：20像素;浮动：左;位置：相对高度：200像素，宽度：100像素;} </ STYLE> </ HEAD> <BODY> <div class="loader"> </ DIV> <div class="bar"> </ DIV> <div id="container"> <form id="contactForm" method="" action="mail.php"> <P> <label f​​or="name">名称</标签> <input id="name" name="name" /> </ P> <P> <label f​​or="email">电子邮件</标签> <输入ID =“电子邮件”名称= “电子邮件”/> </ P> <P> <label f​​or="message">您的留言</标签> <textarea id="message" name="message" rows="4" cols="30"> < / TEXTAREA> </ P> <P> <input class="submit" type="submit" value="submit"/> </ P> </ FORM> </ DIV> </ BODY> </ HTML>

因此，只用2文件，我们已经创建了你自己的强大的AJAX conatct形式。 它的一个简单的。 下载的代码 ，并亲身体验。

评论

“如何创建你自己的Ajax联系表”
  1. 安西娅- 说：
    2008年10月28日上午在12点27分

    下一步是添加一些验证，如验证一个问题，你问用户的基础上的另一个领域。

    甜及简单的教程一个很基本的形式... ...

  2. Monkeytail - 说：
    2008年10月28日下午12时09分

    形式的attr方法得到了岗位价值..在PHP文件中使用的全局变量$ _GET .. 为什么呢？

  3. 菲利普Beel - http:// 说：
    2008年10月28日下午12:58

    您好Monkeytail，在这里我们使用一个提交功能，捕获的形式生效前，任何地方，所以被忽略后，但我可以看到为什么会看起来混乱。 美元。get（）方法指定一个触发Ajax请求时获得的方法，因此我们在mail.php使用$ _GET全局变量来捕捉信息。 谢谢的问题

  4. 合成- 说：
    2008年10月28日，在3:54！

    如果有人想在自己的PHP中使用的$ _POST jQuery代码：

    $。AJAX（{
    类型：'POST'，
    网址：“mail.php”
    数据：“名称='+ $（”＃NAME“）VAL（）+
    “和电子邮件='+ $（'＃电子邮件”）。VAL（）+
    “及评论=”+ $（“＃消息”）。VAL（）}，
    成功：功能（数据）{
    $（'酒吧。“）CSS（{显示：”无“}）;
    $（“装载机”。）追加（数据）;
    返回false;
    }
    }）;

    使用后会留下一个备用选项，如果有人的JavaScript关闭，并点击提交（返回false将不经过表单的动作将运行）。 您还必须改变形式的方法后。

  5. ashvin - http://www.islanzilla.com 说：
    2008年10月30日，在5:57！

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

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

    美元的消息，已经有$评论。

    尼斯啧啧。 Thanx。

  6. keco - 说：
    2008年11月6日上午06:12

    您好... ...感谢你。 您的文章，用jQuery解决我的问题。

教程博客