jQuery AJAX多次提交到PHP脚本

我想在没有页面重新加载的情况下进行表单提交。这是第一次，但是当我尝试做第二次提交时，页面被刷新。jQuery AJAX多次提交到PHP脚本

我希望能够用传播到当前元素的新数据做几个提交。我错过了什么。

这是我的第一页form.php的

<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN"> 
    <html> 
    <head> 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script> 
    <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script> 

<script type="text/javascript"> 
    //<![CDATA[ 
    jQuery.noConflict(); 
    jQuery(document).ready(function() { 
     jQuery("#form").validate({ 
      debug: false, 
      submitHandler: function (form) { 
       jQuery.post('formPost.php', 
        jQuery("#form").serialize(), function (data) { 
        jQuery('#Box').html(data); 
       }); 
      } 
     }); 
    }); 
    // ]]> 
</script> 

    </head> 
    <body> 
    <div id="Box"> 
     <form id="form" name="form" method="POST" action=""> 
     <select name="color"> 
      <option>red</option> 
      <option>white</option> 
      <option>blue</option> 
     </select> 
     <input type="submit" name="submit" value="submit" /><br /> 
     </form> 
    </div> 
    </body> 
</html>

，这里是我的第二页formPost.php

<?php 

    switch ($_POST['color']) 
    { 
    case 'red': 
     echo 'you chose red<br /><br />'; 
     break; 

    case 'blue': 
     echo 'you chose blue<br /><br />'; 
     break; 

    case 'white': 
     echo 'you chose white<br /><br />'; 
     break; 
    } 
?> 
<form id="form" name="form" method="POST" action=""> 
    <select name="color"> 
    <option>red</option> 
    <option>white</option> 
    <option>blue</option> 
    </select> 
    <input type="submit" name="submit" value="submit" /><br /> 
</form>

我希望能够重复使用，同时多个表单提交相同的形式留在同一页面上，并且在不刷新页面的情况下让数据在同一个div中显示。任何想法

来源

2011-09-12 simian

试试这个：

<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN"> 
    <html> 
    <head> 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script> 
    <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script> 

<script type="text/javascript"> 
    //<![CDATA[ 
    jQuery.noConflict(); 
    jQuery(document).ready(function() { 
     initializeForm(); 
    }); 

    function initializeForm() { 
     jQuery("#form").validate({ 
      debug: false, 
      submitHandler: function (form) { 
       jQuery.post('formPost.php', 
        jQuery("#form").serialize(), function (data) { 
        jQuery('#Box').html(data); 
        initializeForm(); 
       }); 
      } 

     }); 
    } 

    // ]]> 
</script> 

    </head> 
    <body> 
    <div id="Box"> 
     <form id="form" name="form" method="POST" action=""> 
     <select name="color"> 
      <option>red</option> 
      <option>white</option> 
      <option>blue</option> 
     </select> 
     <input type="submit" name="submit" value="submit" /><br /> 
     </form> 
    </div> 
    </body> 
</html>

我测试了这一点，它工作在本地的我。我希望这有帮助！

来源

2011-09-12 03:31:46

但形式将每个答案而改变。因此，在我的实时版本中，如果选择红色，则formPost.php页面将显示一个新表单，并且这将继续大约10个表单问题。有任何想法吗？ – simian

好吧。我没有意识到新形式的重要性。我将JavaScript函数的一部分分离出来以使其可重用，因为您需要在将新表单合并到HTML中后重新初始化AJAX表单。 –

好吧，那么有可能做jQuery的发布，并有新的信息继续传播在主要的div？在我的formPost.php页面上，我将根据上一个表单的选项来更改表单。 – simian

验证操作是绑定到文档准备就绪时的表单（因为它在document.ready中）。但是，您的PHP脚本将用不同的表单替换该表单，因此验证的表单将不再存在。当你需要约束事件时，你可以使用类似live binding的东西来解决这个问题。不过，你可能无法使用validate插件。你应该做的是将你的回应写入不同的元素。

所以，这样的事情：

<html> 
    <head> 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script> 
    <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script> 
    <script type="text/javascript"> 
    //<![CDATA[ 
    jQuery.noConflict(); 
    jQuery(document).ready(function(){ 
     jQuery("#form").validate({ 
     debug: false, 
     submitHandler: function(form) { 
     jQuery.post('formPost.php', 
        jQuery("#form").serialize(), 
        function(data) { 
         jQuery('#result').html(data); // Note that this modifies #result instead of #Box. 
        }); 
     } 
     }); 
    }); 
    // ]]> 
    </script> 
</head> 
<body> 
    <div id="Box"> 
    <form id="form" name="form" method="POST" action=""> 
     <select name="color"> 
     <option>red</option> 
     <option>white</option> 
     <option>blue</option> 
     </select> 
     <input type="submit" name="submit" value="submit" /><br /> 
    </form> 
    </div> 
    <div id="result" /> <!-- Here is where we put out result. --> 
</body> 
</html>

，然后就

<?php 

    switch ($_POST['color']) 
    { 
    case 'red': 
     echo 'you chose red<br /><br />'; 
     break; 

    case 'blue': 
     echo 'you chose blue<br /><br />'; 
     break; 

    case 'white': 
     echo 'you chose white<br /><br />'; 
     break; 
    } 
?>

来源

2011-09-12 05:15:29

除了我需要结果传播下一个表单。我想经历大约10个问题，每次回答formPost.php都会返回一个评论和新表单。有任何想法吗？ – simian

jQuery AJAX多次提交到PHP脚本

回答

相关问题