Ajax,jquery表单插件不起作用

时间:2022-10-07 17:48:05

I'm trying to use the malsup jquery form plugin and I can't get the simple example to work (http://jquery.malsup.com/form/#ajaxForm). I've pasted my code below. What is going wrong? All that happens is I get an alert box that says "Thank you for your comment!". Nothing else happens.

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

Thanks,

谢谢,

Mark

标记

This is the ajaxtest.html file:

这是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>

This is the PHP file:

这是PHP文件:


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

2 个解决方案

#1


0  

You don't use the options variable anywhere, you only define it.

您不在任何地方使用选项变量,只需定义它。

#2


0  

You need to pass your "options" object into the ajaxForm call, and set up your success function in that (that is, in the options object). See this page: http://jquery.malsup.com/form/#options-object

您需要将“options”对象传递给ajaxForm调用,并在其中设置成功函数(即,在options对象中)。请参阅此页面:http://jquery.malsup.com/form/#options-object

#1


0  

You don't use the options variable anywhere, you only define it.

您不在任何地方使用选项变量,只需定义它。

#2


0  

You need to pass your "options" object into the ajaxForm call, and set up your success function in that (that is, in the options object). See this page: http://jquery.malsup.com/form/#options-object

您需要将“options”对象传递给ajaxForm调用,并在其中设置成功函数(即,在options对象中)。请参阅此页面:http://jquery.malsup.com/form/#options-object