AJAX使用jquery split显示span中的单词

时间:2014-09-01 02:00:36

标签: javascript php jquery ajax

我试图通过从文本框中获取输入来显示跨度中的单词。当用户单击该按钮时,它将以span显示该单词。它仅在使用一个单词时有效。所以我想要做的是,我想使单词的添加更有效,所以我将添加用逗号分隔的单词,例如,。 word,word1,word2。我尝试使用jquery split来爆炸字符串。但这个词显示为未定义。无论如何,我发布的代码仅适用于单个单词,我试图使用jquery split来添加以逗号分隔的单词来实现该方法。对此有何想法?

$(document).on('click', '#wordlistsave', function() 
{

    var user = /* some values */
    var title = /* some values */
    var words = (this, is, just, sample, data) /* assume this is the value */
    var postID =/* some values; */

    var testBoxDiv = $(document.createElement('div'))
                        .attr("id", words);

    var dataString = 'user='+user+'&title='+title+'&words='+words+'&id='+postID;

    <?php if (is_user_logged_in()): ?>
        if(words)
        {
            $.ajax({ 
                type: "POST",
                url: "<?=plugins_url('wordlistsave.php', __FILE__ )?>",
                data: dataString,
                cache: false,
                success: function(postID)
                {                      
                    testBoxDiv.html('<span> '+words+' </span>);                     
                }
            });
        }

    <?php else: ?>
        alert('Please login.');
    <?php endif; ?>
});    

编辑更新: 这就是我想出的。我使用jquery split将字符串转换为带有分隔符逗号的数组。然后我用循环来显示单词。但我得到了#34;未定义&#34;输出。但是当我刷新时,单词显示得恰到好处。对此有何想法?

 var words = word.split(", ");


                    var testBoxDiv = $(document.createElement('div'))
                                        .attr("id", words);


                    for(var i = 0; i < words.length; i++)
                    {                   
                        var dataString = 'user='+user+'&title='+title+'&words='+words[i]+'&id='+postID;

                            <?php if (is_user_logged_in()): ?>
                                    if(words[i])
                                    {

                                        $.ajax({ 
                                            type: "POST",
                                            url: "<?=plugins_url('wordlistsave.php', __FILE__ )?>",
                                            data: dataString,
                                            cache: false,
                                            success: function(postID)
                                            {

                                                testBoxDiv.css({"margin-bottom":"5px"});
                                                testBoxDiv.after().html('<span id="'+words[i]+'" style="cursor:pointer"><img src="./wp-content/plugins/wordwork/admin/pdfpreview/delete_icon.png" title="Delete word"></span>&nbsp&nbsp<input type="checkbox" name="words[]" value="'+ words[i]+ '">'+words[i] );
                                                testBoxDiv.appendTo("#test_container"); 



                                            }
                                        });
                                    }


                            <?php else: ?>
                                    alert('Please login.');
                            <?php endif; ?>



                    } 

1 个答案:

答案 0 :(得分:0)

你的问题是当你的ajax结果进入时你的for循环已经完成循环(你的成功处理程序会激活)。这意味着在您的成功处理程序中words[i]i的值等于words.length(如果您不相信我,请尝试记录或警告{{1}来自你的处理程序); i始终为words[words.length]。你需要做的是将ajax调用包装在一个立即调用的函数中,并在这个新函数的范围内,捕获undefined的值:

words[i]