使用ajax更新div内容

Question

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.

Answer 1

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
      }
    });
}