Question

请看一下这段代码。我只想刷新一部分表格而不是整页。当前代码刷新了整个页面。无需查找数据库错误，因为所有条目都在数据库中

<script>
        $(document).ready(function() {
      $('#refbutton').click(function() {
        var val = $('#refinfo').val();
        $.ajax({
          type: 'POST',
          url: 'selectbox.php',
          data: 'val=' + val,
          success: function(html) {
            alert(html);
            window.location.reload();
          }
        });
      });
    });
    </script>

Html代码

    <form>
    <table>
    <tr>
            <td >Name</td>
            <td ><input name="name" type="text" /></td>
        </tr>

        <tr>
            <td>Address</td>
            <td><textarea name="address" ></textarea></td>
        </tr>
<div id="mydiv">
    <tr>
            <td>Reference</td>

            <td>

                <select data-placeholder="Choose a reference..." class="chosen-select" name ="reference1" style="width:350px;" tabindex="2">
                <option value="default">Please Select</option>
                <?php

                $sql="select * from reference ";
                //echo $sql;
                $tbl=mysql_query($sql);
                while($row=mysql_fetch_array($tbl))
                {
                ?>
                <option value="<?php echo $row['reference'];?>"><?php echo $row['reference'];?></option>
                <?php }?>


              </select>

            </td>

            <td>
                <input name="reference2" type="text" id="refinfo" ></input>
            </td>
            <td>
                <input name="Button_ref" id="refbutton" type="button" value="Add Reference"></td>

        </tr>
</div>
    </table>
    </form>

Answer 1

您的HTML无效，因为<div id="mydiv">之间无法TR。为什么你甚至想要它？如果您想要div，则必须将其保存在TD或TABLE之外。我想，您想要的只是添加到数据库的新选项，将其附加到选择框并使用返回的<div id="mydiv">填充html。请尝试以下代码。

$(document).ready(function() {
    $('#refbutton').click(function() {
        var val = $('#refinfo').val();
        var $select = $(".chosen-select");

        $.ajax({
            type: 'POST',
            url: 'selectbox.php',
            data: { val: val },
            success: function(html) {
                $("#mydiv").html(html);
                //This would append the new option to the select box without page reload
                $select.append('<option value="' + val + '">' + val + '</option>');
            }
        });
    });
});

以下a fiddle更正了您的HTML。我已将<div id="mydiv">放在表单之前。

希望有所帮助。

Answer 2

HTML：

<form>
    <table>
    <tr>
            <td >Name</td>
            <td ><input name="name" type="text" /></td>
        </tr>

        <tr>
            <td>Address</td>
            <td><textarea name="address" ></textarea></td>
        </tr>
<div id="mydiv">
    <tr>
            <td>Reference</td>

            <td>
                <div class="my-div">NEW HTML GOES HERE</div>

                <select data-placeholder="Choose a reference..." class="chosen-select" name ="reference1" style="width:350px;" tabindex="2">
                <option value="default">Please Select</option>
                <?php

                $sql="select * from reference ";
                //echo $sql;
                $tbl=mysql_query($sql);
                while($row=mysql_fetch_array($tbl))
                {
                ?>
                <option value="<?php echo $row['reference'];?>"><?php echo $row['reference'];?></option>
                <?php }?>


              </select>

            </td>

            <td>
                <input name="reference2" type="text" id="refinfo" ></input>
            </td>
            <td>
                <input name="Button_ref" id="refbutton" type="button" value="Add Reference"></td>

        </tr>
</div>
    </table>
    </form>

JavaScript的：

<script>
        $(document).ready(function() {
      $('#refbutton').click(function() {
        var val = $('#refinfo').val();
        $.ajax({
          type: 'POST',
          url: 'selectbox.php',
          data: 'val=' + val,
          success: function(html) {
            $('.my-div').html(html);
          }
        });
      });
    });
    </script>

仅重新加载<div>而不是整个表单

2 个答案: