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

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 无效，因为在 TRs 之间不能有 <div id="mydiv">。为什么你甚至想要它？如果你想要一个 div，你必须把它放在 TD 或 TABLE 之外。我认为，您想要的只是添加到数据库中的新选项，将其附加到选择框并使用返回的html 填充<div id="mydiv">。试试下面的代码。

$(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>