jquery mobile评论区代码

以下是一个简单的使用jQuery Mobile实现的评论区代码示例：

HTML部分：

<div data-role="page" id="comments-page">
  <div data-role="header">
    <h1>评论区</h1>
  </div>
  <div data-role="content">
    <ul data-role="listview" data-inset="true" id="comments-list">
      <!--评论列表-->
    </ul>
    <form>
      <label for="comment">发表评论：</label>
      <textarea name="comment" id="comment"></textarea>
      <button type="submit" id="submit-comment">提交</button>
    </form>
  </div>
</div>

JavaScript部分：

$(document).on("pagecreate", "#comments-page", function() {
  // 加载评论列表
  loadComments();

  // 提交评论
  $("#submit-comment").on("click", function(event) {
    event.preventDefault();
    var commentText = $("#comment").val();
    if (commentText) {
      addComment(commentText);
    }
  });
});

// 加载评论列表
function loadComments() {
  $.ajax({
    url: "comments.php",
    type: "GET",
    dataType: "json",
    success: function(data) {
      $("#comments-list").empty();
      $.each(data, function(index, comment) {
        var li = $("<li>").appendTo("#comments-list");
        $("<h3>").text(comment.name).appendTo(li);
        $("<p>").text(comment.text).appendTo(li);
      });
      $("#comments-list").listview("refresh");
    }
  });
}

// 提交评论
function addComment(commentText) {
  $.ajax({
    url: "comments.php",
    type: "POST",
    dataType: "json",
    data: { text: commentText },
    success: function(data) {
      loadComments();
      $("#comment").val("");
    }
  });
}

该代码使用了jQuery Mobile提供的UI组件，包括列表（listview）和表单（form）。在页面创建时，通过ajax请求加载评论列表，并在提交评论时通过ajax发送POST请求。评论数据以JSON格式传输，并使用jQuery动态更新评论列表。请注意，此示例仅用于演示目的，实际应用需要进行更多的错误处理和安全性检查。