Question

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

有什么问题？

Answer 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>

Answer 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();
   }
}

AJAX不使用onsubmit

2 个答案: