使用 Jquery Ajax 表单插件和 php 提交表单？答案

【问题标题】：submit form using Jquery Ajax Form Plugin and php?使用 Jquery Ajax 表单插件和 php 提交表单？
【发布时间】：2012-04-04 13:41:31
【问题描述】：

这是一个关于如何使用 Jquery 表单插件提交表单和使用 html 格式检索数据的简单示例 html代码

<html> 
<head> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script> 
    <script src="http://malsup.github.com/jquery.form.js"></script> 

    <script> 
 // prepare the form when the DOM is ready 
    $(document).ready(function() { 
        // bind form using ajaxForm 
        $('#htmlForm').ajaxForm({ 
            // target identifies the element(s) to update with the server response 
            target: '#htmlExampleTarget', 

            // success identifies the function to invoke when the server response 
            // has been received; here we apply a fade-in effect to the new content 
            success: function() { 
                $('#htmlExampleTarget').fadeIn('slow'); 
            } 
        }); 
    });
    </script> 
</head> 
<body>
<form id="htmlForm" action="post.php" method="post"> 
    Message: <input type="text" name="message" value="Hello HTML" /> 
    <input type="submit" value="Echo as HTML" /> 
</form>
<div id="htmlExampleTarget"></div>
</body>
</html>

PHP 代码

<?php 
echo '<div style="background-color:#ffa; padding:20px">' . $_POST['message'] . '</div>'; 
?>

这很好用如果我需要序列化表单字段，我需要知道什么，那么如何通过 JS 函数传递这个选项我也想在处理表单时显示加载消息我也应该怎么做谢谢你

【问题讨论】：

为了加载消息，您可以通过这种方式使用 beforeSend 函数： beforeSend: function(){ $("#htmlExampleTarget").html('Loading...'); },

标签： php ajax jquery

【解决方案1】：

要对它进行 serailize 并将其发布到 php 页面，您只需要在页面中使用 jQuery。无需其他插件

  $("#htmlForm").submit(function(){

     var serializedData= $("#htmlForm").serialize();
     $.post("post.php", { dat: serializedData},      function(data) {
        //do whatever with the response here
     });

  });

如果您想显示加载消息，可以在启动 post call 之前执行此操作。假设您的页面中存在 id 为“divProgress”的 div

HTML

<div id="divProgress" style="display:none;"></div>

脚本

$(function(){
  $("#htmlForm").submit(function(){

     $("#divProgress").html("Please wait...").fadeIn(400,function(){  

        var serializedData= $("#htmlForm").serialize();
         $.post("post.php", { dat: serializedData},function(data) {
           //do whatever with the response here
          });

        });    
  });
});

【讨论】：

当我使用它时，这根本不起作用，它通常通过表单，根本没有 ajax
@Marco：如果表单 id id 是 htmlForm，它将起作用。您是否遇到了一些错误？

【解决方案2】：

Shyju 发布的答案应该可以正常工作。我认为 'dat' 应该用引号括起来。

$.post("post.php", { 'dat': serializedData},function(data) {

...

}

或者简单地说，

$.post("post.php", serializedData, function(data) {

 ...

}

并在 PHP 中使用 $_POST 访问数据。

注意：抱歉，我没有测试代码，但它应该可以工作。

【讨论】：

【解决方案3】：

Phery 库会在幕后为您完成这项工作，只需创建表单，它就会自动在表单中提交您的输入。 http://phery-php-ajax.net/

<?php 
  Phery::instance()->set(array(
    'remote-function' => function($data){
       return PheryResponse::factory('#htmlExampleTarget')->fadeIn('slow');
    }
  ))->process();
?>
<?php echo Phery::form_for('remote-function', 'post.php', array('id' => ''); ?> //outputs <form data-remote="remote-function">
  Message: <input type="text" name="message" value="Hello HTML" /> 
  <input type="submit" value="Echo as HTML" /> 
</form>
<div id="htmlExampleTarget"></div>
</body>
</html>

【讨论】：