Question

这是一个简单的例子，说明如何使用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函数传递此选项我还想在表单处理时显示加载消息我该怎么做呢谢谢

Answer 1

要将其分类并发布到php页面，您只需要在页面中使用jQuery。没有其他插件需要

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

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

  });

如果要显示加载消息，可以在开始发布呼叫之前执行此操作。假设你有div的id＆＃34; divProgress＆＃34;出现在您的页面

<强> 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
          });

        });    
  });
});

Answer 2

Shyju发布的答案应该可以正常工作。我认为＆＃39; dat＆＃39;应该用引号给出。

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

...

}

或者简单地说，

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

 ...

}

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

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

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

使用Jquery Ajax Form Plugin和php提交表单？

3 个答案: