Как я могу представить данные из HTML с помощью jquery - PullRequest
0 голосов
/ 24 октября 2009

Вопрос может быть неясным, поэтому я объясню дальше. Я видел некоторые страницы, такие как WordPress новый пост тег, у них есть что-то вроде

[input] 
x tag |  x tag  |  x tag

или Facebook отмечает, когда вы публикуете изображение ...

когда вы вводите тег и нажимаете ввод, новый тег вставляется в элемент на странице ...

Я не совсем понимаю, как вы можете разобрать это, а затем отправить в форму.

если кто-нибудь знает, пожалуйста, дайте мне идею.

Спасибо

Ответы [ 2 ]

3 голосов
/ 24 октября 2009

Если я правильно понял, вы говорите об отправке запросов постов на основе 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. 
0 голосов
/ 24 октября 2009

Один из способов - отслеживать теги, которые вы добавляете, в скрытом поле формы, но на самом деле отображать их с помощью элементов div или span или любого другого пользовательского интерфейса, который вы хотите. В случае с 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...