jQuery/JS点击按钮后停止传播 - jQuery/JS stop propogation after button click

jQuery/JS stop propogation after button click

本文关键字：传播按钮 JS jQuery | 更新日期: 2023-09-27

我从用户发布数据到php脚本并显示响应结果。

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

我尝试了event.stopPropagation();和resturn 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);
    }

使用

 event.preventDefault()

而不是

 event.stopPropagation()

这两种方法的区别:阅读这里-事件之间的区别是什么?stopPropagation和event.preventDefault?

"stopPropagation阻止事件冒泡向上的事件链。

preventDefault阻止浏览器对该事件做出默认动作。"

$( "#submit" ).click(function(event) {
    event.preventDefault();
    //...
});