Question

我正在尝试使用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>'; 
?>

Answer 1

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

Answer 2

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

Ajax，jquery表单插件不起作用

2 个答案: