douxing8323 2012-03-20 03:12
浏览 43
已采纳

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

this a simple example in how to submit form using the Jquery form plugins and retrieving data using html format html Code

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

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

this just work fine what i need to know if what if i need to Serialize the form fields so how to pass this option through the JS function also i want show a loading message while form processed how should i do that too thank you

  • 写回答

3条回答 默认 最新

  • dongling0519 2012-03-20 03:20
    关注

    To serailize and post that to a php page, you need only jQuery in your page. no other plugin needed

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

    If you want to show a loading message, you can do that before you start the post call. Assuming you have div with id "divProgress" present in your page

    HTML

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

    Script

    $(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
              });
    
            });    
      });
    });
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题?

悬赏问题

  • ¥15 求帮我调试一下freefem代码
  • ¥15 R语言Rstudio突然无法启动
  • ¥15 关于#matlab#的问题:提取2个图像的变量作为另外一个图像像元的移动量,计算新的位置创建新的图像并提取第二个图像的变量到新的图像
  • ¥15 改算法,照着压缩包里边,参考其他代码封装的格式 写到main函数里
  • ¥15 用windows做服务的同志有吗
  • ¥60 求一个简单的网页(标签-安全|关键词-上传)
  • ¥35 lstm时间序列共享单车预测,loss值优化,参数优化算法
  • ¥15 Python中的request,如何使用ssr节点,通过代理requests网页。本人在泰国,需要用大陆ip才能玩网页游戏,合法合规。
  • ¥100 为什么这个恒流源电路不能恒流?
  • ¥15 有偿求跨组件数据流路径图