Javascript 仅重新加载而不是整个表单

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

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

HTML:

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>

---

您的HTML无效，因为您不能在两个TR之间使用HTML。你为什么想要它？如果你想要一个div，你必须把它放在TD或者桌子外面。我认为，您只需要将新选项添加到DB中，将其附加到选择框中，并用返回的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>');
            }
        });
    });
});

这里是与您的HTML更正。我把表格放在了表格的前面

---

希望有帮助。

删除window.location.reload；并使用$'div'。htmlhtml@ShaunakD这样，我的条目就不会被添加到选择框中。将值附加到选择框中，而不是重新加载页面。@lshettyl我想将reference2中的值添加到db中，然后在selectboxBro中从db中获取值。我想您应该看看JavaScript中的同步和异步是什么？到目前为止，这将只显示html的值，我将不得不手动重新加载整个页面，以便在选择框中显示数据，这当然会删除在其他页面中输入的文本textboxes@swinn如果要更改或中的代码，则使用相同的jQuery代码。请不要指望我写你的申请书。。

$(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>');
            }
        });
    });
});