javascript - ajax调用后div重新加载错误

Question

我有一个用于在表中添加和删除条目的脚本。它使用 ajax 调用 php 脚本来执行此操作。成功时，它应该重新加载包含表格的 div。目前它只是清空 div。

这是我的javascript

$(document).ready(function(){

    $("#add_height_weight").click(function(){
        var corp_hw_name = $("#corp_hw_name").val();
        var corp_hw_height = $("#corp_hw_height").val();
        var corp_hw_weight = $("#corp_hw_weight").val();       
        var client_id = $("#cient_id").val();
        var ff_id = $("#ff_id").val();
        var task = "add";

        var dataString = "task=" + task + "&client_id=" + client_id + "&ff_id=" + ff_id + "&corp_hw_name=" + corp_hw_name + "&corp_hw_height=" + corp_hw_height + "&corp_hw_weight=" + corp_hw_weight;

        $.ajax({
            type:"POST",
            url:"/organiseit/fact_finds/processors/corp_health.php",
            data: dataString,
            success: function(){
                alert("Height/Weight Updated");
                $("input,textarea,option").css("background-color","#fff");
                $("#height_weight_table").load(" #height_weight_table");
            }
        });  
    });

});

这是div的内容

<div id="height_weight_table">
    <table>
        <tr>
            <td>Name</td><td>Height</td><td>Weight</td><td>Delete</td>
        </tr>
    <?php 
    $ff_height_weight = fetch_all("SELECT * FROM ff_height_weight WHERE ff_id='$ff_id'");
    foreach($ff_height_weight as $entry){ 
    ?>
        <tr>
            <td><?php echo $entry['name']; ?></td>
            <td><?php echo $entry['height']; ?></td>
            <td><?php echo $entry['weight']; ?></td>
            <td><button class="delete_act" onclick="delete_height_weight('<?php echo $entry['id']; ?>')">X</button></td>
        </tr>
    <?php } ?>
        <tr>
            <td><input type='text' id="corp_hw_name"></td>
            <td><input type='number' id="corp_hw_height"></td>
            <td><input type='number' id="corp_hw_weight"></td>
            <td><button class='new_note_submit' id="add_height_weight">+</button></td>
        </tr>
    </table>
</div>

有没有人有任何建议为什么这会重新加载一个空的 div？

我在项目的其他地方运行了类似的代码，用于从注释表中添加/删除。下面的代码可以完美运行，但我看不出它与上面的代码有何不同:

JavaScript

if(proceed === "TRUE"){
        $.ajax({
            type:"POST",
            url:"/organiseit/clients/update_client_notes.php",
            data: noteString,
            success: function(){
                alert("data submitted");
                $("#notes_table").load(" #notes_table");
                $("#new_note").css("background-color","#fff");
            }
        });

页面上的div

<div class="notes_area" id="notes_area">
<table class="notes_table" id="notes_table">
    <tr>
        <td class="note_body"><strong>Note</strong></td>
        <td><strong>Created by</strong></td>
        <td><strong>Created for</strong></td>
        <td><strong>Date Created</strong></td>
        <td><strong>Completion by</strong></td>
        <td><strong>Delete</strong></td>
    </tr>
    <?php
    if(!empty($id)){
        $get_note = fetch_all("SELECT * FROM client_notes WHERE client_id=$id ORDER BY id DESC");
        foreach($get_note as $note){?>
        <tr>
            <td><?php echo $note["note"];?></td>
            <td><?php echo $note["created_by"];?></td>
            <td><?php echo $note["note_for"];?></td>
            <td><?php echo $note["date"];?></td>
            <td><?php echo $note["completion_by"];?></td>
            <td style="text-align:center;"><button class="delete_note" onclick="delete_note(<?php echo $id.",".$note["id"];?>)"><strong>X</strong></button></td>
        </tr>
        <?php
        }
    }
    ?>  
</table>
</div>

Answer 1

在您的第二个示例(工作示例)中，您的目标是具有 id 的表的 "#notes_table" .这就是ajax请求成功找到表的原因。

//What you are targeting in AJAX request
$("#notes_table").load(" #notes_table");

//the actual markup for the page is correct for the request
<div class="notes_area" id="notes_area">
   <table class="notes_table" id="notes_table">

在您的第一个示例中，您的目标是父 div，而不是表本身，您的 ajax 请求试图获取整个 div 而不是表:

//What you are targeting in AJAX request
$("#height_weight_table").load(" #height_weight_table");

//here you are actually targeting the parent div not the table
<div id="height_weight_table">
    <table>

尝试切换 id对于 <div>到 <table>元素。

<div>
    <table id="height_weight_table">