jqueryで掲示板を作る方法

jQuery は、Web サイト開発で広く使用されている JavaScript ライブラリです。 Web サイトにメッセージ ボードを追加することは一般的な要件であり、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>

このページには、メッセージを送信するためのフォームがあります。フォームには名前とメッセージの 2 つのフィールドが含まれており、どちらも必須です。メッセージを送信すると、ページ上にメッセージ内容が一覧表示されます。

次に 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 コードが実行されるようにします。ユーザーが送信ボタンをクリックすると、フォームの送信イベントがトリガーされ、フォームの送信を処理するカスタム関数が呼び出されます。

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 を介してメッセージ リストを表示する必要があります。まず、メッセージを保存するページに「message-list」という ID を持つ 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() メソッドを使用してメッセージ リスト データを走査し、各メッセージを ID「message-list」を持つ ul 要素に追加します。

これで、jQuery 掲示板が完成しました。 Angular または React の一部としてコードを記述し、最新の JS 標準を使用して掲示板開発を完了できます。テクノロジー スタックがどのようなものであっても、jQuery は Web 開発においてかけがえのないツールです。

以上がjqueryで掲示板を作る方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。