<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
<title>jquery ajax無重新整理資料提交執行個體</title>
</head>
<body>
<div id="contact_form">
<form name="contact" action="">
<fieldset>
<label for="name" id="name_label">name</label>
<input type="text" name="name" id="name" size="30" value="" class="text-input" />
<label class="error" for="name" id="name_error">this field is required.</label>
<label for="email" id="email_label">return email</label>
<input type="text" name="email" id="email" size="30" value="" class="text-input" />
<label class="error" for="email" id="email_error">this field is required.</label>
<label for="phone" id="phone_label">return phone</label>
<input type="text" name="phone" id="phone" size="30" value="" class="text-input" />
<label class="error" for="phone" id="phone_error">this field is required.</label>
<br />
<input type="submit" name="submit" class="button" id="submit_btn" value="send" />
</fieldset>
</form>
</div>
您可能會注意到，我已經包括一個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("<div id='message'></div>");
$('#message').html("<h2>contact form submitted!</h2>")
.append("<p>we will be in touch soon.</p>")
.hide()
.fadein(1500, function() {
$('#message').append("<img id='checkmark' src='images/check.png' />");
});
}
});
return false;
ajax
$.ajax({
type: "post",
url: "bin/process.php",
data: datastring,
success: function() {
$('#contact_form').html("<div id='message'></div>");
$('#message').html("<h2>contact form submitted!</h2>")
.append("<p>we will be in touch soon.</p>")
.hide()
.fadein(1500, function() {
$('#message').append("<img id='checkmark' src='images/check.png' />");
});
}
});
return false;
</body>
</html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
