admin管理员组

文章数量:1431398

I'm attempting to post some data back to the same page through ajax. In the example below, the $name variable is not being updated in my page once the button is clicked. However, if I look at the console log of the response from ajax (using firebug) it shows the correct html, with the name inserted (i.e. <div>Matthew</div>) - the page just isn't being updated with this response. Any ideas for how to fix this would be greatly appreciated.

The code I have is:

<!DOCTYPE html>
<html>
<head>
<script src=".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>

I'm attempting to post some data back to the same page through ajax. In the example below, the $name variable is not being updated in my page once the button is clicked. However, if I look at the console log of the response from ajax (using firebug) it shows the correct html, with the name inserted (i.e. <div>Matthew</div>) - the page just isn't being updated with this response. Any ideas for how to fix this would be greatly appreciated.

The code I have is:

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis./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>
Share Improve this question edited Mar 3 at 12:12 Matt Pitkin asked Jun 10, 2015 at 22:16 Matt PitkinMatt Pitkin 6,6451 gold badge25 silver badges45 bronze badges 4
  • The page wont just update its self - thats the whole point of ajax, you need to use the returned data (in the success function) to update it via javascript. – Steve Commented Jun 10, 2015 at 22:21
  • Ajax doesn't work that way. Go to your success: function, there, you assign data to the div tag. – Jose Manuel Abarca Rodríguez Commented Jun 10, 2015 at 22:21
  • or just do a regular form post, sans ajax – Steve Commented Jun 10, 2015 at 22:22
  • I've just posted a simple test case here, but in my real application I need to use javascript functionality on the output of the form and then resubmit that, so ajax seemed the best option. – Matt Pitkin Commented Jun 10, 2015 at 22:34
Add a ment  | 

1 Answer 1

Reset to default 3

It is because <?php echo $name;?> does not run again when doing the ajax call. You have to replace the content of the div in the success function like this:

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

本文标签: javascriptjQuery ajax response not displaying when returning to current pageStack Overflow