Php 无法从ajax获得回复_Php_Jquery_Ajax

Php 无法从ajax获得回复

php jquery ajax

Php 无法从ajax获得回复,php,jquery,ajax,Php,Jquery,Ajax,我正在尝试使用jquery发布到ajax文件，并在发布的页面上显示结果。帖子被发布了，但我没有得到ajax的回复。我是不是遗漏了什么表格文件 <!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">

我正在尝试使用jquery发布到ajax文件，并在发布的页面上显示结果。帖子被发布了，但我没有得到ajax的回复。我是不是遗漏了什么

表格文件

<!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" />
<title>Test Ajax</title>
<script src="js/jquery-1.10.2.js"></script>
</head>

<body>
<form id="myform" />
<input type="text" id="youTyped" value=""/>
<input type="submit" value="Submit">
</form>
<div id="answer"></div>
<script type="text/javascript">
       $('#myform').submit(function(){
        var youTyped = $("#youTyped").val();
        var data = {youTyped:youTyped};
         $.ajax({  
            type: "POST",  
            url: "scripts/ajaxTest.php",  
            data: data,
            success: function(response){
            $("#answer").html(response);
            }
});
});
</script>   
</body>
</html>


测试Ajax
$（'#myform'）。提交（函数（）{
var youTyped=$（“#youTyped”）.val（）；
var data={youTyped:youTyped}；
$.ajax（{
类型：“POST”，
url:“scripts/ajaxTest.php”，
数据：数据，
成功：功能（响应）{
$（“#答案”）.html（回应）；
}
});
});

ajax文件

<?php
if(isset($_POST['youTyped'])){
    $youTyped = $_POST['youTyped'];
}
echo $youTyped;
?>

您需要在表单提交时

返回false

。表单将在ajax请求之前提交。还为表单添加结束标记

<script type="text/javascript">
    $('#myform').submit(function () {
        var youTyped = $("#youTyped").val();
        var data = {
            youTyped: youTyped
        };
        $.ajax({
            type: "POST",
            url: "scripts/ajaxTest.php",
            data: data,
            success: function (response) {
                $("#answer").html(response);
            }
        });
        return false;
    });
</script>


$（'#myform'）。提交（函数（）{
var youTyped=$（“#youTyped”）.val（）；
风险值数据={
youTyped：youTyped
};
$.ajax({
类型：“POST”，
url:“scripts/ajaxTest.php”，
数据：数据，
成功：功能（响应）{
$（“#答案”）.html（回应）；
}
});
返回false；
});

如果此代码正常，请尝试：

<body>

<input type="text" id="youTyped" value=""/>
<input type="submit" id="submit" value="Submit">
<div id="answer"></div>

<script type="text/javascript">
$(document).ready(function(){
           $('#submit').click(function(){
            var youTyped = $("#youTyped").val();

           $.post('scripts/ajaxTest.php',{"youTyped" : youTyped},function(response) 
         {
                 $("#answer").html(response);
        });
});
});
</script>   
</body>
</html>


$（文档）.ready（函数（）{
$（“#提交”）。单击（函数（）{
var youTyped=$（“#youTyped”）.val（）；
$.post（'scripts/ajaxTest.php'，{“youTyped”：youTyped}，函数（响应）
{
$（“#答案”）.html（回应）；
});
});
});

首先，您没有正确编写表单，要发送的元素不在表单中

其次，js函数并没有避免发送表单，因此在提交表单时会重新加载页面

因此，要更正它并获得答案，只需将代码更改为：

<!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" />
<title>Test Ajax</title>
<script type="text/javascript"     src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
</head>

<body>
<form id="myform">
    <input type="text" id="youTyped" value=""/>
    <input type="submit" value="Submit">
   <div id="answer"></div>
</form>

<script type="text/javascript">
$('#myform').submit(function(e){
    // Avoid send the form as a normal request
    e.preventDefault();

    var youTyped = $("#youTyped").val();
    var data = {youTyped:youTyped};
    $.ajax({
       type: "POST",
       url: "scripts/ajaxTest.php",
       data: data,
       success: function(response){
       $("#answer").html(response);
       }
   });
});
</script>

</body>
</html>


测试Ajax
$（'#myform'）。提交（函数（e）{
//避免将表单作为正常请求发送
e、 预防默认值（）；
var youTyped=$（“#youTyped”）.val（）；
var data={youTyped:youTyped}；
$.ajax({
类型：“POST”，
url:“scripts/ajaxTest.php”，
数据：数据，
成功：功能（响应）{
$（“#答案”）.html（回应）；
}
});
});

最后一件事。为了测试它，当您发送和接收AJAX时，如果您使用的是Chrome，您可以使用开发工具来了解您是否正确发送了请求。只需按F12，然后转到网络选项卡。如果您正确使用了AJAX，当您按下submit按钮时，您将看到如何添加新行：

<!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" />
   <title>Test Ajax</title>
   <script src="js/jquery.min.js"></script>
      <script type="text/javascript">
   $('#myform').submit(function(event){
       event.preventDefault();
    var youTyped = $("#youTyped").val();
    var data = {youTyped:youTyped};
     $.ajax({  
        type: "POST",  
        url: "ajaxTest.php",  
        data: data,
        success: successMsg,
        error: errorMsg
    });
});

function successMsg(response){
    alert(response);
    $("#answer").html(response);
}

function errorMsg(){
    alert("Invalid Ajax Call");
}

</script> 

</head>

<body>
   <form id="myform" />
   <input type="text" id="youTyped" value=""/>
   <input type="submit" value="Submit">
   <div id="answer"></div>

</body>
</html>


测试Ajax
$（'#myform'）。提交（函数（事件）{
event.preventDefault（）；
var youTyped=$（“#youTyped”）.val（）；
var data={youTyped:youTyped}；
$.ajax（{
类型：“POST”，
url:“ajaxTest.php”，
数据：数据，
成功：成功，
错误：errorMsg
});
});
功能成功（响应）{
警报（响应）；
$（“#答案”）.html（回应）；
}
函数errorMsg（）{
警报（“无效的Ajax调用”）；
}

当我玩弄这个想法时，我认为这将是对这个问题的一个很好的补充

我添加和修改了一些东西

其中之一是：

如果表单输入字段中没有键入任何内容，它将返回“youtyped:nothing”

PHP:

<?php

if(!empty($_POST['youTyped'])){

    $youTyped = $_POST['youTyped'];

echo "You typed: " .$youTyped;
}

else if (empty($_POST['youTyped'])){

echo "You typed: Nothing";

}

?>

表单不是自动关闭元素吗？像这样尝试->……。此外，如果标记有效，则表单已提交，因为您不阻止默认表单提交，请参阅上面的FIDLE。对您的答案的解释总是很有帮助的。CHOCROC非常感谢您提供完整的答案。我一直在竭尽全力想弄清楚到底出了什么问题！