Question

我正在尝试从数据库中检索项目并动态地在列表中显示它们。但是每当我拿回物体时，物品就会瞬间闪烁并消失。我确信服务器运行良好，返回的json对象格式正确。

＆＃13;

    let amount = 0;
        $(document).ready(function() {
            $("#addItem").click(() => {
                let productID = $("input[name='productID']").val();
                let count = $("input[name='IDQty']").val().toString();

                console.log(productID, count);

                let query = '?';
                if (productID) {
                    query += 'productID=' + productID + "&";
                }
                if (count) {
                    query += 'IDQty=' + count;
                }

                let url = "http://localhost:3000/api/" + query;

                $.getJSON(url, (result) => {
                    console.log(result);
                    $("ul").append("<li>" + result.name + "    " + result.price.toString() + "    " + result.count + "</li>");               
                });
            });
        });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


         <form>
            ID: <input name="productID">
            Qty: <input name="IDQty" type="number" style="width:60px" value="1" min="1">
           
            <input type="submit" value="Add" id="addItem">
        </form>    
<ul id="receiptContent"></ul>

＆＃13;

结果显示在控制台中是正确的，项目确实在浏览器中显示了一秒钟。我想这是一个重定向问题，或者我将网址传递给.getJSON的方式不对。任何提示？非常感谢。

Answer 1

将表单操作更改为JavaScript：void（0）将完成工作

 <form action="JavaScript: void(0)">

或者

 <form action="#">

Answer 2

将表单标记更改为

<form onsubmit="javascript:return false">

或者将按钮标记属性“type”值从“submit”更改为“button”

jQuery对象无法在页面上不断显示

2 个答案: