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

can I use the submit button to activate an AJAX function?

本文关键字：激活 AJAX 功能 按钮 可以使 提交 我可以      更新时间：2023-09-26

我有一个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>

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

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

然后在功能中：

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

edit@Esailija正确地指出，另一个选项是处理<form>元素上的"提交"事件。这个函数看起来几乎一样，事实上完全一样，但你会把它连接成这样：

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

这也会捕获诸如"Enter"键操作等内容。

当然可以。但在输入中调用Javascript函数更有用，如下所示：

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

并删除表单中的动作部分。

IjQuery您可以使用event.preventDefault();，否则只使用return false;

http://jsfiddle.net/mKQmR/

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

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>
相关文章：