使用jQuery

Question

我想使用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>

HTML

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

按钮

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

Answer 1

问题是因为您已将活动附加到click的{​​{1}}。这意味着当您的AJAX请求有效时，button仍在提交，因此页面会刷新。

要解决此问题，请改为挂钩form的{​​{1}}事件，并在传递给处理程序的事件上调用submit。试试这个：

form

另请注意，您可以使用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); } }); }); 来简化构建要附加的HTML的逻辑。如果您在map()请求中指定了正确的data，则也无需手动调用JSON.parse()。我还假设dataType是在函数之外定义的。

最后，我建议您在$.ajax上放置searchDat以使选择器不那么通用，并且还应该将内联id规则移到外部样式表中。< / p>

Answer 2

更改

<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;"/>