AJAX 不适用于 onsubmit答案

【问题标题】：AJAX not working with onsubmitAJAX 不适用于 onsubmit
【发布时间】：2014-11-20 21:28:12
【问题描述】：

我有一个测试网页，我在服务器端的文件中保存了一些文本。有一个脚本通过函数 saveFile() 完成所有工作。它在按钮的 onclick 事件上工作正常，但是当我将它设置为表单的 onsubmit 事件时，它会进入脚本但不执行 ajax 保存部分。

index.html

<html>
<head>
    <script>
        function saveFile() {
          var xmlhttp=new XMLHttpRequest();
          var data = new FormData();
          data.append("data" , "teeeexxxxtttt");
          xmlhttp.open("POST","ajax.php",true);
          xmlhttp.send(data);
        }
    </script>
</head>
<body>
    <form onsubmit="saveFile()" method="post">
        <input type="text" name="test"><br>
        <input type="submit" value="Submit">
    </form> 
<button type="button" onclick="saveFile()">Click Me!</button> 
</body>

ajax.php

<?php 
if(!empty($_POST['data'])){
    $data = $_POST['data'];
    $fname = mktime() . ".txt";
    $file = fopen($fname, 'w');
    fwrite($file, $data);
    fclose($file);
}
?>

有什么问题？

【问题讨论】：

我认为您需要停止表单的默认操作
控制台是否有任何错误？
你应该返回一些东西。 return true;
究竟什么是“不工作”？
将表单的默认操作更改为我自己的没有帮助。

标签： javascript php html ajax

【解决方案1】：

试试这个，调用ajax函数需要得到返回值为true否则不会被调用

<html>
<head>
    <script>
        function saveFile() {
          var xmlhttp=new XMLHttpRequest();
          var data = new FormData();
          data.append("data" , "teeeexxxxtttt");
          xmlhttp.open("POST","ajax.php",true);
          xmlhttp.send(data);
          return false;
        }
    </script>
</head>
<body>
    <form onsubmit="return saveFile()" method="post">
        <input type="text" name="test"><br>
        <input type="submit" value="Submit">
    </form> 
<button type="button" onclick="return saveFile()">Click Me!</button> 
</body>

【讨论】：

你需要返回false，而不是true。我修复了您的代码，使其返回正确的布尔值。
@user1816806 将 true 更改为 false 并确保将 return 语句添加到 onsubmit 属性。
它工作了，但是保存文件后我想导航到某个页面，可以通过 return false 语句来实现吗？
只需在 ajax.php 页面中导航
@epascarello 我测试了 OP 的代码，即使没有任何回报，它对我来说效果很好。

【解决方案2】：

为了防止在 AJAX 请求完成之前真正提交表单，onsubmit 事件处理程序必须返回 false。一种方法：

<form id="form1" onsubmit="saveFile(); return false;">

在 AJAX 请求完成后真正提交表单：

xmlhttp.onreadystatechange=function()
{
   if (xmlhttp.readyState==4 && xmlhttp.status==200)
   {
     document.getElementById("form1").submit();
   }
}

【讨论】：