Điều đó muốn được thực hiện với AJAX hoặc WebSocket, với jQuery bạn có thể có một cái gì đó như:
JS:
$('#username').on('change input', function(){
var username = $(this).val();
// Here you send - post - data to the .php file which deals with as
// a regular post request, some thing could be said for $.get as GET request
$.post('check_username.php', { username : username}, function(data){
if(data == 1){
// if data was 1, means the php found that username already in
// the database and echoed 1 back
$(this).addClass('errorMsg').text('This username is already taken.');
}
});
});
PHP:
if(isset($_POST['username'])){
$username = escape($_POST['username']);
$validate = new Validation();
$validation = $validate->checkUniq('users', 'username', $username);
$validation = ($validation == 0) ? 0 : 1;
echo $validation;
}
sử dụng jQuery cung cấp cho bạn các chức năng như $.ajax(), $.post(), $.get(), hai hàm sau là các phím tắt.
Tuy nhiên, nếu bạn mong đợi số lượng lớn người dùng làm việc trên cùng một dữ liệu với biểu mẫu và bạn tiếp tục gửi dữ liệu ra và quay lại tất cả người dùng sẽ đặt nhiều tải trên máy chủ.
Trên web Mặt khác WebSocket công trình bằng cách mở một kênh kết nối giữa máy chủ và người dùng, kênh kết nối này vẫn được mở cho đến khi người sử dụng bị ngắt kết nối, bằng cách nào đó điều này không làm cho nhiều tải trên máy chủ, tôi thiên đường' t làm việc với WebSocket nhưng tôi đã đọc vài bài báo và xem vài video trên YouTube mà hầu hết trong số họ là về việc tạo ra các ứng dụng trò chuyện thời gian thực hoặc các trò chơi web đa người dùng.
Đối với PHP có this PHP-Websockets, và Ratchet library này, cũng WebSockets the UNIX way này mà không chỉ dành cho PHP.
UPDATE 1: Upon a comment từ OP, chúng ta hãy giả sử chúng ta có một tương tự - nhưng đơn giản hơn - tình hình, có những file sau tất cả vào mức độ cùng một tập tin:
data.txt: - chỉ được sử dụng thay cho cơ sở dữ liệu để trình diễn
title 0 , comment number 0
title 1 , comment number 1
title 2 , comment number 2
JS
$(document).ready(function() {
// for initializing we call fetchData function as soon as DOM is ready
// then re-call it every 10,000 milliseconds to update the input values with new
// fetched data , that could have been changed by other users.
fetchData();
setInterval(fetchData, 10000);
// on any button click we get the numeric index value, using this value
// to pick correspnding title and comment values, then send a POST
// request to foo.php and on response data we call updateHTML
$('.buttons').on('click', function(){
indexV = $(this).attr('id').replace('btn-', '');
titleV = $('#mrp-title-' + indexV).val();
commentV = $('#comment-' + indexV).val();
$.post('foo.php', { index : indexV, title:titleV, comment: commentV}, function(data){
if(data){
updateHTML(data);
}
});
});
// Making a get request to fetch fresh data
function fetchData(){
$.get('foo.php', function(data){
updateHTML(data);
});
}
// Update title and comment inputs values
function updateHTML(data){
var titleID, titleV, commentID, commentV, indexV, content;
// using jQuery parseJSON function to convert the JSON response
// to and array, then loop through this array to update inputs
// with new title and comment values.
content = $.parseJSON(data);
for(var i = 0; i < content.length; i++){
titleID = '#mrp-title-' + i;
titleV = content[i].title,
commentID = '#comment-' + i;
commentV = content[i].comment;
$(titleID).val(titleV);
$(commentID).val(commentV);
}
}
});
HTML:
<!-- this is usually generated with PHP -->
<div id="output">
<label for="mrp-title-0">Title #0:</label>
<input type="text" id="mrp-title-0" class="titles" value="">
<label for="comment-0">Comment #0:</label>
<input type="text" id="comment-0" class="comments" value="">
<button id="btn-0" class="buttons">Save Changes</button>
<hr>
<label for="mrp-title-1">Title #1:</label>
<input type="text" id="mrp-title-1" class="titles" value="">
<label for="comment-1">Comment #1:</label>
<input type="text" id="comment-1" class="comments" value="">
<button id="btn-1" class="buttons">Save Changes</button>
<hr>
<label for="mrp-title-2">Title #2:</label>
<input type="text" id="mrp-title-2" class="titles" value="">
<label for="comment-2">Comment #2:</label>
<input type="text" id="comment-2" class="comments" value="">
<button id="btn-2" class="buttons">Save Changes</button>
</div>
foo.php:
<?php
if(isset($_POST['index']) && isset($_POST['title']) && isset($_POST['comment'])){
// if there's a POST request, we retrieve the data.txt content as an array
// depending on the POST index value we change the corresponding item in
// the array to update title and comment values, then write the array as
// new content of the data.txt with the new array $foo.
$index = $_POST['index'];
$title = $_POST['title'];
$comment = $_POST['comment'];
//Do validation and sanitizing here
$temp = '';
$foo = getContent();
$foo[$index]['title'] = $title;
$foo[$index]['comment'] = $comment;
for($i = 0; $i < count($foo); $i++) {
$temp .= $foo[$i]['title'] . ' , ' . $foo[$i]['comment'] . "\n";
}
$temp = trim($temp);
file_put_contents('data.txt', $temp);
}else{
// if no POST request, no changes happened and our array is same as file content
$foo = getContent();
}
// we encode $foo as JSON and echo it back to javascript
$jsonFoo = json_encode($foo);
echo $jsonFoo;
// getting data.txt content and return an array of the content
function getContent(){
$bar = array();
$data = file_get_contents('data.txt');
$rows = explode("\n", $data);
foreach ($rows as $row) {
$cols = explode(",", $row);
$title = trim($cols[0]);
$comment = trim($cols[1]);
$bar[] = array('title' => $title, 'comment' => $comment);
}
return $bar;
}
cho các tập tin trên càng sớm sớm DOM đã sẵn sàng, chúng ta gọi là fetchData() lần đầu tiên để cư giá trị đầu vào với dữ liệu từ databas - data.txt. trong ví dụ này thay vì cơ sở dữ liệu để đơn giản -, sau đó chúng tôi gọi fetchData() cứ 10 giây một lần bằng cách sử dụng javascript setInterval(), sao cho một số giá trị đầu vào đã được thay đổi bởi userX, tất cả người dùng khác sẽ thấy kết quả được cập nhật trên màn hình của họ sau 10 giây , giả sử 10 giây là đủ, nó có thể ít hơn 10 giây nhưng người dùng sẽ không có thời gian để thay đổi một giá trị đầu vào ngay cả, cũng là khoảng thời gian ít hơn bạn đặt tải nhiều hơn bạn đặt trên máy chủ và ngược lại.
Nếu bạn tạo cấu trúc cùng một tập tin với cùng một mã như trên trên máy chủ thử nghiệm - localhost ví dụ - và mở trang web đó có tất cả các lĩnh vực đầu vào và các nút trong Chrome - nhưuserX - và Firefox - nhưuserY - và IE - nhưuserZ - ví dụ, thay đổi giá trị của một trong những lĩnh vực đầu vào và nhấn tương ứng "Save Changes" 's button trong chúng ta hãy nói 'Chrome', bạn sẽ thấy giá trị của cùng một trường đã được cập nhật trong "Firefox" và "IE" sau 10 giây ds tự động.
Vì vậy, bạn có thể làm cho PHP của bạn echo các giả $result mảng SAUjson_encode nó giống như trong ví dụ của tôi, và trong javascript, sử dụng đầu tiên jQuery $.parseJSON() chức năng để chuyển đổi đối tượng JSON vào một vòng lặp mảng thông qua kết quả và đẩy mỗi giá trị hàng vào mrp_data_callbacks, và đó là nó!
tôi đoán đây chỉ là một lý do tại sao tất cả mọi người thấy nhiều server-side của họ với một thiết bị đầu cuối API RESTful. .. một cái gì đó như http://coreymaynard.com/blog/creating-a-restful-api-with-php/ – ymz