issues with using render and send at the same time

I really new in ajax and want update a data with ajax at the same route which render a page with other data:

router.get("/product", isLoggedIn, function (req, res) {
    products.find({}, function (err, products) {
        if (err) {
            console.log("ERROR!");
        } else {
            orders.find({
                customerInfo: req.user
            }, function (err, orders) {
                if (err) {
                    console.log(err);
                } else {
                    res.render('allProduct', {
                        data: products,
                        badge: orders[0].productInfo.length
                    });
                }
            });

        }

    });
});

and here is my script:

$(function () {
    $('#updateBadge').on('click', function () {
        $.ajax({
            url: '/product',
            contentType: 'application/json',
            success: function (response) {
                var badgeA = $('#badgeA');
                badgeA.html('');
                console.log(response.badge);
                badgeA.append('\
<span class="badge badge-pill badge-danger"style="background-color:red">\
                         ' + response.badge + ' </span>\
                            <i class="fa fa-shopping-cart" aria-hidden="true"></i>\
                          ');
            }
        });

    });
});

but just one of send and render works!

via milad fahimi