So erstellen Sie ein Message Board mit JQuery

jQuery ist eine JavaScript-Bibliothek, die häufig in der Website-Entwicklung verwendet wird. Das Hinzufügen eines Message Boards zu einer Website ist eine häufige Anforderung. jQuery bietet eine Fülle von Funktionen, die Entwicklern dabei helfen können, schnell ein hochgradig interaktives Message Board zu erstellen.

In diesem Artikel erfahren Sie, wie Sie mit jQuery ein Message Board erstellen, einschließlich Front-End-Seitendesign und Hintergrunddatenverarbeitung.

Message-Board-Seitendesign

Der erste Schritt besteht darin, die Message-Board-Seite zu entwerfen. Sie können HTML und CSS verwenden, um eine schöne Seite zu erstellen. Die Grundstruktur des Message Boards ist wie folgt:

<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>

Auf dieser Seite haben wir ein Formular zum Senden von Nachrichten. Das Formular enthält zwei Felder: Name und Nachricht, die beide erforderlich sind. Nach dem Absenden einer Nachricht wird der Nachrichteninhalt auf der Seite in Listenform angezeigt.

Als nächstes fügen Sie CSS-Stile hinzu, um das Message Board schöner aussehen zu lassen:

#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;
}

Da die Message Board-Seite nun fertig ist, müssen wir jQuery verwenden, um etwas Interaktivität hinzuzufügen.

Verwenden Sie jQuery, um eine Nachricht zu senden

Fügen Sie zunächst eine Kennung mit der ID „message-form“ zum Formular hinzu, rufen Sie dann das Formular über jQuery ab und fügen Sie ein Übermittlungsereignis hinzu.

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

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

$(document).ready() wird hier verwendet, um sicherzustellen, dass der jQuery-Code erst ausgeführt wird, nachdem die Seite vollständig geladen ist. Wenn der Benutzer auf die Schaltfläche „Senden“ klickt, wird das Sendeereignis des Formulars ausgelöst und eine benutzerdefinierte Funktion aufgerufen, um die Formularübermittlung zu verarbeiten. $(document).ready()来确保页面完全加载之后才运行jQuery代码。当用户点击提交按钮时，会触发表单的submit事件，并且调用一个自定义的函数来处理表单提交。

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);
});

在这个函数中，使用$.ajax()函数来发送一个POST请求，将姓名和留言内容作为POST数据发送到后台。成功发送请求后，通过.done()方法来处理后台返回的数据，将新留言加入到留言列表中。如果请求失败，可以通过.fail()方法来显示错误信息。

显示留言列表

现在实现了表单的提交逻辑，接下来需要通过jQuery来显示留言列表。首先，在页面中创建一个id为"message-list"的ul元素，来存储留言。

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

之后可以添加一个loadMessages()函数，该函数用于从后台获取留言列表，并且在页面上展示出来。

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();

  // 留言提交逻辑
});

在这个函数中，使用$.ajax()函数来发送一个GET请求，获取后台存储的留言列表数据。成功获取数据后，通过.done()rrreee

In dieser Funktion verwenden Sie die Funktion $.ajax(), um eine POST-Anfrage zu senden und den Namen und den Nachrichteninhalt als POST-Daten an den Hintergrund zu senden. Nachdem Sie die Anfrage erfolgreich gesendet haben, verwenden Sie die Methode .done(), um die vom Hintergrund zurückgegebenen Daten zu verarbeiten und die neue Nachricht zur Nachrichtenliste hinzuzufügen. Wenn die Anfrage fehlschlägt, kann die Fehlermeldung über die Methode .fail() angezeigt werden.

Zeigen Sie die Nachrichtenliste an🎜🎜Nachdem die Formularübermittlungslogik implementiert wurde, müssen Sie jQuery verwenden, um die Nachrichtenliste anzuzeigen. Erstellen Sie zunächst ein ul-Element mit der ID „message-list“ auf der Seite, um Nachrichten zu speichern. 🎜rrreee🎜Sie können dann eine loadMessages()-Funktion hinzufügen, die verwendet wird, um die Nachrichtenliste aus dem Hintergrund abzurufen und auf der Seite anzuzeigen. 🎜rrreee🎜In dieser Funktion verwenden Sie die Funktion $.ajax(), um eine GET-Anfrage zu senden, um die im Hintergrund gespeicherten Nachrichtenlistendaten abzurufen. Nachdem Sie die Daten erfolgreich abgerufen haben, verwenden Sie die Methode .done(), um die Daten der Nachrichtenliste zu durchlaufen, und fügen Sie jede Nachricht dem ul-Element mit der ID „message-list“ hinzu. 🎜🎜Jetzt ist das jQuery-Forum fertig! Sie können den Code als Teil von Angular oder React schreiben und die Message-Board-Entwicklung mithilfe moderner JS-Standards abschließen. Unabhängig von Ihrem Technologie-Stack ist jQuery ein unersetzliches Werkzeug in der Webentwicklung. 🎜

Das obige ist der detaillierte Inhalt vonSo erstellen Sie ein Message Board mit JQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!