简单的 jQuery Ajax 表单，根据发送的数据创建 div答案

【问题标题】：Simple jQuery Ajax form with div creation upon data sent简单的 jQuery Ajax 表单，根据发送的数据创建 div
【发布时间】：2011-05-04 07:51:25
【问题描述】：

编辑：最初我有一个不工作的简单表单 Ajax 脚本，结果发现它是一个额外的括号。

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

1.) 我想知道的是，如何创建一个额外的 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>

【问题讨论】：

不要认为您需要input type='submit'，只需将其设为常规按钮，然后连接点击事件，并使用$.post 提交表单。不要做.submit。
有些表单带有<input type="submit"> 而没有点击事件。这就是为什么我试图找出这种方法是如何工作的。
使用 jquery 并在 2 行中完成。我会把它作为答案发布，但人们不喜欢它：P
我在（几乎）两行中使用 jquery。 :P 除了现在我已经把我的问题改成了别的东西。（阅读上文）
从现在开始我会继续刷新页面：D

标签： php javascript ajax jquery

【解决方案1】：

所以看来您希望页面在 js 启用或不启用的情况下工作。

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>

【讨论】：

【解决方案2】：

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

祝你好运

【讨论】：

也检查一下。它可能会有所帮助stackoverflow.com/questions/1867098/…
谢谢，感谢您的建议。除非您阅读了我的编辑，否则这不再是问题了。另外，代码在打开 javascript 时异步工作，而在未启用 javascript 时同步工作。只需获取正确的 jquery 代码即可。
jquery代码异步提交？？如果是的话，你试过这个代码吗？？？我不认为提交对你有用。我已经尝试并提交。但是失败了，然后我就接受了。如果你提交成功。请分享代码。
这里是代码，所以你可以看到我在说什么。这在启用 javascript 时异步工作。当 javascript 被禁用时，它应该像普通表单一样工作并同步提交数据。不需要额外的 javascript 事件。 pastie.org/1269206

【解决方案3】：

请尝试使用代码。
在按钮的 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() 等该按钮必须是类型输入，以便操作将在后台进行。请试试这个

【讨论】：

我需要一个表单，即使在禁用 Javascript 的情况下也能工作，以防用户在浏览器上未启用 javascript。
AJAX 代表 Asynchrouns Javascript 和 XML。因此，如果您禁用 javascript，那么您用 javascript[Jquery atc] 编写的任何内容都将不起作用。因此您无法对服务器进行异步请求。如果您想要用户执行某些方法必须是同步的。页面将被刷新。
我不是这个意思。我的意思是我希望它通过表单与常规同步 $_POST 一起工作，以防 Javascript 被禁用。

【解决方案4】：

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

【讨论】：

我忘了把它放在我的原始代码中。返回 false 仍然不会使其异步。它仍在发布。
谢谢，但我现在已经编辑了我的帖子。我希望你不介意阅读我的第二个请求。 :)