如何在不刷新頁面的情況下創建更新按鈕

Question

我有我的物品：

<table>
    <tr>
        <th>
            id
        </th>
        <th>
            name
        </th>
        <th>
            update
        </th>
    </tr>
    <tr>
        <td>
            <?php echo $id; ?>
        </td>
        <td>
            <?php echo $name; ?>
        </td>
        <td>
            <input type="button" name="id" id="update" value="update" />
        </td>
    </tr>
</table>

現在，當我單擊“更新”按鈕以加載按鈕下方的update.php?id=$id結果時，我該如何在JavaScript中創建它？ 請幫我。

Answer 1

這是使用JQuery庫通過JavaScript加載內容的基本示例：

<table>
    <tr>
        <th>
            id
        </th>
        <th>
            name
        </th>
        <th>
            update
        </th>
    </tr>
    <tr>
        <td>
            <?php echo $id; ?>
        </td>
        <td>
            <?php echo $name; ?>
        </td>
        <td>
            <input class="toLoad" link="update.php?id=<?php echo $id; ?>" type="button" name="id" id="update" value="update" />
        </td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td id="results"></td>
    </tr>
</table>


<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
$(".toLoad").click( function(event)
{
        event.preventDefault();
        $("#results").load($(this).attr("link"));
});
</script>

未經測試，應該可以工作。 如果它不起作用，請回復您得到的錯誤。

Answer 2

首先給按鈕所在的位置提供一個ID。

<td id="main">
    <input type="button" name="id" id="update" value="update" />
</td>

然后將JQuery庫包含到您的<head></head>部分

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" ></script>

按下按鈕時添加ajax調用

$(document).ready(function() {
    $('input[name="id"].click(function(){
        $.ajax({
          url : 'update.php',
          type : "POST",
          data : {
                id  : '<?php echo($id); ?>'
          },
          success : function(data) {
            $('#main').append(data);
          }
      });
    });
}

當您單擊按鈕時，將在php頁面上進行ajax調用，您必須在其中echo顯結果，該頁面將顯示在按鈕之后。

如何在不刷新頁面的情況下創建更新按鈕

問題描述

2 個解決方案

解決方案1
0 已采納 2014-09-11 11:59:17

解決方案2
0 2014-09-11 12:01:28

如何在不刷新頁面的情況下創建更新按鈕

問題描述

2 個解決方案

解決方案1 0 已采納 2014-09-11 11:59:17

解決方案2 0 2014-09-11 12:01:28

解決方案1
0 已采納 2014-09-11 11:59:17

解決方案2
0 2014-09-11 12:01:28