How to avoid url aotomatic append a "#" symbol after ajax request

Question

I am developing a web page using ASP.NET MVC.When i am using aJax to request a subpage content,the url append a "#" automatic.Before the aJax,the url would like this:http://a.travel.com/product/index,after aJax request,the url would like this:http://a.travel.com/product/index#.This is my aJax request code:

 function GetProductByTag(tagId, source) {
        var keyword = $("#serachInput").val();
        if (keyword == null) {
            return;
        }
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4) {
                if (xhr.status === 200) {
                    document.getElementById("productList").innerHTML = xhr.responseText;
                } else {
                    xhr.abort();
                    alert("Too many request!");
                }
            }
        }   
        xhr.open("Post", "/Product/ProductList?tagId=" + tagId + "&pageIndex=1", true);                
        }
        xhr.send(null);
    }

The response text is product list info(html).

This is part of my page list code:

               <li onclick="ClickProductList(1,'http://www.ly.com/scenery/BookSceneryTicket_2287.html?spm=1.68076534.156.4&amp;refid=75866398')" class="top">
                        <a href="#">
                            <img src="/WCF_UploadFile/TourProductPhoto/20160125143157LWTIW.jpg">
                            <h6>                                    
                                <span>35</span>
                            </h6>
                            <p></p>
                        </a>
                    </li>

Why would this happen and how to avoid?

Answer 1

If your anchor element that triggers the event has href="#" then it will cause the browser to act like this.

If you remove the href element completely it should work and it won't trigger the url change.

However you may need to alter your CSS since the an anchor without the href loses some styling such as cursor.

a:hover {
 cursor:pointer;
}

See here for some more info