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

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

php javascript ajax jquery

Php 简单的jQuery Ajax表单，在发送数据时创建div,php,javascript,ajax,jquery,Php,Javascript,Ajax,Jquery,编辑：最初我有一个简单的表单Ajax脚本，但它不起作用，结果是它在某个地方有一个额外的括号我已将问题改为： 1.）我想知道的是，如何在每次发送值时创建一个额外的div？当然，在不更改容器内的全部内容的情况下，也不保留以前由相同机制创建的div 2.）我将清理服务器上的输入。我应该在服务器端回显什么？仅仅是经过消毒的数据还是div中经过消毒的数据aka$sanitizeddata 滚动查看我的意思的html视觉效果注意：我不想用相同的代码开始另一个问题，所以我只是在找出问题的症结后，对问题进行

编辑：最初我有一个简单的表单Ajax脚本，但它不起作用，结果是它在某个地方有一个额外的括号

我已将问题改为：

1.）我想知道的是，如何在每次发送值时创建一个额外的div？当然，在不更改容器内的全部内容的情况下，也不保留以前由相同机制创建的div

2.）我将清理服务器上的输入。我应该在服务器端回显什么？仅仅是经过消毒的数据还是div中经过消毒的数据aka

$sanitizeddata

滚动查看我的意思的html视觉效果

注意：我不想用相同的代码开始另一个问题，所以我只是在找出问题的症结后，对问题进行了相应的编辑。（我向之前的回复者道歉，但似乎没有人发现错误！：P）


$（文档）.ready（函数（）
{
$（“#testform”）.submit（函数（e）
{
$.post（“1.php”，$（this）.serialize（），函数（数据）
{
$（'.result'）.html（数据）；}）；
e、 预防默认值（）；
});
}); 
部分内容1
部分内容2
部分内容3
//每次提交内容时，都会使用回调数据（净化输入）创建一个新的DIV
按表格。
//每次执行某项操作时，都会使用回调数据（净化输入）创建一个新的DIV
由表单提交，同时保留以前已由Javascript创建的div。
编号：

您可以尝试将

返回false

放在函数末尾。

您可以尝试将

返回false

放在函数末尾。

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


$（文档）.ready（函数（）{
$（'#buttonID'）。单击（函数（）{
$.post（'url.php？id=1'，函数（数据）{
警报（数据）；//数据将是来自服务器的响应。
});
});
});

这里我们将使用Jquery发布方法。您还可以从中找到$.ajax（）等

该按钮必须是类型输入，这样操作将在后台进行。请试试这个

请用代码试试。

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

在按钮的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>


$（文档）.ready（函数（）{
$（'#buttonID'）。单击（函数（）{
$.post（'url.php？id=1'，函数（数据）{
警报（数据）；//数据将是来自服务器的响应。
});
});
});

这里我们将使用Jquery发布方法。您还可以从中找到$.ajax（）等该按钮必须是类型输入，这样操作将在后台进行。请试试这个


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

$（文档）.ready（函数（）{
$（“输入：提交”）。单击（函数（）{
$.ajax({
url:$（“表单”）.attr（“操作”），
类型：“POST”，
数据：“id=1”，
成功：功能（响应）{
$（“#容器”）.append（“+response+”）；
}
})
返回false；
})
});

如果您需要在禁用javascript时使用它。然后你需要将动态创建的分区保存在某个后端。如果该分区太短，那么你可以尝试将其保存在cookie中

祝你好运


$（文档）.ready（函数（）{
$（“输入：提交”）。单击（函数（）{
$.ajax({
url:$（“表单”）.attr（“操作”），
类型：“POST”，
数据：“id=1”，
成功：功能（响应）{
$（“#容器”）.append（“+response+”）；
}
})
返回false；
})
});

如果您需要在禁用javascript时使用它。然后你需要将动态创建的分区保存在某个后端。如果该分区太短，那么你可以尝试将其保存在cookie中

运气真好

所以您似乎希望页面在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>


无标题文件
$（文档）.ready（函数（）{
$（“#testform”）.submit（函数（）{
var serialized=$（this）.serialize（）+'&js=1'；
$.post（“1.php”，序列化，函数（数据）{
$（'.result'）。追加（数据）；
});
$（'数字输入'）.val（''）；
返回false；
});
});
编号：

因此，您似乎希望页面在js enable或not模式下工作

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

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


无标题文件
$（文档）.ready（函数（）{
$（“#testform”）.submit（函数（）{
var serialized=$（this）.serialize（）+'&js=1'；
$.post（“1.php”，序列化，函数（数据）{
$（'.result'）。追加（数据）；
});
$（'数字输入'）.val（''）；
返回false；
});
});
编号：

不要认为您需要

输入type='submit'

，只需将其设置为常规按钮，然后连接单击事件，并使用

$提交表单。post

。不要执行

。提交。有些表单带有
，但没有单击事件。这就是为什么我试图找出这种方法的工作原理。使用jquery并分两行完成。我会把它作为一个答案发布，但人们不喜欢它：我（几乎）在两行中使用jquery：P除了现在我把我的问题换成了别的问题。（阅读上文）我将从现在起继续刷新页面：Ddon'