来自php脚本的响应在jquery按钮单击事件后消失

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

当我做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

看起来您的按钮正在尝试提交某些内容，从而重叠您的回调函数。 您可能希望使用参数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; }); } 

您还应该在回调函数结束时return false ，以便在您的指示后完全停止处理事件。 这是在不中断的情况下执行dataInsert（）函数的关键。

Answer 2

你在使用jQuery吗？ 使用$（“＃submit”）.click（function（）{}）看起来像它; 为什么不让生活变得轻松而且只是使用

 $( "#submit" ).click(function() { var arabic = $("#arabic").value(); $.post("koove_insertpost_db.php",{"arabic" : arabic}, function( data ) { $('#show').html(data); }); }); 

http://api.jquery.com/jquery.post/

您还可以检查成功状态等，以便从服务器进行数据validation。

我不能发表评论所以我相信@feijones有答案！ （特别是返回false;）

ps Alert有效，因为它会暂停JavaScript的执行，直到您关闭对话框，然后提交表单并重新加载页面。