0

使用 AJAX jQuery 时无法加载外部文件。我想使用 jQuery AJAX 弹出表单然后验证，在 MySQL 中输入数据。但从一个简单的 AJAX 函数开始。请让我知道我哪里出错了

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" media="all" href="test_style.css">
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">    </script>
        <script>
        $(document).ready(function(){
            $("#ajax-contact-form").submit(function(){
                var str = $(this).serialize();
                $.ajax({
                    type: "POST",
                    url:"contact.php",
                    data: str,
                    success:function(result) {
                        $("#div1").html(result);
                    }
                });
            });
        });
        </script>
    </head>
    <body>
        <div id="contact_form">  
            <form id="ajax-contact-form" name="contact" action=""> 
                <fieldset>
                    <label for="name" id="name_label">Name</label>
                    <input type="text" name="name" id="name" size="30" value="" class="text-input"/>  
                    <label class="error" for="name" id="name_error">This field is required.</label>  
                    <input class="button" type="submit" name="submit" value="Send Message">
                </fieldset>  
            </form>
        </div> 
    </body>
</html>

和contact.php文件是

<?php
echo "Hello";
?>
4

3 回答 3

0

尝试使用类型button类型

<input type="button" name="submit" class="button" id="submit_btn" value="Send" />

而且您的两个脚本都使用 DOM 就绪或 $(function) 之类的相同

<script>
   $(document).ready(function(){
      $(".button").click(function(){
          $.ajax({url:"contact.php",success:function(result){
               $("#div1").html(result);
           }});
       });
   });
</script>

button是你的类名，这样它就会像在你的 html 页面上.button创建一个带有 id 的 divdiv1

于 2013-08-10T09:00:05.140 回答
0 
<!DOCTYPE html>
<html>
<head>

<link rel="stylesheet" type="text/css" media="all" href="test_style.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>



<script>
$(function() {  
 $(".button").click(function() {  
    $.ajax({url:"contact.php",success:function(result){
      $("#div1").html(result);
    }});
    return false;
  });
});
</script>


</head>
<body>

<div id="contact_form"> 
<form name="contact" action=""> 
<fieldset>
   <label for="name" id="name_label">Name</label>  
   <input type="text" name="name" id="name" size="30" value="" class="text-input" />  
 <label class="error" for="name" id="name_error">This field is required.</label>  

<input type="submit" name="submit" class="button" id="submit_btn" value="Send" />
</fieldset>  
</form>
</div> 
<div id="div1">
</div> 


</body>
</html>

试试看：

需要解决的问题：

1) 你复制了 onReady 函数，

2）您可以使用提交表单按钮，但由于它的默认操作是提交表单，因此结果将不可见。

3) 没有#div1 用于显示结果。

希望这对您有所帮助......快乐编码！

于 2013-08-10T09:07:45.523 回答
0 
$("#div1").html(result);

在您要显示结果的页面内使用一个 id 为div1的 div。

<div id="div1"></div>
于 2013-08-10T09:16:21.183 回答