Javascript AJAX不能与onsubmit一起使用_Javascript_Php_Html_Ajax

Javascript AJAX不能与onsubmit一起使用

javascript php html ajax

Javascript AJAX不能与onsubmit一起使用,javascript,php,html,ajax,Javascript,Php,Html,Ajax,我有一个测试网页，我正在服务器端的文件中保存一些文本。有一个脚本通过函数saveFile（）完成所有工作。它在按钮的onclick事件上工作正常，但是当我将其设置为表单的onsubmit事件时，它进入脚本内部，但不执行ajax保存部分 index.html <html> <head> <script> function saveFile() { var xmlhttp=new XMLHttpRequest();

我有一个测试网页，我正在服务器端的文件中保存一些文本。有一个脚本通过函数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>


函数saveFile（）{
var xmlhttp=new XMLHttpRequest（）；
var data=new FormData（）；
数据。附加（“数据”，“teeexxtttt”）；
open（“POST”，“ajax.php”，true）；
发送（数据）；
}


点击我！

ajax.php

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

有什么问题吗？

试试这个，调用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>


函数saveFile（）{
var xmlhttp=new XMLHttpRequest（）；
var data=new FormData（）；
数据。附加（“数据”，“teeexxtttt”）；
open（“POST”，“ajax.php”，true）；
发送（数据）；
返回false；
}


点击我！

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

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

我认为您需要停止窗体的默认操作。控制台中是否有错误？您应该返回一些内容<代码>返回true什么是“不工作”？将表单的默认操作更改为我自己的操作没有帮助。您需要返回false，而不是true。我修复了您的代码，使其返回正确的布尔值。@user1816806将true更改为

false

，并确保将

return

语句添加到

onsubmit

属性中。它起作用了，但是在保存文件后，我想导航到某个页面，它可以用returnfalse语句实现吗？只需在ajax.php中导航即可page@epascarello我甚至在没有任何返回的情况下测试了OP的代码，它对我来说运行良好。

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