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 个答案: