Bagaimana untuk membuat papan mesej dengan jquery

jQuery ialah perpustakaan JavaScript yang digunakan secara meluas dalam pembangunan laman web. Menambah papan mesej ke tapak web adalah keperluan biasa jQuery menyediakan banyak ciri yang boleh membantu pembangun dengan cepat membuat papan mesej yang sangat interaktif.

Artikel ini akan mengajar anda menggunakan jQuery untuk mencipta papan mesej, termasuk reka bentuk halaman hadapan dan pemprosesan data latar belakang.

Reka bentuk halaman papan mesej

Langkah pertama ialah mereka bentuk halaman papan mesej Anda boleh menggunakan HTML dan CSS untuk mencipta halaman yang cantik. Struktur asas papan mesej adalah seperti berikut:

<div id="messages">
  <h2>留言板</h2>
  <form id="message-form">
    <div class="form-group">
      <label for="name">姓名：</label>
      <input type="text" id="name" name="name" required>
    </div>
    <div class="form-group">
      <label for="message">留言：</label>
      <textarea id="message" name="message" required></textarea>
    </div>
    <button type="submit">提交留言</button>
  </form>
  <ul id="message-list"></ul>
</div>

Dalam halaman ini, kami mempunyai borang untuk menghantar mesej. Borang ini termasuk dua medan: nama dan mesej, kedua-duanya diperlukan. Selepas menghantar mesej, kandungan mesej akan dipaparkan pada halaman dalam bentuk senarai.

Seterusnya tambah gaya CSS untuk menjadikan papan mesej kelihatan lebih cantik:

#messages {
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
}

#message-form {
  display: inline-block;
  text-align: left;
}

.form-group {
  margin-bottom: 10px;
}

.form-group label {
  display: inline-block;
  width: 80px;
}

.form-group input,
.form-group textarea {
  width: 300px;
}

button[type="submit"] {
  margin-top: 10px;
  padding: 6px 25px;
  border: none;
  border-radius: 5px;
  background-color: #0070c0;
  color: #fff;
  cursor: pointer;
}

#error-message {
  color: red;
  margin-bottom: 10px;
}

#message-list {
  margin-top: 20px;
  list-style: none;
}

.message-item {
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid #ccc;
}

.message-item span {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}

.message-item p {
  margin: 0;
}

Sekarang halaman papan mesej selesai, kita perlu menggunakan jQuery untuk menambah beberapa interaktiviti.

Gunakan jQuery untuk menyerahkan mesej

Mula-mula, tambahkan pengecam dengan id "borang-mesej" pada borang, kemudian dapatkan borang melalui jQuery dan tambahkan acara serah.

$(document).ready(function() {
  $('#message-form').on('submit', function(e) {
    e.preventDefault();

    // 处理表单提交逻辑
  });
});

$(document).ready() digunakan di sini untuk memastikan halaman dimuatkan sepenuhnya sebelum menjalankan kod jQuery. Apabila pengguna mengklik butang hantar, acara serah borang akan dicetuskan dan fungsi tersuai dipanggil untuk mengendalikan penyerahan borang.

function postMessage(name, message) {
  $.ajax({
    method: 'POST',
    url: '/messages', // 需要在后台处理的POST请求路径
    data: {name: name, message: message}
  })
  .done(function(response) {
    // 在留言列表中添加新留言
  })
  .fail(function(jqXHR, textStatus) {
    // 显示错误信息
  });
}

$('#message-form').on('submit', function(e) {
  e.preventDefault();

  var name = $('#name').val();
  var message = $('#message').val();

  postMessage(name, message);
});

Dalam fungsi ini, gunakan fungsi $.ajax() untuk menghantar permintaan POST dan hantar nama serta kandungan mesej ke latar belakang sebagai data POST. Selepas berjaya menghantar permintaan, gunakan kaedah .done() untuk memproses data yang dikembalikan oleh latar belakang dan menambah mesej baharu pada senarai mesej. Jika permintaan gagal, anda boleh menggunakan kaedah .fail() untuk memaparkan mesej ralat.

Paparkan senarai mesej

Sekarang setelah logik penyerahan borang telah dilaksanakan, anda perlu menggunakan jQuery untuk memaparkan senarai mesej. Mula-mula, buat elemen ul dengan id "senarai mesej" dalam halaman untuk menyimpan mesej. Selepas

<ul id="message-list"></ul>

, anda boleh menambah fungsi loadMessages(), yang digunakan untuk mendapatkan senarai mesej dari latar belakang dan memaparkannya pada halaman.

function loadMessages() {
  $.ajax({
    method: 'GET',
    url: '/messages' // 需要在后台处理的GET请求路径
  })
  .done(function(messages) {
    $('#message-list').empty();
    $.each(messages, function(index, message) {
      $('#message-list').append(
        '<li class="message-item">' +
        '<span>' + message.name + '</span>' +
        '<p>' + message.message + '</p>' +
        '</li>'
      );
    });
  })
  .fail(function(jqXHR, textStatus) {
    // 显示错误信息
  });
}

$(document).ready(function() {
  loadMessages();

  // 留言提交逻辑
});

Dalam fungsi ini, gunakan fungsi $.ajax() untuk menghantar permintaan GET untuk mendapatkan data senarai mesej yang disimpan di latar belakang. Selepas berjaya memperoleh data, gunakan kaedah .done() untuk melintasi data senarai mesej dan tambahkan setiap mesej pada elemen ul dengan id "senarai mesej".

Kini, papan mesej jQuery telah lengkap! Anda boleh menulis kod sebagai sebahagian daripada Angular atau React dan melengkapkan pembangunan papan mesej menggunakan piawaian JS moden. Tidak kira apa timbunan teknologi anda, jQuery ialah alat yang tidak boleh digantikan dalam pembangunan web.

Atas ialah kandungan terperinci Bagaimana untuk membuat papan mesej dengan jquery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!