Jquery로 게시판을 만드는 방법-프런트엔드 Q&A-php.cn

Jquery로 게시판을 만드는 방법

PHPz

풀어 주다： 2023-05-28 11:04:39

원래의

1616명이 탐색했습니다.

jQuery는 웹사이트 개발에 널리 사용되는 JavaScript 라이브러리입니다. 웹 사이트에 게시판을 추가하는 것은 일반적인 요구 사항입니다. jQuery는 개발자가 대화형 게시판을 빠르게 만드는 데 도움이 되는 다양한 기능을 제공합니다.

이 기사에서는 jQuery를 사용하여 프런트 엔드 페이지 디자인 및 배경 데이터 처리를 포함하여 메시지 보드를 만드는 방법을 설명합니다.

메시지 보드 페이지 디자인

첫 번째 단계는 메시지 보드 페이지를 디자인하는 것입니다. HTML과 CSS를 사용하여 아름다운 페이지를 만들 수 있습니다. 메시지 게시판의 기본 구조는 다음과 같습니다.

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

로그인 후 복사

이 페이지에는 메시지 제출 양식이 있습니다. 양식에는 이름과 메시지라는 두 개의 필드가 포함되어 있으며 둘 다 필수입니다. 메시지를 제출하면 메시지 내용이 목록 형식으로 페이지에 표시됩니다.

다음으로 CSS 스타일을 추가하여 게시판을 더욱 아름답게 만드세요.

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

로그인 후 복사

이제 게시판 페이지가 완성되었으므로 jQuery를 사용하여 상호작용을 추가해야 합니다.

jQuery를 사용하여 메시지 제출

먼저 ID가 "message-form"인 식별자를 양식에 추가한 다음 jQuery를 통해 양식을 가져오고 제출 이벤트를 추가합니다.

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

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

로그인 후 복사

$(document).ready()는 페이지가 완전히 로드된 후에만 jQuery 코드가 실행되도록 여기에서 사용됩니다. 사용자가 제출 버튼을 클릭하면 양식의 제출 이벤트가 트리거되고 양식 제출을 처리하기 위해 사용자 정의 함수가 호출됩니다. $(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

이 함수에서는 $.ajax() 함수를 사용하여 POST 요청을 보내고 이름과 메시지 내용을 POST 데이터로 백그라운드로 보냅니다. 요청을 성공적으로 보낸 후 .done() 메서드를 사용하여 백그라운드에서 반환된 데이터를 처리하고 메시지 목록에 새 메시지를 추가합니다. 요청이 실패하면 .fail() 메서드를 통해 오류 메시지를 표시할 수 있습니다.

메시지 목록 표시🎜🎜 이제 양식 제출 로직이 구현되었으므로 jQuery를 사용하여 메시지 목록을 표시해야 합니다. 먼저 메시지를 저장할 페이지에 "message-list"라는 ID를 가진 ul 요소를 만듭니다. 🎜rrreee🎜그런 다음 백그라운드에서 메시지 목록을 가져와서 페이지에 표시하는 데 사용되는 loadMessages() 함수를 추가할 수 있습니다. 🎜rrreee🎜이 함수에서는 $.ajax() 함수를 사용하여 GET 요청을 보내 백그라운드에 저장된 메시지 목록 데이터를 가져옵니다. 데이터를 성공적으로 얻은 후 .done() 메서드를 사용하여 메시지 목록 데이터를 탐색하고 ID가 "message-list"인 ul 요소에 각 메시지를 추가합니다. 🎜🎜이제 jQuery 게시판이 완성되었습니다! Angular 또는 React의 일부로 코드를 작성하고 최신 JS 표준을 사용하여 메시지 보드 개발을 완료할 수 있습니다. 기술 스택이 무엇이든 jQuery는 웹 개발에서 대체할 수 없는 도구입니다. 🎜

위 내용은 Jquery로 게시판을 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!