简单的jQuery Ajax窗体与数据发送时创建div

编辑：最初我有一个简单的表单Ajax脚本不工作，原来它是一个额外的支架。简单的jQuery Ajax窗体与数据发送时创建div

我已经改变了我的问题如下：

1）我想知道的是，我怎么可以创建一个额外的div来显示每一个值发送时间？当然，不需要改变容器内的全部内容，也可以保留以前由同一机制创建的div。

2.）我要清理服务器上的输入。我会回应服务器端？只是卫生数据或卫生数据里面的一个分区<div>$sanitizeddata</div>？

滚动以查看我的意思是html视觉。

注意：我不想用相同的代码启动另一个问题，因此我只是在找出问题后编辑了我的问题。（我道歉以前的repliers，但没有人似乎已经陷入了错误：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>

来源

2010-11-03 Tek

不认为你需要'input type ='submit''，只需将其设置为常规按钮，然后连接点击事件并使用'$ .post'提交表单。不要做'.submit'。 – RPM1984 2010-11-03 05:58:50

有''的形式，没有click事件。这就是为什么我试图找出这种方式如何工作。 – Tek 2010-11-03 06:24:06

使用jquery并在两行中完成。我将它作为答案发布，但人们不喜欢它：P – naugtur 2010-11-03 10:27:08

因此，看来你希望页面中擦出火花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>

来源

2010-11-03 16:06:53 Gutzofter

足够接近我管理的，谢谢。 :) – Tek 2010-11-11 03:22:05

你可以尝试把return false在函数结束。

来源

2010-11-03 06:04:48 aligray

我忘了把它放在我原来的代码中。返回false仍然不会使其异步。它仍然发布。 – Tek 2010-11-03 06:08:20

尝试将它放在.submit代码块的底部。 – aligray 2010-11-03 06:47:32

谢谢，但我现在编辑了我的帖子。我希望你不介意看我的第二个要求。:) – Tek 2010-11-03 09:08:58

请试一试代码。
在你的按钮

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

这里的HTML做出改变我们使用jQuery去POST方法。您还可以从http://jquery.com/ 中找到$ .ajax（）等按钮必须是输入类型，以便动作将在后台。请试试这个

来源

2010-11-03 07:06:50 kbvishnu

我需要一个表格，即使Javascript禁用，以防用户的浏览器没有启用JavaScript。 – Tek 2010-11-03 07:25:09

AJAX代表Asynchrouns Javascript和XML.So如果你正在禁用javascript，那么你在javascript [Jquery atc]中编写的任何内容都不会起作用。所以你不能对服务器执行异步请求。如果你希望用户执行某些方法，它必须同步。页面将被刷新。 – kbvishnu 2010-11-03 07:37:57

这不是我的意思。我的意思是我希望它可以通过一个表单来处理常规的同步$ _POST，以防Javascript被禁用。 – Tek 2010-11-03 09:08:00

<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被禁用。然后u需要保存一些backend.If动态创建的师conent太短然后ü可以尝试将其保存在cookie的

GUD运气

来源

2010-11-03 11:30:15 RSK

也检查这一点。它可能会帮助http://stackoverflow.com/questions/1867098/javascript-creating-div-on-the-fly – RSK 2010-11-03 11:32:25

谢谢，我很欣赏你的建议。除非你读了我的编辑，这不再是问题。另外，当javascript处于打开状态时，代码异步工作，并且在javascript未启用时同步。这都是获得正确的jQuery代码的问题。 – Tek 2010-11-03 11:38:30

jquery代码异步提交？如果是的你有没有试过这个代码？我不认为提交会为你工作正常。我已经尝试并提交。但失败了，然后我去了这个。如果你成功提交。请分享代码。 – RSK 2010-11-03 11:44:02

简单的jQuery Ajax窗体与数据发送时创建div

回答

相关问题