Question

这个问题可能不太清楚，所以我会进一步解释。我看到像wordpress新帖子标签的一些页面，他们有类似

的东西

[input] 
x tag |  x tag  |  x tag

发布图片时

或Facebook Notes ...

当您输入标签并按Enter键时，新标签将插入页面中的元素...

我不太明白你怎么解析它然后提交给表格。

如果有人知道请给我一个主意。

由于

Answer 1

如果我做对了，你就是在谈论“在引擎盖下”发送基于AJAX的帖子请求，并在同一页面上获得“动态反射”。

嗯，如果是这种情况，实际上不仅仅是向服务器提交数据。

以下是全局：

您需要在包含要提交的表单的页面中加载的javascript。

在该脚本中，您需要定义将触发基于AJAX的发布请求的事件。基本上你会喜欢在特定字段中的内容刚刚更改时触发这样的事件（onChange事件，即）。

然后您可以使用以下脚本：

$.ajax
 ({
     type: 'POST',
        cache: false,
        async: false,
        timeout: 10000,
        url : '/path/to/your/serverside/function',
        dataType : 'json',
        data:
        {
              'tag' : //whatever you want to be used as the tag
        },
        success : function(message)
        {
            //this will be called when this post was successfully been carried out.
            //you should update the view (the same page) here using some jQuery script.
            //such as : $('#tag').html(message.tag);
        },
        error : function(message) 
        { 
            //this is for displaying error messages (perhaps due to networking problems?)
        }
 });

因为有很多东西要写。我建议你发布你在这里完成的任何内容，这样我们就可以给它一个支票。

至少从我的考虑来看，这种情况需要以下知识才能使一切正常（尽管你总是可以选择使用较少的技术）：

   onChange event triggered
       |
       |
   jQuery =====sending JSON formatted tag info ======> serverside function
                                                               |
                                                               |
                                                       decode JSON tag info
                                                               |
                                                               |
                                                       process(saving it into database?)
                                                               |
                                                               |
                                                       encode feedback info
                                                               |
    jQuery callback function  <===== JSON info==================
      |
      |
    update the view(the same page)
      .
      .
      .
      .
      .
    aforementioned process is before form is submitted via normal POST/GET.

Answer 2

一种方法是跟踪您在隐藏表单字段中添加的标记，但实际使用div或spans或您想要的任何UI进行显示。在Facebook的情况下，我想他们正在做一些有点类似的事情，虽然我猜他们实际上可以动态添加表单元素。原谅讨厌的代码/ css - 把它扔到一起。如果您添加标签然后点击提交，您将看到所有值都存在的查询字符串。

<!doctype html> 
<html lang="en"> 
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script> 
<script type="text/javascript">
$(function(){
    $("#btnSuggest").click(function(){
        var $tagSuggest = $("#tagSuggest");
        if($tagSuggest.val() != "")
            AddTag($tagSuggest.val());
    });

    $("#tagSuggest").keyup(function(e){
        if(e.keyCode == 13 && $(this).val() != "")
            AddTag($(this).val());
    });
});

function AddTag(tag){
    $("<div>").text(tag).appendTo("#tags").click(function(){
        $(this).remove();
        UpdateTags();
    }).hover(function(){
        $(this).addClass("over");
    },function(){
        $(this).removeClass("over");    
    });

    UpdateTags();
}

function UpdateTags(){
    var allTags = "";   

    $("#tags div").each(function(){
        allTags += "," + $(this).text();
    });

    $("#hidTags").val(allTags.substring(1));
    $("#tagSuggest").val("");
}
</script>
<style type="text/css">
.main
{
    width: 400px; 
    padding: 10px; 
    margin: auto; 
    border: 1px solid black; 
    background-color: #e6e6e6;
    height: 600px;
}

#tags div
{
    padding: 3px;
    border: 1px solid black; 
    background-color: #e6e6e6;
    margin: 3px;
    height: 15px;
    width: auto;
    float: left;
    cursor: pointer;

}

#tags div.over
{
    background-color: red;
}
</style>
</head>
<body>
<div class="main">
    <form action="" method="get">
        <input type="hidden" name="hidTags" id="hidTags">

        <textarea name="Wallpost" style="width: 390px; height: 100px;"></textarea>
        <br />
        <input type="text" id="tagSuggest" style="width: 280px;" />
        <input type="button" id="btnSuggest" value="Add Tag" style="float: right;"/>
        <br />      
        <input type="Submit" name="cmdSubmit" value="Share" style="float: right;"/> 
    </form>
    <div id="tags">

    </div>
</div>
</body>
</html>

我如何使用jquery从HTML提交数据

2 个答案: