javascript - jquery按钮点击事件后，php脚本的响应消失

Question

这里我向 PHP 脚本发布了一个变量。我正在写给一些 div 的 php 脚本的响应。但点击按钮后，响应立即消失:

当我执行 alert(arabic); 时，它会显示，但当我关闭提示时，它就会消失。

为什么 php 脚本响应后会重新加载页面？

    $( "#submit" ).click(function() {    
            var cat = $("#cats option:selected").html();    
//          alert(test);    
            var arabic = document.getElementById("arabic").value;    
            //alert (arabic)    
            dataInsert(arabic);    
            });    
        function dataInsert(arabic)    
        {                   
            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");    
                                div2.innerHTML = xmlhttp.responseText;    
                }    
            }         
            xmlhttp.open("POST","koove_insertpost_db.php");                 
            xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");    
            xmlhttp.send('arabic=' + arabic ) ;             
            //alert(arabic);    
        }           

Answer 1

看起来您的按钮正在尝试提交某些内容，从而与您的回调函数重叠。您可能想使用parameter event来阻止它的传播。

检查此代码:

$( "#submit" ).click(function(event) {

    event.stopPropagation();

    var cat = $("#cats option:selected").html();    
    //alert("test");    
    var arabic = document.getElementById("arabic").value;    
    //alert (arabic)    
    dataInsert(arabic);

    return false;

    });    
}

你should also在回调函数末尾return false，以便在您发出指令后完全停止处理事件。这是不间断执行 dataInsert() 函数的关键。