Javascript 使用jQuery时，表数据正在消失

我想使用jQuery用PHP脚本数据填充一个表。我正试着成为

<script type="text/javascript" src="js/jquery.min.js"> </script>
<script type="text/javascript">
    $(document).ready(function(){
        $("#button").click(function(){
            $.ajax({
                url: "http://localhost/test.php",
                type:"POST",
                async:true,
                data:{
                    "done":1,
                    "searchDat" : searchDat,
                },
                success: function(data){
                    //alert( JSON.parse(data));
                    var array = JSON.parse(data);
                    var trHTML = '';
                    $.each(array, function(ind,value) {
                        console.log(value);
                        trHTML += '<tr><td>' + value + '</td><td>' + value+ '</td></tr>';
                    });
                    $('#Table').append(trHTML);
                }   
            });
        });
    });
</script>

$（文档）.ready（函数（）{
$（“#按钮”）。单击（函数（）{
$.ajax({
url:“http://localhost/test.php",
类型：“POST”，
async:true，
数据：{
“完成”：1，
“searchDat”：searchDat，
},
成功：功能（数据）{
//警报（JSON.parse（data））；
var array=JSON.parse（数据）；
var trHTML=''；
$.each（数组、函数（ind、值）{
console.log（值）；
trHTML+=''+值+''+值+''；
});
$（'#Table'）.append（trHTML）；
}   
});
});
});

HTML

<table id="Table">
    <tbody>
        <tr><td>ID</td></tr>
        <tr><td>ID2</td></tr>
    </tbody>
</table>

身份证件
ID2

按钮

<form>
<input type="submit" value="Search" id ="button" style="width:50%;border-radius:8px;padding: 15px 4px;"/>
</form> 

问题是表格填充了1秒，然后消失在网页中。我做错了什么

编辑1

<script type="text/javascript">
$("form").on('submit', function(e){
  e.preventDefault();

  $.ajax({
    url: "http://localhost/bbcprg/getPrograms.php",
    type:"POST",
    data: {
      "done": 1,
    },
    success: function(data){
        //alert( JSON.parse(data));
        var arrayData = JSON.parse(data);
        var trHTML = '';
        $.each(arrayData, function(ind,value) {
            console.log(value);
            trHTML += '<tr><td>' + value + '</td><td>' + value+ '</td></tr>';
        });
        $('#Table').append(trHTML);
                }   
  });
});

</script>

$（“表格”）。在（'submit'，函数（e）{
e、 预防默认值（）；
$.ajax({
url:“http://localhost/bbcprg/getPrograms.php",
类型：“POST”，
数据：{
“完成”：1，
},
成功：功能（数据）{
//警报（JSON.parse（data））；
var arrayData=JSON.parse（数据）；
var trHTML=''；
$.each（数组数据，函数（ind，值）{
console.log（值）；
trHTML+=''+值+''+值+''；
});
$（'#Table'）.append（trHTML）；
}   
});
});

问题是因为您已将事件附加到

按钮的
点击
。这意味着当AJAX请求工作时，
表单仍在提交中，因此页面会被刷新

要解决此问题，请钩住
表单的
submit
事件，并对传递给处理程序的事件调用
preventDefault（）。试试这个：

$("form").on('submit', function(e){
  e.preventDefault();

  $.ajax({
    url: "http://localhost/test.php",
    type:"POST",
    data: {
      done: 1,
      searchDat: searchDat,
    },
    dataType: 'json',
    success: function(data) {
      var html = data.map(d => '<tr><td>' + d + '</td><td>' + d + '</td></tr>').join('');
      $('#Table tbody').append(html);
    }   
  });
});

$（“表单”）。关于（'submit'，函数（e）{
e、 预防默认值（）；
$.ajax({
url:“http://localhost/test.php",
类型：“POST”，
数据：{
完成：1，
searchDat:searchDat，
},
数据类型：“json”，
成功：功能（数据）{
var html=data.map（d=>“”+d+“”+d+“”）.join（“”）；
$（'#Table tbody'）.append（html）；
}   
});
});

还要注意的是，您可以通过在
data
数组上使用
map（）
简化构建要追加的HTML的逻辑。如果在
$.ajax
请求中指定了正确的
数据类型，则也不需要手动调用
JSON.parse（）
。我还假设
searchDat
是在函数外部定义的

最后，我建议您在
表单
上放置一个
id
，以减少选择器的通用性，并且您还应该将内联
样式
规则移动到外部样式表中。
更改

<input type="submit" value="Search" id ="button" style="width:50%;border-radius:8px;padding: 15px 4px;"/>



对此

<input type="button" value="Search" id ="button" style="width:50%;border-radius:8px;padding: 15px 4px;"/>


首先使用
$（“#表”）.find（'tbody'）.append（trHTML）
是
#按钮
元素
type=“submit”
？如果是这样，那么您的表单也正在提交，页面正在刷新。@Alexandru IonutMihai它不起作用。@Rorymcrossan认为您是对的。页面正在刷新。我应该做什么来代替
submit
？在这种情况下，选择
表单
元素并钩住
submit
事件，但请确保在事件上调用
preventDefault（）
。如果您仍然不确定，请更新您的问题，使其包含表单和按钮HTML，我将向您演示如何执行此操作否，请勿执行此操作。没有
submit
按钮意味着您不能通过按键盘上的
Return
键来提交表单，这对于可访问性标准至关重要。@rory mccrossan是的，您是对的。然后，您需要防止提交按钮的默认行为，转而附加ajax调用。这不起作用。我正在使用你的代码的修改版本。请参阅相关的Edit1。你能提供一些简单的“它不起作用”的更多信息吗。发生了什么事？控制台中有错误吗？没有。即使控制台上没有打印数据，也没有错误。控制台上没有任何错误我试图将警报添加为
$（“表单”）。在（'submit'，函数（e）{alert（“Enter”）
。即使它没有发出警报，也意味着它是位进入
。在（'submit'）
上，文档准备就绪事件处理程序在第二个代码块中丢失。
$（函数（）{/*code here…*/}）；