javascript - 使用 ajax/jQuery 更新按钮单击列表

Question

我只是想知道是否有人可以为我指出正确的方向，即如何根据用户输入在网页上创建动态列表，而无需每次都刷新页面。

例如，用户会：

1. 在文本框中输入一个词

2. 点击一个按钮

3. 这个词会出现在页面的其他地方

4. 该词将从文本框中删除

键入的任何新单词都会自动写在任何先前输入的单词下方。

Answer 1

<div id="target"><div>

<input type="text" id="newInput" />
<input type="button" id="saveInput" />

<script>
// when button is pressed:
$('#saveInput').on('click', function(){
    // check if something is there
    if( $('#newInput').val().length !==0){
        $('#target').append('<div>'+ $('#newInput').val()+'</div>'); //append to a target
        $('#newInput').val(''); // empty input
        $('#newInput').focus() // for bonuspoint, place cursor back in input
    }
});
</script>

如果您希望每个新条目作为第一个列表项，请使用prepend()而不是append()

Answer 2

这是一个工作示例：

html:

<input type="text" id="txtWord"/>
<input type="button" id="btnAddWord" value="Add new word" />

<ul id="words">
</ul>

脚本：

$(document).ready(function(){
    $('#btnAddWord').bind('click', function(){
        if( $('#txtWord').val() !== ""){
            $('#words').append('<li>'+ $('#txtWord').val()+'</li>');
            $('#txtWord').val('');
        }
    });
});

例子

http://jsfiddle.net/AfNgH/