how do i submit data from HTML using jquery_问答_开发者

The question might not be clear, so i will explain further. I saw some page like wordpress new post tag, they have something like

[input] 
x tag |  x tag  |  x tag

or Facebook Notes when you post a image...

the when you input a tag and press enter, a new tag is insert in to element in the page...

I don't quite understan开发者_如何学God how can you parse that out and then submit to the form.

if anyone know please give me an idea.

Thanks

If I am getting it right, you are talking about sending AJAX-based post requests "under the hood" and get "dynamic reflections" back on the same page.

Well, if this is the case, there are actually more than just submitting data to the server.

Here is the big picture:

You need a javascript which is loaded in the page that has the form to submit.

Inside that script, you need to define the event which will trigger the AJAX-based post request. Basically you would love trigger such an event when the content in that particular field has been just changed (an onChange event, that is).

Then you can use script like the following:

$.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?)
        }
 });

Since there are really a lot to write about. I suggest you post whatever you have finished up here so we can give it a check.

At least from my consideration, this scenario require the following knowledge to get everything right(though you can always choose to use less tech):

   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.

One way is to keep track of the tags you add in a hidden form field, but actually display using divs or spans or whatever UI you want. In the case of facebook, I'd imagine they're doing something somewhat similar, though I guess they could actually be adding form elements dynamically. Forgive the nasty code/css - just tossed it together. If you add tags and then hit submit, you'll see the querystring that all the values are there.

<!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>