javascript - 单击按钮后 jQuery/JS 停止传播

Question

我正在将用户的数据发布到 php 脚本并显示响应结果。

我的问题是，单击按钮后，它会重新加载页面并清空所有文本框，而不显示服务器脚本的回复。

我尝试使用 event.stopPropagation(); 和 return false 但仍然没有帮助。

HTML:

 <div class="show" id="show"></div>

JS:

    $( "#submit" ).click(function(event) {
            event.stopPropagation();
            //var cat = $("#cats option:selected").html();
            var post = document.getElementById("post").value;
            var tag = document.getElementById("tags").value;
            dataInsert(post,tag);
            return false;
    });

    function dataInsert(post,tag)
    {               
        var xmlhttp;
        alert("hi");
        show.innerHTML = '';
        if (window.XMLHttpRequest)
        {
            // code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp=new XMLHttpRequest();
        }
        else
        {
            // code for IE6, IE5
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }           
        xmlhttp.onreadystatechange=function()
        {
            //document.getElementById("old-records").innerHTML = "";                
            if (xmlhttp.readyState == 4 && xmlhttp.status==200)
            {
                var div2 = document.getElementById("show");
                alert(xmlhttp.responseText);
                div2.innerHTML = xmlhttp.responseText;
            }
        }       
        xmlhttp.open("POST","koove_getTag_db.php",true);                
        xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        xmlhttp.send('post=' + post + '&tag=' + tag ) ;         
        alert(post+cat+tag);
    }               

Answer 1

使用这个

 event.preventDefault()

而不是这个

 event.stopPropagation()

这两种方法之间的区别:阅读此处 - What's the difference between event.stopPropagation and event.preventDefault?

“stopPropagation 阻止事件在事件链中向上冒泡。

preventDefault 阻止浏览器对该事件执行的默认操作。”