Hướng dẫn update data without refresh page in php - cập nhật dữ liệu mà không cần làm mới trang trong php

Giả sử bạn muốn hiển thị một số nội dung nguồn cấp dữ liệu trực tiếp [giả sử livefeed.txt] trên trang web của bạn mà không cần làm mới trang thì ví dụ đơn giản hóa sau đây là dành cho bạn.live feed content [say livefeed.txt] on you web page without any page refresh then the following simplified example is for you.

Trong tệp HTML dưới đây, dữ liệu trực tiếp được cập nhật trên phần tử div của ID "Livingata"html file, the live data gets updated on the div element of id "liveData"

index.html

    Live Update
    
    


    
Loading Data...

Dưới đây autoupdate.js đọc dữ liệu trực tiếp bằng cách sử dụng đối tượng XMLHTTPREQUEST và cập nhật phần tử HTML Div trên 1 giây. Tôi đã đưa ra ý kiến ​​về hầu hết các phần của mã để hiểu rõ hơn.autoUpdate.js reads the live data using XMLHttpRequest object and updates the html div element on every 1 second. I have given comments on most part of the code for better understanding.

autoUpdate.js

window.addEventListener['load', function[]
{
    var xhr = null;

    getXmlHttpRequestObject = function[]
    {
        if[!xhr]
        {               
            // Create a new XMLHttpRequest object 
            xhr = new XMLHttpRequest[];
        }
        return xhr;
    };

    updateLiveData = function[]
    {
        var now = new Date[];
        // Date string is appended as a query with live data 
        // for not to use the cached version 
        var url = 'livefeed.txt?' + now.getTime[];
        xhr = getXmlHttpRequestObject[];
        xhr.onreadystatechange = evenHandler;
        // asynchronous requests
        xhr.open["GET", url, true];
        // Send the request over the network
        xhr.send[null];
    };

    updateLiveData[];

    function evenHandler[]
    {
        // Check response is ready or not
        if[xhr.readyState == 4 && xhr.status == 200]
        {
            dataDiv = document.getElementById['liveData'];
            // Set current data text
            dataDiv.innerHTML = xhr.responseText;
            // Update the live data every 1 sec
            setTimeout[updateLiveData[], 1000];
        }
    }
}];

Đối với mục đích thử nghiệm: Chỉ cần viết một số điều trong LiveFeed.txt - bạn sẽ được cập nhật tương tự trong index.html mà không cần làm mới.

livefeed.txt

Hello
World
blah..
blah..

Lưu ý: Bạn cần chạy mã trên trên máy chủ web [ví dụ: // localhost: 1234/index.html] không phải là tệp HTML của máy khách [ví dụ: tệp: /// c:/index.html]. You need to run the above code on the web server [ex: //localhost:1234/index.html] not as a client html file [ex: file:///C:/index.html].

Được gửi bởi Argie vào thứ Năm, ngày 28 tháng 1 năm 2021 - 11:46.

Xin chào mọi người, tính năng của hướng dẫn này là nó cho phép bạn lưu dữ liệu vào cơ sở dữ liệu và hiển thị dữ liệu từ cơ sở dữ liệu mà không làm mới trang. Tôi đã sử dụng AJAX và PHP trong hướng dẫn này. Mục tiêu của chúng tôi cho hướng dẫn này là tạo một ứng dụng web đơn giản có hình thức đơn giản sẽ dẫn đến việc tự động tải dữ liệu sau khi phản hồi thành công của việc lưu dữ liệu. Để bắt đầu mã hóa, hãy làm theo các bước được cung cấp dưới đây.

Requirements:

• Tải xuống và cài đặt bất kỳ máy chủ web cục bộ nào như XAMPP/WAMP.

Bước 1: Tạo cơ sở dữ liệu của chúng tôi

Để tạo cơ sở dữ liệu:

1. Nếu bạn đang sử dụng XAMPP/WAMP, hãy mở bảng điều khiển của XAMPP/WAMP và Strat "Apache" và "MySQL"."Apache" and "MySQL".
2. Mở phpmyadmin trong trình duyệt web. [ // localhost/phpmyadmin]
3. Tạo một cơ sở dữ liệu mới đặt tên "AJAXPHP".
4. Sau khi tạo tên cơ sở dữ liệu, nhấp vào SQL và dán mã bên dưới.

Bước 2: Tạo biểu mẫu của chúng tôi

Trong đó, chúng tôi sẽ tạo biểu mẫu của chúng tôi hiển thị dữ liệu từ cơ sở dữ liệu. Để tạo biểu mẫu của chúng tôi, hãy sao chép mã bên dưới và lưu nó dưới dạng "index.php"."index.php".

Save and load data without leaving the page using PHP and Ajax
$[document].ready[function[] {
	//##### Add record when Add Record Button is click #########
	$["#content-form"].submit[function [e] {
			e.preventDefault[];
			if[$["#contentText"].val[]==='']
			{

  

				alert["Please enter some text!"];
				return false;
			}
		 	var myData = 'content_txt='+ $["#contentText"].val[]; //build a post data structure
			jQuery.ajax[{
			type: "POST", // Post / Get method
			url: "response.php", //Where form data is sent on submission
			dataType:"text", // Data type, HTML, json etc.
			data:myData, //Form variables
			success:function[response]{
				$["#responds"].append[response];
				$['#contentText'].val[""]
			},
			error:function [xhr, ajaxOptions, thrownError]{
				alert[thrownError];
			}
			}];
	}];
}];
.form_style #textarea {
	border: 1px solid #CCCCCC;
}
.form_style #FormSubmit {
	display: block;
	background: #003366;

  

	border: 1px solid #000066;
	color: #FFFFFF;
	margin-top: 5px;
}
#responds{
	margin: 0px;
	padding: 0px;
	list-style: none;
	width:100%;
}
#responds li{
	list-style: none;
	padding: 10px;
	background: #D1CFCE;
	margin-bottom: 5px;
	border-radius: 5px;
	font-family: arial;
	font-size: 13px;
}
.del_wrapper{float:right;}.content_wrapper {
	width: 500px;
	margin-right: auto;
	margin-left: auto;
}
.item-list{
	text-align: left;
}

  

#contentText{
	width: 100%;
}
Save and Load Data without leaving the page using PHP and Ajax

Add record