当返回到当前页面时不显示jQuery ajax响应

我试图通过ajax将一些数据发回到同一页面。在下面的示例中，一旦单击按钮，$name变量就不会在我的页面中更新。但是，如果我查看来自ajax的响应的控制台日志（使用萤火虫），它会显示正确的html，并插入名称（即<div>Matthew</div>） - 页面只是没有被此响应更新。任何想法如何解决这个将不胜感激。当返回到当前页面时不显示jQuery ajax响应

我的代码是：

<!DOCTYPE html> 
<html> 
<head> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 

</head> 
<body> 

<?php 
$name = "A name"; 
if ($_SERVER["REQUEST_METHOD"] == "POST") { 
    if (empty($_POST["name"])) { 
    $name = "No name!"; 
    } 
    else{ 
    $name = $_POST["name"]; 
    } 
} 
?> 

<script> 
$(document).ready(function(){ 
    $("button").click(function(){ 
     var mydata = {name: "Matthew"}; 
     $.ajax({ 
      type: 'POST', 
      data: mydata, 
      success: function(data){ 
      console.log(data); 
      } 
     }); 

    }); 
}); 
</script> 

<button>Send an HTTP POST request to a page and get the result back</button> 

<div id="name"> 
<?php echo $name;?> 
</div> 

</body> 
</html>

来源

2015-06-10 Matt Pitkin

页面不会只是更新其自我 - 这就是AJAX的整点，你需要使用返回的数据（在成功的函数）通过javascript更新它。 – Steve

Ajax不能这样工作。转到你的'success：function'，在那里，你将'data'分配给'div'标签。 –

或者只是做一个常规的表单发布，sans ajax – Steve

正是因为这样的Ajax调用时<?php echo $name;?>不会再运行。你必须更换div的内容在成功的功能是这样的：

success: function(data){ 
      $("div").html(data); 
      }

来源

2015-06-10 22:22:18

太好了，非常感谢。这已经解决了我的问题，虽然现在我看到了按钮的副作用显示两次！任何想法是什么引起的？ –

@MattPitkin这是因为你正在用ajax加载整个页面。加载你的页面的一小部分，你必须把php放在一个不同的文件中，并在你的ajax参数中调用这个url，或者使用'.load（“url div”）;'http://api.jquery.com/载入/ –

再次感谢。我意识到只要在ajax成功函数中加入'$（“＃name”）。html（mydata ['name']）;''就可以将我想要的数据发送给div元素。 –

当返回到当前页面时不显示jQuery ajax响应

回答

相关问题