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>

尝试将<div>的id切换到<table>元素。

<div>
    <table id="height_weight_table">

Answer 2

您没有在div加载接收到的数据。 您必须在success函数中声明和使用该数据。 尝试这个...

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

我希望它有帮助