Question

我有一个HTML表单，目前只是将数据直接发布到PHP文件。我想更新代码，以便提交按钮将数据发送到JavaScript函数，以便我可以创建一个AJAX函数。提交按钮是否可以激活JavaScript函数而不是发布到php文件？我唯一想到的就是下面，这显然不起作用：

<html>
<head>
<script type="text/javascript">
function ajax(){
  //...
}
</script>
</head>

<body>
<form action="ajax();">
  <!-- ... -->
  <input type="submit" value="Submit" />
</form>
</body>
</html>

Answer 1

您可以为“提交”输入提供一个“单击”处理程序，该处理程序明确阻止执行默认行为。

<input type='submit' value='Submit' onclick='ajax(event)'>

然后在函数中：

function ajax(event) {
  if ('preventDefault' in event) event.preventDefault();
  event.returnValue = false; // for IE before IE9
  // ...
}

编辑 @Esailija正确地指出另一个选项是处理<form>元素上的“提交”事件。这个函数看起来几乎一样，实际上完全相同，但你可以像这样连接它：

<form id='yourForm' onsubmit='ajax(event)'>

这也将陷入诸如“回车”键操作之类的事情。

Answer 2

当然可以。但是在输入中调用Javascript函数更有用：

 <input type="submit" value="Submit" onclick="ajax();" />

删除表单中的操作部分。

Answer 3

我jQuery你可以使用event.preventDefault();，否则只能使用return false;

http://jsfiddle.net/mKQmR/

http://jsfiddle.net/mKQmR/1/

Answer 4

Pointy是正确的...只需在提交按钮中添加一个点击处理程序，但请确保点击处理程序的最后一行返回“false”以防止表单实际发布到表单的操作。

<html>
<head>
<script type="text/javascript">
function ajax(){
  //...
return false;
}
</script>
</head>

<body>
<form action="thispage.htm">
  <!-- ... -->
  <input type="submit" value="Submit" onclick="ajax();" />
</form>
</body>
</html>

我可以使用提交按钮激活AJAX功能吗？

4 个答案: