Question

我正在学习如何编码。

下面的代码显示了单击按钮后发生的情况 - 进行了jQuery post()调用，将数据提交到PHP表单，然后将数据库查询的结果显示为div。

代码很好，但我只是想知道是否有任何方法可以让它变得更好。

更好的说，我的意思是，如果有任何方法可以使代码更强可读，更快，减少错误。

$.post("load_product.php", {'ID': IDname}, function(json) {

        var product_details_array = $.parseJSON(json);

        var test_for_null = product_details_array[0];

        if ( test_for_null.length > 0)

        {

 $('#product_tags_container').append(
        "<div class='product_tags'>" + "<img id='remove_tag' src='../function icons/cross.png'>" + "<div id='product_texture_picture'>" + "<img src='" +  "product_pictures/" + product_details_array[4] + product_details_array[5] + "'>" + "</div>" + "<div id='product_title'>" + product_details_array[0] + "</div>" + "<br><br>" + "<div id='product_brand'>" + product_details_array[6] + "</div>" + "<div id='product_price'>"+  product_details_array[3] + "</div>" + "</div>");

         }
         });

Answer 1

我清理了追加功能中的所有不必要的连接。在我看来，追加功能太长了，无法保留。我猜测你的服务器端响应

没有回应：''

JSON数组为null：null

JSON数组为空：[]

$.post("load_product.php", {
id: IDname
}).done(function(data) {
    if (data.length>0 && data!=null && data!='[]') {
        var product_details_array = $.parseJSON(data);
        $('#product_tags_container').append("<div class='product_tags'><img id='remove_tag' src='../function icons/cross.png'><div id='product_texture_picture'><img src='product_pictures/" + product_details_array[4] + product_details_array[5] + "'></div><div id='product_title'>" + product_details_array[0] + "</div><br><br><div id='product_brand'>" + product_details_array[6] + "</div><div id='product_price'>" + product_details_array[3] + "</div></div>");
    }
}
});

Answer 2

你不必使用它，但如果我不得不重拍＆＃39;这段代码，我这样做：

$.post("load_product.php", {'ID': IDname}, function(json) {
    var product_details_array = $.parseJSON(json);
    if (product_details_array[0].length > 0) {
        $('#product_tags_container').append(
            "<div class='product_tags'>" + 
                "<img id='remove_tag' src='../function icons/cross.png'>" + 
                "<div id='product_texture_picture'>" +
                    "<img src='" + "product_pictures/" + product_details_array[4] + product_details_array[5] + "'>" + 
                "</div>" + 
                "<div id='product_title'>" + product_details_array[0] + "</div>" + 
                "<br><br>" + 
                "<div id='product_brand'>" + product_details_array[6] + "</div>" + 
                "<div id='product_price'>" + product_details_array[3] + "</div>" + 
            "</div>");
    }
});

在我看来，这更具可读性。如果我必须阅读你的1行HTML代码，我会重新格式化它，看起来就像我先给出的例子。如果您或其他任何人必须进行编辑，那么这样做会更容易。

编辑：

function assembleProductHTML(product_details_array) {
    return "<div class='product_tags'>" +
                "<img id='remove_tag' src='../function icons/cross.png'>" +
                "<div id='product_texture_picture'>" +
                    "<img src='" + "product_pictures/" + product_details_array[4] + product_details_array[5] + "'>" +
                "</div>" +
                "<div id='product_title'>" + product_details_array[0] + "</div>" +
                "<br><br>" +
                "<div id='product_brand'>" + product_details_array[6] + "</div>" +
                "<div id='product_price'>" + product_details_array[3] + "</div>" +
            "</div>";
}

$.post("load_product.php", {'ID': IDname}, function(json) {
    var product_details_array = $.parseJSON(json);
    if (product_details_array[0].length > 0) {
        $('#product_tags_container').append(assembleProductHTML(product_details_array));
    }
});

jQuery post（）代码 - 如何使更干净，更快？

2 个答案: