<form id="loginForm">
<input type="text" id="username">
<input type="password" id="password">
<button id="loginBtn">登錄</button>
</form>

接下來，我們可以使用JavaScript來使用Ajax的data屬性來獲取頁面中輸入框的值，并發送給服務器。首先，我們需要獲取輸入框的元素，可以通過id來獲取。然后，我們可以使用jQuery的$.ajax()函數來發送Ajax請求。

$('#loginBtn').click(function() {
// 獲取輸入框的值
var username = $('#username').val();
var password = $('#password').val();
// 發送Ajax請求
$.ajax({
url: 'login.php',
type: 'POST',
data: {username: username, password: password},
success: function(response) {
// 處理服務器返回的數據
if(response.success) {
alert('登錄成功！');
} else {
alert('登錄失敗，請檢查用戶名和密碼！');
}
}
});
});

在上面的例子中，我們使用$.ajax()函數發送了一個POST請求到login.php頁面，其中data屬性用來傳遞登錄表單的值。服務器通過$_POST['username']和$_POST['password']來獲取這些值。通過Ajax技術，我們不需要刷新整個頁面，就可以實現登錄驗證的功能。

Ajax的data屬性還可以用于獲取頁面中的其他元素的值。例如，如果我們有一個包含一組復選框和一個提交按鈕的表單，在用戶勾選復選框后點擊提交按鈕，我們希望獲取用戶選擇的復選框的值，并將其發送給服務器進行處理。

<form id="checkboxForm">
<input type="checkbox" id="option1" value="option1">
<input type="checkbox" id="option2" value="option2">
<input type="checkbox" id="option3" value="option3">
<button id="submitBtn">提交</button>
</form>

$('#submitBtn').click(function() {
// 獲取選中的復選框的值
var checkboxes = $('input[type=checkbox]:checked');
var selectedOptions = [];
checkboxes.each(function() {
selectedOptions.push($(this).val());
});
// 發送Ajax請求
$.ajax({
url: 'process.php',
type: 'POST',
data: {options: selectedOptions},
success: function(response) {
// 處理服務器返回的數據
alert('提交成功！');
}
});
});

在上面的例子中，我們使用jQuery的each()函數遍歷選中的復選框，并將其值存儲在一個數組中。然后，我們使用Ajax的data屬性將數組發送給服務器。服務器可以通過$_POST['options']來獲取這個數組，并進行相應的處理。

通過上述示例，我們可以看到，通過Ajax的data屬性，我們可以方便地獲取頁面中的各種元素的值，并發送給服務器進行處理。這種方式避免了頁面的刷新，并提供了更好的用戶體驗。在實際開發中，我們可以根據具體的需求，使用Ajax的data屬性來獲取頁面的值并進行相應的操作。