How to make a message board with jquery

jQuery is a JavaScript library that is widely used in website development. Adding a message board to a website is a common requirement. jQuery provides a wealth of features that can help developers quickly create a highly interactive message board.

This article will teach you to use jQuery to create a message board, including front-end page design and background data processing.

Message board page design

The first step is to design the message board page. You can use HTML and CSS to create a beautiful page. The basic structure of the message board is as follows:

<div id="messages">
  <h2 id="留言板">留言板</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>

In this page, we have a form for submitting messages. The form includes two fields: name and message, both of which are required. After submitting a message, the message content will be displayed on the page in list form.

Next add CSS styles to make the message board look more beautiful:

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

Now that the message board page is completed, we need to use jQuery to add some interactivity.

Use jQuery to submit messages

First, add an identifier with the id "message-form" to the form, then get the form through jQuery and add a submit event.

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

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

$(document).ready() is used here to ensure that the jQuery code is run only after the page is fully loaded. When the user clicks the submit button, the form's submit event is triggered and a custom function is called to handle form submission.

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

In this function, use the $.ajax() function to send a POST request, and send the name and message content to the background as POST data. After successfully sending the request, use the .done() method to process the data returned by the background and add the new message to the message list. If the request fails, the error message can be displayed through the .fail() method.

Display message list

Now that the form submission logic has been implemented, you need to display the message list through jQuery. First, create a ul element with the id "message-list" in the page to store messages.

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

After that, you can add a loadMessages() function, which is used to get the message list from the background and display it on the page.

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

  // 留言提交逻辑
});

In this function, use the $.ajax() function to send a GET request to obtain the message list data stored in the background. After successfully obtaining the data, use the .done() method to traverse the message list data, and add each message to the ul element with the ID "message-list".

Now, the jQuery message board is complete! You can write the code as part of Angular or React and complete message board development using modern JS standards. No matter what your technology stack is, jQuery is an irreplaceable tool in web development.

The above is the detailed content of How to make a message board with jquery. For more information, please follow other related articles on the PHP Chinese website!