Question

我想通过使用val["id"]更改图片来定义条件：

if (val["id"] > 10) {
    //show the first image
} else if (val["id"] > 20) {
    //show the second image
} else {
    //show the third image
};

我不明白ajax的一些语法可以帮助我完成上述条件

function getDataFromDb() {
    $.ajax({
            url: "getData.php",
            type: "POST",

        })
        .success(function(result) {
            var obj = jQuery.parseJSON(result);
            if (obj != '') {
                //$("#myTable tbody tr:not(:first-child)").remove();
                $("#myBody").empty();
                $.each(obj, function(key, val) {
                    var tr = "<tr>";
                    tr = tr + "<td>" + val["id"] + "</td>";
                    tr = tr + "<td>" + val["first_name"] + "</td>";
                    tr = tr + "<td>" + val["last_name"] + "</td>";
                    tr = tr + "<td>" + val["age"] + "</td>";
                    tr = tr + "<td>" + val["hometown"] + "</td>";
                    tr = tr + "<td>" + val["job"] + "</td>";
                    tr = tr + "</tr>";
                    $('#myTable > tbody:last').append(tr);
                });
            }

        });

}

setInterval(getDataFromDb, 100); // 1000 = 1 second

Answer 1

可能会有所帮助。

function getDataFromDb() {
$.ajax({
        url: "getData.php",
        type: "POST",

    })
    .success(function(result) {
        var obj = jQuery.parseJSON(result);
        if (obj != '') {
            //$("#myTable tbody tr:not(:first-child)").remove();
            $("#myBody").empty();
            $.each(obj, function(key, val) {
                var tr = "<tr>";
                tr = tr + "<td>" + val["id"] + "</td>";
                tr = tr + "<td>" + val["first_name"] + "</td>";
                tr = tr + "<td>" + val["last_name"] + "</td>";
                tr = tr + "<td>" + val["age"] + "</td>";
                tr = tr + "<td>" + val["hometown"] + "</td>";
                tr = tr + "<td>" + val["job"] + "</td>";
                tr = tr + "<td>" + "<img src='" + GetImage(parseInt(val["id"]))+ "'>" + "</td>";
                tr = tr + "</tr>";
                $('#myTable > tbody:last').append(tr);
            });
        }

    });

}

function GetImage(id){
  if (val["id"] < 10) {
    return "images/img01.jpg"; // edit this to which works for you
   } else if (val["id"] < 20) {
    return "images/img02.jpg"
   } else {
    return "images/img03.jpg"
  };
}

setInterval(getDataFromDb, 100); // 1000 = 1 second

该函数假设如果Id小于10，则首先显示它是否小于20显示其他第三个。你的初始逻辑会显示第一个图像，如果id是10+，那就是inifnity ......

Answer 2

的index.php

<!DOCTYPE html>
<html>
<head>
<title>TEST REAL TIME UPDATE</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="http://code.jquery.com/jquery-latest.js"></script>
<meta charset=utf-8 />
<script>

function getDataFromDb()
{
    $.ajax({ 
                url: "getData.php" ,
                type: "POST",
                data: ''
            })
            .success(function(result) { 
                var obj = jQuery.parseJSON(result);
                    if(obj != '')
                    {
                          //$("#myTable tbody tr:not(:first-child)").remove();
                          $("#myBody").empty();
                          $.each(obj, function(key, val) {
                                    var tr = "<tr>";
                                    tr = tr + "<td>" + val["id"] + "</td>";
                                    tr = tr + "<td>" + val["first_name"] + "</td>";
                                    tr = tr + "<td>" + val["last_name"] + "</td>";
                                    tr = tr + "<td>" + val["age"] + "</td>";
                                    tr = tr + "<td>" + val["hometown"] + "</td>";
                                    tr = tr + "<td>" + val["job"] + "</td>";
                                    // tr = tr + "<td>" + "<img src='" + GetImage(parseInt(val["id"]))+"'>" + "</td>";
                                    tr = tr + "</tr>";
                                    $('#myTable > tbody:last').append(tr);
                          });
                    }

            });

}

// function GetImage(id){
//  if (val["id"] < 10){
//      return "pic/img1.jpg"
//  } else if (val["id"] < 20){
//      return "pic/img2.jpg"
//  } else {
//      return "pic/img3.jpg"
//  };
// }

setInterval(getDataFromDb, 100);   // 1000 = 1 second
</script>
</head>
<body>
 <center>
<h1>TEST AJAX CHANGE PICTURE</h1>
</br>

<table width="600" border="1" id="myTable">
<!-- head table -->
<thead>
  <tr>
    <td width="91"> <div align="center">ID </div></td>
    <td width="98"> <div align="center">First_Name </div></td>
    <td width="198"> <div align="center">Last_Name</div></td>
    <td width="97"> <div align="center">Age </div></td>
    <td width="59"> <div align="center">Hometown </div></td>
    <td width="71"> <div align="center">Job </div></td>
    <!-- <td width="198"> <div align="center"> Pic</div></td> -->
  </tr>
</thead>
<!-- body dynamic rows -->
<tbody id="myBody"></tbody>
</table>




 <center>
</body>
</html>

访问getdata.php

<?php
    $objConnect = mysql_connect("localhost","root","") or die(mysql_error());
    $objDB = mysql_select_db("ajax_demo");
    $strSQL = "SELECT * FROM my_db WHERE 1 ORDER BY id DESC limit 1 ";
    $objQuery = mysql_query($strSQL) or die (mysql_error());
    $intNumField = mysql_num_fields($objQuery);
    $resultArray = array();
    while($obResult = mysql_fetch_array($objQuery))
    {
        $arrCol = array();
        for($i=0;$i<$intNumField;$i++)
        {
            $arrCol[mysql_field_name($objQuery,$i)] = $obResult[$i];
        }
        array_push($resultArray,$arrCol);
    }

    mysql_close($objConnect);

    echo json_encode($resultArray);
?>

我想添加条件来更改此脚本中的Image或创建新的

2 个答案: