使用AJAX JQUERY PHP的表单不起作用_Php_Jquery_Ajax

使用AJAX JQUERY PHP的表单不起作用

php jquery ajax

使用AJAX JQUERY PHP的表单不起作用,php,jquery,ajax,Php,Jquery,Ajax,使用AJAX jQuery时无法加载外部文件。我想使用jQueryAjax弹出表单，然后验证，在MySQL中输入数据。但是从一个简单的AJAX函数开始。请告诉我哪里出了问题 <!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" media="all" href="test_style.css"> <script src=

使用AJAX jQuery时无法加载外部文件。我想使用jQueryAjax弹出表单，然后验证，在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>


$（文档）.ready（函数（）{
$（“#ajax联系人表单”）.submit（函数（）{
var str=$（this.serialize（）；
$.ajax({
类型：“POST”，
url:“contact.php”，
数据：str，
成功：功能（结果）{
$（“#div1”）.html（结果）；
}
});
});
});
名称
此字段必填。

并且contact.php文件是

<?php
echo "Hello";
?>

尝试键入

按钮

键入

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

而且您的两个脚本都是相同的，可以使用DOM ready或$（函数）like


$（文档）.ready（函数（）{
$（“.button”）。单击（函数（）{
$.ajax（{url:contact.php]，success:function（result）{
$（“#div1”）.html（结果）；
}});
});
});

button

是您的类名，因此它将像

.button

那样表示，并在html页面上创建一个id为

div1

的div


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

$（函数（）{
$（“.button”）。单击（函数（）{
$.ajax（{url:contact.php]，success:function（result）{
$（“#div1”）.html（结果）；
}});
返回false；
});
});
名称
此字段必填。

试试看：

需要解决的问题：

1）你复制了onReady函数

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

3）没有显示结果的#div1

希望这能有所帮助。。。快乐编码

$("#div1").html(result);

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

<div id="div1"></div>

您遇到了什么错误？我没有看到按钮元素看起来像复制粘贴代码。因此，您无法看到明显的区别。

和

之间的区别是，您可以使用按钮来

它不像随机火灾“和contact.php文件是”-对这对我来说是完美的

<div id="div1"></div>