前端设计:动态添加项目到列表。
所以，我已经尝试过几次让自己进入网站开发的世界。每次，我都因为一个简单的原因而放弃了一个项目:清单。
我想从前到后了解一个遵循以下顺序的系统的数据流：
- 在网站中向用户显示一个列表。
- 用户在某种模式对话框中填写一个新的列表项。
- 用户点击"Submit“，该项目现在被添加到列表中。
- 新的列表项被发送到要存储的服务器。
会有一个全新的页面加载吗？何时将数据发布到服务器？这个(看似简单的)应用程序有哪些不同的选项？我的目标是相对较小的网络工具。不一定是一页，但我不反对。
我了解如何将新的<li>添加到JQuery列表中，并且我知道如何使用JQuery构建模型。我可以从模型中提取数据，但我不知道如何从JQuery中获取数据，将其转化为适当的HTML块(这可能相当复杂)，并将新记录存储在数据库中。我似乎找不到关于这类数据处理的教程。
谢谢!
回答 1
Stack Overflow用户
发布于 2015-07-29 07:37:31
很简单。既然您提到了jQuery，那么让我们使用jQuery。准备好的?我们开始吧！
我假设您的模式中有一个textarea或input，用户可以输入文本。如果是这样的话，给它一个id属性，以便可以引用它，比如id="myText"。
然后，要获取textarea或input的内容并将其转换为列表中的列表项，您需要将一个带有textarea内容的<li>附加到它的父<ul>标记中。同样，您还需要某种方式来引用<ul>标记，因此给<ul>标记一个id属性，类似于myList，这样它就变成了<ul id="myList">。
现在，只需从输入字段中提取val()ue，并将其附加到列表中即可。你就是这样做的。
var textareaStuff = $('#myText').val();
$('#myList').append('<li>'+textareaStuff+'</li>');不是很难吧？这其实很有趣。
我承认，服务器上的POSTing东西可能需要一些习惯，但并不太难。
我为您准备了一个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>我希望这能帮上忙！如果答案是肯定的，请在评论中提出更多的问题，我会尽我所能帮助你。
https://stackoverflow.com/questions/31667207
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号