使用ajax更新div内容

I would like to update some divs within my page with database data through a click event. I have tried this but to no avail

MainPage.php

   function getResults(){
        $.ajax({
          type: "POST",
          url: "ajax.php",
          data: "profile=1",
          dataType: 'text'
        });
    }

ajax.php

 if($_POST['profile']){
    $sql="SELECT col1, col2, col3, col4, last_punch FROM table WHERE ID = 123";
    $result=mysqli_query($con,$sql);
    $row = $result->fetch_assoc();
    $row["col1"];
    $row["col1"];
    $row["col1"];
    $row["col1"];
    $row["col1"];

    echo "<script>";
    echo "$('#div1').text('$row["col1"]');";
    echo "$('#div2').text('$row["col2"]');";
    echo "$('#div3').text('$row["col3"]');";
    echo "$('#div4').text('$row["col4"]');";
    echo "</script>";
 }

EDITED

 function getResults(){
    $.ajax({
    type: "POST",
    url: "ajax.php",
    data: "profile=1",
    dataType: 'text',
    success: function(data){
    $('#div1').text(data.col1);
    $('#div2').text(data.col2);
    $('#div3').text(data.col3);
    $('#div4').text(data.col4);
}

AJAX

    $sql="SELECT col1, col2, col3, col4, last_punch FROM table WHERE ID = 123";
    $result=mysqli_query($con,$sql);
    $row = $result->fetch_assoc();
    $row["col1"];
    $row["col1"];
    $row["col1"];
    $row["col1"];
    $row["col1"];


echo json_encode( array( 
'col1' => $row["col1"], 
'col1' => $row["col2"], 
'col1' => $row["col3"], 
'col1' => $row["col4"] 
) );

This looked like it would work, but unfortunately didn't.

You need to define a success callback to your ajax function:

function getResults(){
    $.ajax({
      type: "POST",
      url: "ajax.php",
      data: "profile=1",
      dataType: 'text',
      success: function(output) {
          // Do something with output
      }
    });
}

The 'output' is anything that is echo'd or print'd from your PHP script. You can also return a JSON object from PHP as well, if that makes your task easier (I would suggest it, in this case, since you have many different elements you want to update). See the jQuery documentation for $.ajax.

I would not suggest returning javascript from PHP that you want the client to then execute (because eval is bad). Instead, return the data itself and have your javascript do something with it.

This would mean changing your server script to output this:

echo json_encode( array( 
    'col1' => $row["col1"], 
    'col1' => $row["col2"], 
    'col1' => $row["col3"], 
    'col1' => $row["col4"] 
) );

And your client-side script to this:

function getResults(){
    $.ajax({
      type: "POST",
      url: "ajax.php",
      data: {profile:1},
      dataType: 'json',
      success: function(json) {
          // Here you should be able to access the contents of json.col1, etc
      }
    });
}

After getting success response append it in your div:

function getResults(){
        $.ajax({
          type: "POST",
          url: "ajax.php",
          data: "profile=1",
          dataType: 'text',
          success: function(data) {
            $("#your_div_id").append(data);
          }
        });
    }

You need a callback function to add the data to the page.

function getResults(){
    $.ajax({
      type: "POST",
      url: "ajax.php",
      data: "profile=1",
      dataType: 'text',
        success: function(data){
            $("#your-target-div").html(data);               
        }
    });
 }

And in your php script.

<?php
 if($_POST['profile']){
    $sql="SELECT col1, col2, col3, col4, last_punch FROM table WHERE ID = 123";
    $result=mysqli_query($con,$sql);
    $row = $result->fetch_assoc();
    $row["col1"];
    $row["col1"];
    $row["col1"];
    $row["col1"];
    $row["col1"];


    $dump = "<script>";
    $dump.= "$('#div1').text('".$row["col1"]."');";
    $dump.= "$('#div2').text('".$row["col2"]."');";
    $dump.= "$('#div3').text('".$row["col3"]."');";
    $dump.= "$('#div4').text('".$row["col4"]."');";
    $dump.= "</script>";

     echo $dump;


 }
?>

It's also considered a good practice just to return the resource using json and set the html structure in javascript itself. But that's up to the coder's choice.

You should paste result into the DOM to make it change.

In your example data is dumped.

You should attach a success handler to your ajax-call and push data to DOM inside it.

I.e.:

function getResults(){
    $.ajax({
      type: "POST",
      url: "ajax.php",
      data: {profile: 1},
      dataType: 'text',
      success: function(data) {
          $('.loaded_content').html(data);
      }
    });
}

the $.ajax function can be define as

  $.ajax({
    url: "ajax.php",
    type: "post",
    data: 'profile=1',
    success: function(data){
       $("div#res").html(data);

    },
    error:function(){
        alert("failure");

    }
});

i think it work