Question

关于此问题有数千个主题，但我还没有找到任何有相同问题的人。我试过很多例子，但我不知道自己错了什么。我创建了这个示例，它从db调用数据并填充此html页面中的两个选项之一。我有两个功能，一个是在我给页面充电时正确执行的，但是当我点击按钮时我应该要执行第二个功能。好吧，如果我使用body标签在加载时对两个函数充电，它可以正常工作，而如果我在第一次加载时充电，我尝试通过onclick事件调用第二个，它不起作用。有人可以帮助我吗？感谢

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document</title>
</head>
<script type="text/javascript">

function getServ() {
var url = "all_wom.php";
var sel = document.getElementById('service1');
var obj;
var xmlhttp = new XMLHttpRequest();
//  ajax
xmlhttp.onreadystatechange = function() {
 if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
  obj = JSON.parse(xmlhttp.responseText);
  for ( i = 0; i < obj.length; i++) {

   var opt = document.createElement('option');
   opt.innerHTML = obj[i].Descrizione; 
   opt.value = obj[i].ID;
   sel.appendChild(opt);
  }
 }

}
xmlhttp.open("GET", url, true);
xmlhttp.send();
}

function getCol() {
var url = "all_col.php";
var sel = document.getElementById('service2');

var obj;
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
 if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        obj = JSON.parse(xmlhttp.responseText);

  for ( i = 0; i < obj.length; i++) {

   var opt = document.createElement('option');
   opt.innerHTML = obj[i].Nome; 
   opt.value = obj[i].ID;
   sel.appendChild(opt);
  }
 }

 }
xmlhttp.open("GET", url, true);
xmlhttp.send();
}

</script>
<body onload=getCol();>
 <form name="form" >

 <br />
 <br />
 <label>First Select</label><select id="service1"  ></select>
 <br />
 <br />
 <br />
 <br />
 <label>Servizi </label><select id="service2" ></select>
 <br />
 <br />

 <input type="submit" align="center" onClick=getServ(); value="service1" />
 <input type="submit" align="center" value="service2" />
 <br />
 <br />
 </form>
 </body>
 </html>

Answer 1

点击事件附加到提交按钮。

点击按钮时：

触发Ajax请求
提交表格
离开页面
销毁运行Ajax请求的JavaScript环境（因此现在无法运行Ajax响应处理程序）
加载新页面

如果您希望Ajax工作，则需要阻止提交按钮的默认行为。

以您的方式使用传统的内部事件属性，您可以从onclick属性return false;。您应切换到modern event binding techniques至。

执行javascript onclick按钮

1 个答案: