单击按钮后的jQuery / JS stoppropagation

时间:2014-07-03 17:32:05

标签: javascript php jquery

我将数据从用户发布到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);
    }               

2 个答案:

答案 0 :(得分:1)

使用此

 event.preventDefault()

而不是

 event.stopPropagation()

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

stopPropagation 会阻止事件冒泡事件链。

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

答案 1 :(得分:0)

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