Question

我有一个使用PHP / mysql填充的基本html表。当有人使用jQuery将新行插入我的数据库时，有人可以建议我如何更新或插入表格顶部的新表行吗？

我有Google搜索，但只能找到如何更新div，例如：

$(document).ready(function(){

var auto_refresh = setInterval(
function ()
{
$('#some_div').load('test.php').fadeIn("slow");
}, 1000); // refresh every 10000 milliseconds

});

如果有人能帮助我，我真的很感激。

Answer 1

Javascript无法从数据库接收推送通知，因此您提供的示例是正确的。

但是，您可以通过AJAX向Javascript返回一些值来轮询服务器以获取更改，该值告诉您数据是否已更改，然后激活AJAX请求以刷新显示这些结果的页面部分。

无论哪种方式，您都必须通过setInterval()调用来轮询服务器以进行更改。有一些方法可以启用HTTP流，但这有点超出了这个问题的水平。

编辑：为简洁起见，我将在jQuery中编写一个示例：

var getCurrentDate = function() {
  return (new Date()).toUTCString();
};

var lastPing = getCurrentDate();

setInterval(function() {
  $.post(
    '/service/getNewData',
    { from: lastPing },

    function(data) {
      // set the timestamp for the next request
      lastPing = getCurrentDate();

      // assuming the server returns a JSON array of rows
      $('body').append('<p>Last inserted ID: ' + data[data.length - 1].ID + '</p>');

      // you could run a for loop here for each row in data
      for(var i = 0; i < data.length; i++) {
        // ....
      }

    }
  );
}, 5000);

此代码请求/service/getNewData URL并发送上次发送请求的UTC字符串;这使服务能够查找时间戳大于AJAX调用发送的UTC时间戳的行。您所需要的只是将行作为正确的JSON字符串发送回正确的HTTP标头，并且您已经完成设置。

请参阅json_encode()。

Answer 2

function update() {
    $.ajax({
        type: 'GET',
        url: 'some.php',
        data: $('form#my_form').serialize(),
        success: function(data) {
            $("#some").html(data);
            window.setTimeout(update, 10000);
        }
    });
};

$(document).ready(function() {
update();
});


<?php
//some.php
echo '<pre>';
//just for  visualization
print_r($_GET);
echo '</pre>';

//here do insert update database
//after db insert update return some data as json (object)
echo json_encode($return, JSON_FOCE_OBJECT);
// echo json_encode($return); //if php<5.3
?>

Answer 3

不确定jQuery，但你可以使用AJAX和一些简单的PHP代码行来完成它。

您可以将此代码用于ajax请求：

function updateTable() {
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
               //**Place the js table append code**
    }
  }
xmlhttp.open("GET","getSQLrows.php",true);
xmlhttp.send();
}

getSQLrows.php：

<?php

$query = mysql_query("SELECT * FROM table WHERE used = 0");
while ($result = mysql_fetch_array($query)) {
    echo $result['field'];
    mysql_query("UPDATE table SET used = 1 WHERE id = $result['id']");
}

?>

这只是一个非常一般的例子，说明如何根据需要实施此类解决方案。

Answer 4

您可以使用输入字符串更改网站上的元素..

HTML：

<div id='test'></div>

JQUERY：

// Instant method to feedback user..
$('#test').text('your_new_data'); // if $.ajax is success do it

它可以用新数据替换您以前的数据..

如果您想了解text method

Answer 5

我建议使用模型中的clone（）来为你的html添加行：

<style type="text/css">
  #line_model {
    display: none;
  }
</style>

<script type="text/javascript">
$(document).ready(function () {
  $('#add_line').click(function () {
    $('#line_model').clone().prependTo('#editor_lines').show();
  });
});
</script>

<div id="editor">
  <input type="button" id="add_line" value="add_line" />
  <div id="line_model">
    <input name="field1[]" />
    <input name="field2[]" />
  </div>
  <div id="editor_lines">
    <div class="line">
      <input name="field1[]" value="test1" />
      <input name="field2[]" value="test2" />
    </div>
    <div class="line">
      <input name="field1[]" value="test3" />
      <input name="field2[]" value="test4" />
    </div>
  </div>
</div>

这样您就可以只定义一次行的行为。

要更新数据库，可以使用update() function by predrag.music

新数据库条目时，Jquery可以更新/插入新表行吗？

5 个答案: