Question

编辑：最初我有一个简单的表单Ajax脚本无法正常工作，原来它是一个额外的括号。

我已将问题更改为以下内容：

1.）我想知道的是，每次发送值时，如何创建额外的div？当然，不改变容器内的整个内容，也保留以前由同一机制创建的div。

2.）我要清理服务器上的输入。我会回应服务器端的什么？只是已消毒的数据或div内的已清理数据<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>

Answer 1

您可以尝试将return false放在函数末尾。

Answer 2

请尝试使用该代码在按钮的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>

这里我们使用Jquery进行POST方法。你也可以从http://jquery.com/找到$ .ajax（）等按钮必须是类型输入，因此操作将在后台。请试试这个

Answer 3

<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时使用它。然后你需要在某些后端保存动态创建的分区。如果conent太短，那么你可以尝试保存在cookie中

gud luck

Answer 4

所以看起来你希望页面能够在js enable中工作。

Try this

如果我是你，我会重新考虑我的设计我会将代码分解成单独的文件。这真是一个意大利面设计。

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

简单的jQuery Ajax表单，在发送数据时创建div

4 个答案: