0

我正在尝试使用 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;
?>
4

5 回答 5

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，您将看到按下提交按钮时如何添加新行：

在此处输入图像描述

于 2013-08-04T15:39:53.263 回答
0

试试这段代码是否有效：

<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>
于 2013-08-04T15:35:51.683 回答
0 
<!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>
于 2013-08-04T15:47:55.747 回答
0

您需要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>
于 2013-08-04T15:28:37.033 回答
0

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

我添加和修改了一些东西。

其中之一是：

  • 如果在表单输入字段中没有输入任何内容，它将返回“您输入：无”。

PHP：

<?php

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

    $youTyped = $_POST['youTyped'];

echo "You typed: " .$youTyped;
}

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

echo "You typed: Nothing";

}

?>
于 2013-08-04T23:25:23.737 回答