jQuery ajax无刷新数据提交实例

您可能会注意到，我已经包括一个id contact_form的div围绕整个形式包装。
请务必不要错过自己的分区形式，因为我们会需要这种包装分区以后。你
也可能注意到我都留给了的行动和空白的form标签的方法部分。我们
其实并不需要这些人，要么，因为jquery需要照顾它的所有以后。

另一个重要的事情一定要包括为每个输入域的id值。 id值
是你的jquery脚本将会寻找的过程与形式。

我已经添加了一些css教程样式和背景图像在photoshop教程出示下列形式：

2步 - 开始添加的jquery
该过程的下一步是添加一些jquery代码。我将假定您有
jquery的下载，上传到服务器，并
它引用在您的网页。

接下来，打开了另一新的网页特效文件，在你的html参考它，您将任何正常的javascript文件，
并加入以下内容：

 $(function() {
    $(".button").click(function() {
      // validate and process form here
    });
  });

第一个函数是function（）所做的是，它加载内部事件，只要在html文件已准备就绪。
如果你做任何工作之前在jquery，功能是作为jquery的相同
document.ready
功能。因此，我们从此开始，里面有我们的点击功能，在点击提交执行
按钮与"按钮"类的名称。最终我们完成的工作与这些
行代码是一样的，如果我们要添加一个onclick事件提交的html按钮。该
因此，我们做jquery的是，这对我们从我们的脚本演示清晰的分离。

表单验证

$(function() {
    $('.error').hide();
    $(".button").click(function() {
      // validate and process form here

      $('.error').hide();
     var name = $("input#name").val();
    if (name == "") {
        $("label#name_error").show();
        $("input#name").focus();
        return false;
      }
    var email = $("input#email").val();
    if (email == "") {
        $("label#email_error").show();
        $("input#email").focus();
        return false;
      }
    var phone = $("input#phone").val();
    if (phone == "") {
        $("label#phone_error").show();
        $("input#phone").focus();
        return false;
      }

    });
  });

在我们的功能，加载页面时准备就绪，我们添加一些表单验证。
但首先你看到了加元隐藏（）（'错误。。'）;。什么
这确实是隐藏与类名"错误"我们的3标签。我们希望这些标签时，不只是被隐藏
首先加载的页面，而且还当你点击提交情况下，该消息之一是向用户显示
以前。每个错误消息只应出现，如果验证不起作用了。

我们首先验证检查，如果名字场留下的空白用户，如果是的话，那么，我们
显示与name_error id标签。然后我们放置在名称输入栏位焦点的情况下，用户
在所有关于下一步该怎么做糊涂了！ （我已经学会了从来没有承担过大时，它涉及到形式
用户）。

为了更详细地解释我们是如何使这种情况发生，我们设置一个变量的名字'到的价值
输入栏位id为"名" - 一个jquery的行的所有：

var name = $("input#name").val();
  we then check if that value is blank, and if it is, we use jquery's show() method to show the label with
id "name_error":

  if (name == "") {
    $("label#name_error").show();
  }
  next, we place the form focus back on the input field with id of "name", and finally return false:

  if (name == "") {
    $("label#name_error").show();
    $("input#name").focus();
    return false;
  }
 
 
  现在，我们到达了本教程的心 - 我们的表单没有提交页面刷新，它发送的形式
到php教程的值在后台脚本。让我们所有的代码的第一个一看，然后我将打破
为更详细的下一步。新增片段下方的验证我们以前添加以下代码（和之前
按一下按钮功能被关闭了）：

var datastring = 'name='+ name + '&email=' + email + '&phone=' + phone;
  //alert (datastring);return false;
  $.ajax({
    type: "post",
    url: "bin/process.php",
    data: datastring,
    success: function() {
      $('#contact_form').html("

");
      $('#message').html("

contact form submitted!

")
      .append("

we will be in touch soon.

")
      .hide()
      .fadein(1500, function() {
        $('#message').append("");
      });
    }
  });
  return false;

ajax

$.ajax({
      type: "post",
      url: "bin/process.php",
      data: datastring,
      success: function() {
        $('#contact_form').html("

");
        $('#message').html("

contact form submitted!

")
        .append("

we will be in touch soon.

")
        .hide()
        .fadein(1500, function() {
          $('#message').append("");
        });
      }
    });
    return false;