Question

所以，我已多次尝试将自己推向网站开发的世界。每次，我都抛弃了一个项目，原因很简单：列表。

我想知道，从前到后，系统的数据流遵循以下事件序列：

用户会在网站上显示一个列表
用户在某种模式对话框中填写新的列表项
用户点击“提交”，该项目现已添加到列表中。
- 将新列表项发送到要存储的服务器

是否会有全新的页面加载？什么时候将数据发布到服务器？这个（看似简单的）应用程序的各种选项有哪些？我的目标是相对较小的网络工具。不一定是单页，但我不反对。

我理解如何使用JQuery将新的<li>添加到列表中，并且我知道如何使用HTML构建模式。我可以从模态中提取数据，但我不确定如何从JQuery中获取数据，将其转换为适当的HTML块（可能相当复杂），并将新记录存储在数据库中。我似乎无法找到关于这种数据处理的教程。

谢谢！

Answer 1

简单。既然你提到了jQuery，那就让我们使用jQuery。准备？我们走了！

我假设您的模式中有textarea或input，用户可以在其中输入文字。如果是，请为其指定id属性，以便引用它，例如id="myText"。

然后，要获取textarea或input的内容并将其转换为列表中的列表项，您需要将<li>与textarea的内容附加到其父<ul>标记。同样，您需要某种方式来引用<ul>代码，因此请为<ul>代码添加id属性，例如myList，因此它变为<ul id="myList"> }。

现在，只需从输入字段中取出val() ue，然后将其附加到列表中即可。这就是你如何做到的。

var textareaStuff = $('#myText').val();
$('#myList').append('<li>'+textareaStuff+'</li>');

那不是很难，是吗？这实际上很有趣。

我承认，将内容发布到服务器可能需要一些时间来适应，但这并不太难。

我已经为你准备了一份HTML文件来完成所有这些工作，并提供了非常详细的文档。它应该能够帮助您了解您想要学习的内容。它在下面。

<!DOCTYPE html>
<html>

<head>
  <title>My jQuery Experiments</title>
</head>

<body>

  <!-- Here's your list with its ID so we can reference it in JS. -->
  <ul id="myList">
    <li>Sample Item 1</li>
  </ul>
  <input id="myText"> <!-- Here's your input field. This can be in a modal. -->
  <button id="addItemButton">Add Item</button> <!-- We need a save button. -->

  <!-- Include jQuery -->
  <script type="text/javascript"
          src="https://code.jquery.com/jquery-2.1.4.min.js"></script>

  <!-- This is the javascript you'll need to write and understand -->
  <script type="text/javascript" >

    // When the element with id="addItemButton" is clicked,
    $('#addItemButton').click(function() {

      // Append the stuff in brackets to the element with id="myList"
      $('#myList').append('<li>' + $('#myText').val() + '</li>');

      // ^ The stuff in brackets is an li code with the value of the HTML
      // element with id="myText", your input field above.

      // Now to post it to a server, we'll need to use AJAX.
      // Luckily, jQuery has an AJAX function. It looks like this:

      $.ajax('http://example.com/mysaver.php', {

        // We're POSTing stuff to the server.
        method: 'post',

        // This is the data to send to the server.
        // It is a JSON object. 
        // If using PHP, you'll get $_POST['item'] = whatever is in id="myText"
        data: { item: $('#myText').val() },

        // If the AJAX request was successful,
        success: function(data) {
          // The argument 'data' contains whatever the server returned. 
        },

        // If not,
        error: function(jqXHR) {
          // Handle your error here.
        }
      });

    });

  </script>
</body>

</html>

我希望这有用！如果是的话，请继续批准这个答案，请随时在评论中提出进一步的问题，我会尽力帮助我找到答案。

前端设计：动态添加项目到列表

1 个答案: