Javascript 在使用onclick选项时，Ajax不能使用HTML表单中的submit按钮_Javascript_Html_Ajax

Javascript 在使用onclick选项时，Ajax不能使用HTML表单中的submit按钮

javascript html ajax

Javascript 在使用onclick选项时，Ajax不能使用HTML表单中的submit按钮,javascript,html,ajax,Javascript,Html,Ajax,下面的代码在我只使用输入文本字段时有效，但在我使用提交按钮时无效。我不知道jquery，所以请解释一下 <!DOCTYPE html> <html> <head> <script> function showHint(str) { if (str.length == 0) { document.getElementById("txtHint").innerHTML = ""; return; } else { var x

下面的代码在我只使用输入文本字段时有效，但在我使用提交按钮时无效。我不知道jquery，所以请解释一下

<!DOCTYPE html>
<html>
<head>
<script>
function showHint(str) {
 if (str.length == 0) { 
    document.getElementById("txtHint").innerHTML = "";
    return;
} else {
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            document.getElementById("txtHint").innerHTML = xmlhttp.responseText;
        }
    }
    xmlhttp.open("POST", "download.php?q="+str, true);
    xmlhttp.send();
    }
    }
  </script>
 </head>
 <body>

 <p><b>Start typing a name in the input field below:</b></p>
 <form method="POST" action="showHint(str)"> 
 First name: <input type="text" placeholder="Copy Your Facebook Video URL Over Here" name = "URL" onclick="showHint(URL.value)" >
 <button type="submit" onclick="showHint(URL.value)">Download</button>
 </form>
 <p>Suggestions: <span id="txtHint"></span></p>
 </body>
 </html>


函数showHint（str）{
如果（str.length==0）{
document.getElementById（“txtHint”）.innerHTML=“”；
返回；
}否则{
var xmlhttp=new XMLHttpRequest（）；
xmlhttp.onreadystatechange=函数（）{
if（xmlhttp.readyState==4&&xmlhttp.status==200）{
document.getElementById（“txtHint”）.innerHTML=xmlhttp.responseText；
}
}
open（“POST”，“download.php？q=“+str，true”）；
xmlhttp.send（）；
}
}
开始在下面的输入字段中键入名称：
名字：
下载
建议：

但是，当我使用submit按钮时，它不起作用，请帮助

同样的事情发生在我身上，而不是使用下面描述的按钮use input type=按钮-

<input type="button" id="submit" value="submit" name="submit" onclick="showHint(URL.value)"></input>

它肯定会工作

，因此看起来您正在尝试使用由用户操作（单击按钮）启动的XHR请求，但表单的默认操作会给您带来问题

当您在按钮提交表单时单击该按钮，并且您已在

action=“showHint（str）”

中定义了此操作时，表单试图将您带到名为showHint（str）的页面

如果添加

event.preventDefault（）到你的函数（我会把它放在函数的第一行，即在你的if语句之前），然后这个函数，按照你的规定在点击按钮时运行，将不会提交默认的表单操作，你的问题将得到解决。你甚至可以完全删除表单标签上的action属性。
@Atula但我没有使用jQuery如果这是答案，那么为什么会被否决？我不知道你告诉我，我怎么知道@Sebastianthat是我的否决票，因为你没有使用submit按钮，而是将其替换为普通按钮，这是一个解决办法，而不是一个解决方案solution@Cybersupernova如果一个变通方案导致了一个解决方案，那么我想这就是一个解决方案