Простая форма jQuery Ajax с созданием div при отправке данных - PullRequest
2 голосов
/ 03 ноября 2010

Редактировать: Первоначально у меня был простой Ajax-скрипт формы, который не работал, оказалось, что это была дополнительная скобка где-то..) Что я хотел бы знать, так это то, как я могу создать дополнительный div, который будет появляться каждый раз при отправке значения?Конечно, не изменяя весь контент внутри контейнера, а также сохраняя предыдущие элементы div, которые уже были созданы тем же механизмом.

2.) Я собираюсь очистить ввод на сервере.Что бы я повторил на стороне сервера?Только санированные данные или санированные данные внутри div aka <div>$sanitizeddata</div>?

Прокрутите, чтобы увидеть html-визуал того, что я имею в виду.

Примечание.с тем же кодом, поэтому я просто отредактировал свой вопрос, выяснив, что с ним не так.(Мои извинения предыдущим ответчикам, но, похоже, никто не поймал ошибку!: P)

<script type="text/javascript">

$(document).ready(function()
{
    $("#testform").submit(function(e)
        {
            $.post("1.php", $(this).serialize(),function(data)
            {
             $('.result').html(data);});
              e.preventDefault();
                });
}); 
</script>

<div id="container" class="result">

<div><p>Some content 1</p></div>

<div><p>Some content 2</p></div>

<div><p>Some content 3</p></div>

//A new DIV is created with callback data (sanitized input) every time something is submitted
by the form.
<div></div>

//A new DIV is created with callback data (sanitized input) every time something is
submitted by the form while preserving previous DIVs already created by Javascript.
<div></div>

<div>
<form id="testform" action="1.php" method="post"> 
Number: <input type="text" name="num" /> 
<input type="submit" value="Submit Comment" /> 
</form>
</div>

</div>

Ответы [ 4 ]

0 голосов
/ 03 ноября 2010

Похоже, вы хотите, чтобы страница работала либо с включенным js, либо без него.

Попробуйте это .

Если бы я был тобой, я бы переосмыслил свой дизайн, я бы разбил код на отдельные файлы. Это действительно дизайн спагетти.

<?php
if (array_key_exists('js', $_POST)) {
    $js = $_POST['js'];

    if (array_key_exists('num', $_POST)) {
        $num = $_POST['num'];
        echo "<div>$num</div>";
        exit();
    }
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Untitled Document</title>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
    <!--    <script type="text/javascript" src="./jquery.form.js"></script>-->
    <script type="text/javascript">
        $(document).ready(function() {
            $("#testform").submit(function() {
                var serialized = $(this).serialize() + '&js=1';

                $.post("1.php", serialized, function(data) {
                    $('.result').append(data);
                });

                $('#number_input').val('');

                return false;
            });
        });
    </script>
</head>

<body>
<div class="result">
    <?php
    session_start();
    if (array_key_exists('num', $_POST)) {
        $numbers = array();
        if(array_key_exists('numbers', $_SESSION)) {
            $numbers = $_SESSION['numbers'];
        }
        $numbers[] = $_POST['num'];

        foreach($numbers as $num) {
            echo "<div>$num</div>";
        }

        $_SESSION['numbers'] = $numbers;
    }
    else {
        $_SESSION['numbers'] = array();
    }
    ?>
</div>
<div>
    <form id="testform" action="1.php" method="post">
        <label for="number_input">Number: </label><input id="number_input" type="text" name="num"/>
        <input type="submit" value="Submit Comment"/>
    </form>
</div>
</body>
</html>
0 голосов
/ 03 ноября 2010

Пожалуйста, попробуйте с кодом.
Внесите изменения в ваш HTML кнопки

<input type="button" value="Submit Comment" id="buttonID"/>

 <script type="text/javascript">
    $(document).ready(function() {
         $('#buttonID').click(function() {
          $.post('url.php?id=1', function(data) {
                                alert(data);//data will be your response from server.
                            });
        });

        });

    </script>

Здесь мы собираемся использовать метод POST с использованием Jquery. Вы также можете найти $ .ajax () и т. Д. От http://jquery.com/ Кнопка должна быть ввода типа, чтобы действие было в фоновом режиме. Пожалуйста, попробуйте это

0 голосов
/ 03 ноября 2010
<script type="text/javascript">
    $(document).ready(function(){
        $("input:submit").click(function(){
            $.ajax({
                url :$("form").attr('action'),
                type: "POST",
                data:"id=1",
                success : function(response){
                        $("#container").append("<div>"+response+"</div>");
                    }
            })
            return false;
        })
    });
</script>

, если вам нужно работать, когда JavaScript отключен.тогда вам нужно сохранить подразделения, созданные на лету, в некотором бэкэнде. Если содержимое слишком короткое, вы можете попробовать сохранить его в cookie

gud luck

0 голосов
/ 03 ноября 2010

Вы можете попробовать поставить return false в конце функции.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...