Laksanakan dinding Weibo dan kemas kini masa nyata menggunakan PHP dan XML-tutorial php-php.cn

Laksanakan dinding Weibo dan kemas kini masa nyata menggunakan PHP dan XML

WBOY

Lepaskan： 2023-08-09 08:08:02

asal

1282 orang telah melayarinya

Laksanakan dinding Weibo dan kemas kini masa nyata menggunakan PHP dan XML

Gunakan PHP dan XML untuk melaksanakan dinding Weibo dan kemas kini masa nyata

Dengan populariti media sosial, Weibo telah menjadi platform penting untuk orang ramai berkongsi kehidupan harian mereka dan berkomunikasi. Menambah dinding Weibo pada halaman web membolehkan pengguna melihat mesej Weibo dalam masa nyata dan mengemas kininya dalam masa nyata. Artikel ini akan memperkenalkan cara menggunakan PHP dan XML untuk melaksanakan dinding Weibo yang ringkas dan mengemas kini secara automatik apabila Weibo baharu diterbitkan.

Pertama, kita perlu membuat halaman HTML untuk memaparkan dinding Weibo dan menerima mesej Weibo yang dimasukkan oleh pengguna. Dengan mengandaikan kami sudah mempunyai fail yang dipanggil index.html, berikut ialah struktur asasnya:

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<h2>微博墙</h2>
<div id="weiboWall"></div>
<form id="weiboForm">
  <input type="text" id="message" placeholder="输入你的消息">
  <input type="submit" value="发布">
</form>
</body>
</html>

Salin selepas log masuk

Dalam fail HTML, kami telah memperkenalkan perpustakaan jQuery dan fail JavaScript yang dipanggil "script.js". Seterusnya, kami akan menulis kod untuk berinteraksi dengan bahagian belakang dalam fail script.js.

$(document).ready(function() {
  // 当页面加载完毕后，执行以下操作
  loadData();   // 加载已有的微博消息
  setInterval(loadData, 5000);   // 每隔5秒自动更新微博消息

  $("#weiboForm").submit(function(event) {
    event.preventDefault();   // 阻止表单的默认提交动作

    // 获取用户输入的消息
    var message = $("#message").val();

    // 发送消息到后端
    $.post("post.php", {message: message}, function(response) {
      // 发布成功后刷新微博墙
      loadData();
      $("#message").val("");   // 清空输入框
    });
  });

  function loadData() {
    $.get("get.php", function(response) {
      // 清空微博墙
      $("#weiboWall").empty();
      // 将返回的XML数据解析为JavaScript对象
      var xml = $.parseXML(response);
      // 遍历解析后的数据，并将消息显示在微博墙上
      $(xml).find("message").each(function() {
        var message = $(this).find("content").text();
        var time = $(this).find("time").text();
        $("#weiboWall").append("<p>" + message + " - " + time + "</p>");
      });
    });
  }
});

Salin selepas log masuk

Dalam fail script.js, kami mula-mula menggunakan kaedah $(document).ready() jQuery untuk memastikan halaman web dimuatkan sebelum melakukan operasi seterusnya. Kami memuatkan mesej Weibo sedia ada melalui fungsi loadData() dan menggunakan fungsi setInterval() untuk mengemas kini mesej Weibo secara automatik setiap 5 saat.

Apabila pengguna memasukkan mesej dalam borang dan mengklik butang "Terbitkan", menyerahkan borang akan mencetuskan fungsi $("#weiboForm").submit(). Fungsi ini menghalang tindakan penyerahan lalai borang dan menggunakan kaedah $.post() untuk menghantar mesej ke fail post.php backend. Dalam fail post.php, kami menyimpan mesej yang diterima ke dalam fail XML.

Fungsi loadData() digunakan untuk memuatkan mesej Weibo dan memaparkannya pada dinding Weibo. Kami menggunakan kaedah $.get() untuk mendapatkan data XML mesej Weibo yang disimpan daripada fail get.php pada bahagian belakang. Kemudian, kami menggunakan kaedah $.parseXML() untuk menghuraikan data XML yang dikembalikan ke dalam objek JavaScript dan menggunakan kaedah $(xml).find() dan $(this).find() untuk mendapatkan dan memaparkan kandungan setiap mesej dan masa Weibo.

Akhir sekali, kami perlu mencipta dua fail PHP untuk mengendalikan permintaan yang dihantar oleh bahagian hadapan dan memberikan respons yang sepadan.

Dalam fail post.php, kami menggunakan perpustakaan SimpleXML untuk menyimpan mesej Weibo yang dihantar oleh pengguna ke dalam fail XML:

<?php
if(isset($_POST['message'])){
  $message = $_POST['message'];
  $time = date("Y-m-d H:i:s");

  $xml = new SimpleXMLElement('<messages></messages>');
  $messageElement = $xml->addChild('message');
  $messageElement->addChild('content', $message);
  $messageElement->addChild('time', $time);
  $xml->asXML('messages.xml');
}
?>

Salin selepas log masuk

Dalam fail get.php, kami membaca kandungan fail XML dan mengembalikannya kepada bahagian hadapan:

<?php
if(file_exists('messages.xml')){
  $xml = simplexml_load_file('messages.xml');
  header('Content-Type: text/xml');
  echo $xml->asXML();
}
?>

Salin selepas log masuk

Setakat ini, kami telah menyelesaikan kerja melaksanakan dinding Weibo dan kemas kini masa nyata menggunakan PHP dan XML. Dengan menambahkan dinding Weibo dan borang untuk menerima input pengguna dalam fail HTML, dan menggunakan PHP untuk memproses logik bahagian belakang dan menyimpan mesej Weibo melalui fail XML, kami boleh melaksanakan dinding Weibo mudah dan memaparkannya dalam masa nyata apabila Weibo baharu diterbitkan diperbaharui. Sudah tentu, ini hanyalah versi asas dan anda boleh mengembangkan dan mengoptimumkannya mengikut keperluan anda.

Atas ialah kandungan terperinci Laksanakan dinding Weibo dan kemas kini masa nyata menggunakan PHP dan XML. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!