Php 我可以使用submit按钮激活AJAX功能吗？_Php_Javascript_Html_Ajax_Forms

Php 我可以使用submit按钮激活AJAX功能吗？

php javascript html ajax forms

Php 我可以使用submit按钮激活AJAX功能吗？,php,javascript,html,ajax,forms,Php,Javascript,Html,Ajax,Forms,我有一个HTML表单，目前只是将数据直接发布到PHP文件中。我想更新代码，以便submit按钮将数据发送到JavaScript函数，以便创建AJAX函数。submit按钮是否可以激活JavaScript函数而不是发布到php文件？我唯一想到的是下面这句话，这显然是行不通的： <html> <head> <script type="text/javascript"> function ajax(){ //... } </script> </

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

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

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


函数ajax（）{
//...
}

您可以给“提交”输入一个“单击”处理程序，该处理程序显式阻止执行默认行为

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

edit@Esailija正确地指出，另一个选项是处理

元素上的“提交”事件。函数看起来几乎相同，实际上完全相同，但您可以将其连接如下：

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

这还将捕获诸如“Enter”键操作等内容。

您可以给“submit”输入一个“click”处理程序，该处理程序显式地阻止执行默认行为

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

edit@Esailija正确地指出，另一个选项是处理

元素上的“提交”事件。函数看起来几乎相同，实际上完全相同，但您可以将其连接如下：

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

这还将捕获诸如“Enter”键操作等内容。

I jQuery您可以使用

event.preventDefault（）

否则只需使用

返回false

I jQuery您可以使用event.preventDefault（）
否则只需使用返回false

当然可以。但在输入中调用Javascript函数更有用，如下所示：
 <input type="submit" value="Submit" onclick="ajax();" />



然后删除表单中的动作部分。
当然可以。但在输入中调用Javascript函数更有用，如下所示：
 <input type="submit" value="Submit" onclick="ajax();" />



并删除表单中的动作部分。
Pointy是正确的。。。只需向submit按钮添加一个click处理程序，但是请确保click处理程序的最后一行返回“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（）{
//...
返回false；
}
Pointy是正确的。。。只需向submit按钮添加一个click处理程序，但是请确保click处理程序的最后一行返回“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（）{
//...
返回false；
}
您能解释一下这种情况下的事件是什么吗？此外，这会将表单中的数据发送到javascript函数还是我必须自己检索它？“event”参数是由浏览器创建的一个对象，用于描述触发事件处理程序调用的事件。该代码不会向任何地方发送任何信息；正如您所要求的，这只是一个如何设置函数的示例。在我的示例中，执行ajax调用的代码将位于函数的前两行之后。具体的方式取决于您的表单和服务器等。但表单仍将通过其他方式提交（如按enter），我认为在提交表单时使用“提交”按钮更可靠。@Esailija是的，确实如此；我可以扩展答案。如果我想允许默认提交操作发生，但同时也向服务器发送AJAX请求，我是否可以简单地使用onclick
，而不使用阻止默认操作的javascript行？您能解释一下在这种情况下事件是什么吗？此外，这会将表单中的数据发送到javascript函数还是我必须自己检索它？“event”参数是由浏览器创建的一个对象，用于描述触发事件处理程序调用的事件。该代码不会向任何地方发送任何信息；正如您所要求的，这只是一个如何设置函数的示例。在我的示例中，执行ajax调用的代码将位于函数的前两行之后。具体的方式取决于您的表单和服务器等。但表单仍将通过其他方式提交（如按enter），我认为在提交表单时使用“提交”按钮更可靠。@Esailija是的，确实如此；我可以扩展答案。如果我想允许进行默认提交操作，但同时也向服务器发送AJAX请求，我可以简单地使用onclick
，而不使用阻止默认操作的javascript行吗？调用.preventDefault（）
并将returnValue
设置为false
会取消元素的默认操作。如果要返回false
，则需要在处理函数中onclick=“ajax（）；return false；”“
或onclick=“return ajax（）；”
调用.preventDefault（）
并将returnValue
设置为false
可以取消元素的默认操作。如果要返回false
则需要在处理函数中onclick=“ajax（）；return false；”“
或onclick=“return ajax（）；”