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

问题描述：

我有一个HTML表单，当前只是将数据直接发布到PHP文件。我想更新代码，以便提交按钮将数据发送到JavaScript函数，以便我可以创建AJAX函数。提交按钮是否可以激活JavaScript函数而不是发布到php文件？我想出的唯一事情是低于，这很显然是行不通的：我可以使用提交按钮来激活AJAX功能吗？

<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 
    // ... 
}

编辑 @Esailija指出正确的是另一种选择是处理<form>元素“提交”事件来代替。该功能看起来几乎是一样的，其实完全一样，但你会连线起来是这样的：

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

这也会陷阱的东西，如“Enter”键动作等

你能解释一下这种情况下的事件吗？另外，这会将表单中的数据发送到javascript函数还是我必须自己检索它？ – ewok 2012-01-11 14:23:02

“event”参数是由浏览器创建的一个对象，用于描述触发对事件处理程序的调用的事件。该代码不会随处发送任何内容;就像你问的那样，这只是你如何设置功能的一个例子。执行ajax调用的代码将在我的示例中的函数的前两行之后。具体怎么做取决于你的表单和你的服务器等。 – Pointy 2012-01-11 14:24:46

但是表单仍然会通过其他方式提交（比如按下回车键），我认为在提交和离开的表单中这样做更加强大单独提交按钮。 – Esailija 2012-01-11 14:25:33

答

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

http://jsfiddle.net/mKQmR/

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

答

当然可以。但它更有用打电话给你的JavaScript函数在这样的输入：

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

并删除形式的行动的一部分。

答

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>

调用'。preventDefault（）'并将'returnValue'设置为'false'具有取消元素默认操作的效果。 – Pointy 2012-01-11 14:25:31

如果你要'返回false'，它需要处理函数。 'onclick =“ajax（）; return false;”'或'onclick =“return ajax（）;”' – Esailija 2012-01-11 14:32:32

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

相关推荐