Question

function createPost(){
    $('#body').append("<p>Welcome to calmspace.</p>");
}

我如何利用用户输入以便用户可以使用自己的消息创建帖子？我是jQuery的新手，所以如果这是一个愚蠢的问题，请原谅我。可能重复，但我找不到这样的其他帖子。

Answer 1

首先要做的事情 - 你不应该添加＆＃39;＃＆＃39;在身体前面，它意味着身体元素是id＆＃39; body，将id分配给一个独特的元素并没有那么大的意义，相反你应该只针对标记 - $（＆＃39;身体＆＃39;）。

为了提供某种消息，首先必须捕获它，例如使用某种输入。这是一个有效的demo。

$('#submit').click(function(){
    createPost($('#text').val());
})

您可以按如下方式阅读，抓取ID＆＃39;提交＆＃39;元素，为其指定点击事件，抓取id＆＃39; text＆＃39;的输入框值。并将其传递给名为create post的函数，该函数接受字符串参数，然后将其打印在<p>标记中。

Answer 2

@Simion Benderschii一个post的工作示例，它附加到文档或通过ajax发送。希望这有帮助

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <title>JS Bin</title>
</head>
<body>
  <div>
    <h2>Enter your post here</h2>
    <form>
      <textarea id='user-input-post'></textarea>
      <div>
        <button id=user-post-button>Post</button>
      </div>
    </form>
  </div>
  <div>
    <h2>Below are your posts</h2>
    <ul id='user-post-display'>
      
    </ul>
  </div>
</body>
  <script>
    /*possible options can be
      'display' - which shows the post in the UI in a unordered list
      'ajax' - which send the post to the server via ajax
    */
    var post_type = 'display';
    //the id of the list where the post will be appended
    var list_id = '#user-post-display';
    //the id where the post will be entered
    var post_id = '#user-input-post';
    //the id of the button which triggers some action
    var button_id = '#user-post-button';
    
    //this gets the post from the textarea
    var get_post = function() {
      var post = $(post_id).val();
      return encodeURIComponent(post);
    };
    
    //this appends the post to the list
    var append_post = function() {
      var post = get_post();
      var html_string = '';
      if (post) {
         html_string = '<li>' + post + '</li>';
        $(list_id).append(html_string);
      }
    };
    
    //this sends the post via ajax and triggers callbacks
    var send_post = function() {
      var post = get_post();
      var post_created_on = Date.now();
      var url = 'dummy_url_for_posting';
      $.ajax({
        method: 'POST',
        url: url,
        data: { data: {
          post: post,
          post_created_on: post_created_on
        }}
      })
        .done(function() {
          window.alert('post success');
        })
        .fail(function() {
          window.alert('post fail');
        })
        .always(function() {
          window.alert('post triggered');
        });
    }
    
    //main function which is the entry point
    var main = function() {
      $(button_id).on('click', function() {
        event.preventDefault();
        debugger;
        if (post_type === 'display') {
          append_post();
        } else if (post_type === 'ajax') {
          send_post();
        }
      });
    };
    
    //triggers the main function
    main();
    
  </script>
</html>

Answer 3

我不确定你想从你的问题做什么。在将来的问题中，您会发现提供有关您的应用程序或功能的确切内容的更多详细信息会很有帮助。

这里的基本想法是使用按钮或您可以使用jQuery捕获的任何操作（例如按enter或检查$(element).on('click',...，然后使用$(element).html(...)将该信息放在所需位置或.append(...)。

这是我用粗略的想法制作的小提琴。尝试使用这个小提琴工具，你也可以发布你在未来的问题中尝试过的链接。祝你好运： - ）

JSFiddle example of submitting a post

使用基本的jQuery追加功能，您如何将用户提交的文本放入其中？

3 个答案: