使用ajax更新div內容

Question

我想通過點擊事件更新我的頁面中的一些div與數據庫數據。 我試過這個但無濟於事

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"] 
) );

看起來它會起作用，但不幸的是沒有。

Answer 1

您需要為ajax函數定義成功回調：

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

'output'是從PHP腳本中echo或print的任何內容。 您也可以從PHP返回一個JSON對象，如果這樣可以使您的任務更容易（我建議，在這種情況下，因為您有許多不同的元素需要更新）。 請參閱$ .ajax的jQuery文檔 。

我不建議從PHP中返回您希望客戶端執行的javascript（因為eval很糟糕 ）。 相反，返回數據本身並讓你的javascript做一些事情。

這意味着要更改服務器腳本以輸出：

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

你的客戶端腳本：

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

Answer 2

獲得成功后，將其附加到您的div中：

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

Answer 3

您需要一個回調函數來將數據添加到頁面。

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

在你的PHP腳本中。

<?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;


 }
?>

僅使用json返回資源並在javascript本身中設置html結構也被認為是一種很好的做法。 但這取決於編碼人員的選擇。

Answer 4

您應該將結果粘貼到DOM中以使其更改。

在您的示例中，數據被轉儲。

您應該將成功處理程序附加到ajax調用並將數據推送到其中的DOM。

即：

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

Answer 5

$ .ajax函數可以定義為

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

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

    }
});

我覺得它有用