jQuery post()代码-如何使其更简洁、更快

Question

我正在学习如何编程。

下面的代码显示了我点击一个按钮后发生的事情-一个jQuery post()调用提交数据到一个PHP表单，然后显示结果从数据库查询到一个div。

代码很好，但我只是想知道是否有任何方法使它更好。

更好，我的意思是如果有任何方法使代码更具可读性， 更快和更少的bug 。

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

我清理了append函数中所有不必要的连接。在我看来，追加函数太长而无法维护。我猜你的服务器端响应

无响应:"

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

您不必使用这个，但如果我必须'重制'这段代码，我会这样做:

$.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>");
    }
});

在我看来这是更可读的。如果我必须阅读你的一行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));
    }
});