Question

我正在尝试使用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文件

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

Answer 1

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

其次，你的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时，如果您使用的是Chrome，则可以使用开发工具来了解您是否正确发送了请求。只需按F12，然后转到网络选项卡。如果你正确使用AJAX，当你按下提交按钮时，你会看到如何添加新行：

enter image description here

Answer 2

您需要在表单提交时return 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>

Answer 3

尝试此代码是否有效：

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

Answer 4

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

Answer 5

当我玩弄这个想法时，认为这会对这个问题做出很好的添加/贡献。

我添加并修改了一些内容。

其中之一是：

如果在表单输入字段中没有输入任何内容，则会返回“You typed：Nothing”。

<强> PHP：

<?php

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

    $youTyped = $_POST['youTyped'];

echo "You typed: " .$youTyped;
}

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

echo "You typed: Nothing";

}

?>

无法从ajax获得回复

5 个答案: