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

“输出”是PHP脚本中echo'或print d的任何内容。您也可以从PHP返回一个JSON对象，如果这样可以使您的任务更容易（我建议，在这种情况下，因为您有许多不同的元素需要更新）。请参阅jQuery documentation for $.ajax。

我不建议从PHP中返回您希望客户端执行的javascript（因为eval is bad）。相反，返回数据本身并让你的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");

    }
});

我认为它有用

使用ajax更新div内容

5 个答案: