Ajax，jquery 表单插件不起作用答案

【问题标题】：Ajax, jquery form plugin won't workAjax，jquery 表单插件不起作用
【发布时间】：2010-02-23 15:10:28
【问题描述】：

我正在尝试使用 malsup jquery 表单插件，但我无法让这个简单的示例正常工作 (http://jquery.malsup.com/form/#ajaxForm)。我在下面粘贴了我的代码。出了什么问题？所发生的只是我收到一个警告框，上面写着“谢谢您的评论！”。没有其他事情发生。

谢谢，

标记

这是 ajaxtest.html 文件：

<!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" />
    <script type="text/javascript" src="javascript/jquery.js"></script> 
    <script type="text/javascript" src="javascript/jquery.form.js"></script> 
    <script type="text/javascript"> 
        // wait for the DOM to be loaded 
        $(document).ready(function() { 

     var options = {
   target: '#output1', // target element(s) to be updated with server response 
   beforeSubmit: showRequest, // pre-submit callback 
   success: showResponse // post-submit callback 
  };

            // bind 'myForm' and provide a simple callback function 
            $('#myForm').ajaxForm(function() { 
                alert("Thank you for your comment!"); 
         }); 
        }); 
  function showRequest(formData, jqForm, options) {
   alert("calling before sending!");
   return true;
  }
  function showResponse(responseText, statusText, xhr, $form) {
   alert("this is the callback post response");
  }
    </script> 
 <script>

 </script>
</head> 
<body>
<form id="myForm" action="form/report.php" method="post"> 
    Name: <input type="text" name="name" /> 
    Comment: <textarea name="comment"></textarea> 
    <input type="submit" value="Submit Comment" /> 
<div id="output1"></div>
</form>
</body>
</html>

这是 PHP 文件：

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

【问题讨论】：

你检查过firebug控制台是否有js错误吗？

标签： php jquery ajax forms plugins

【解决方案1】：

您不会在任何地方使用options 变量，您只需定义它。

【讨论】：

谢谢 - 这就是问题所在。我很感激！

【解决方案2】：

您需要将“选项”对象传递给ajaxForm 调用，并在其中设置成功函数（即在选项对象中）。看到这个页面：http://jquery.malsup.com/form/#options-object

【讨论】：

非常感谢！这就是问题所在。这是一个新手错误，但您必须在某个时候开始学习。