Question

我正在尝试加载php代码而不刷新页面，但是我的Ajax鳕鱼不能正常工作。有什么部分是错的？
顺便说一句，我不会使用jquery或其他框架。我的javascript代码有问题吗？我为此使用jquery还是可以在没有它的情况下完成它？使用jquery有什么好处？谢谢。

html和javascript：

<html>
<head>
<title>Submit your info</title>
<script type="text/javascript">
 function submited()
 {
 var xmlhttp;
 if (window.XMLHttpRequest)
 {// code for IE7+, Firefox, Chrome, Opera, Safari
     xmlhttp=new XMLHttpRequest();
 }
 else
 {// code for IE6, IE5
     xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
 }
 xmlhttp.onreadystatechange=function()
 {
     if (xmlhttp.readyState==4 && xmlhttp.status==200)
     {
         document.getElementById("stext").innerHTML=xmlhttp.responseText;
     }
 }
 xmlhttp.open("POST","submit.php",true);
 xmlhttp.send();
 }
</script>
</head>
<body>
<form action="submit.php" method="POST" onsubmit="submited()">
<fieldset>
<legend style="color:red">Complete the fields:</legend>
<table>
<tr><td>Name:</td><td><input type="text" name="f_fname"></br></td></tr>
<tr><td>Last Name:</td><td><input type="text" name="f_lname"></br></td></tr>
<tr><td>Mail:</td><td><input type="email" name="f_mail"></br></td></tr>
<tr><td>Your Resume:</td><td><textarea name="f_detail"></textarea></br></td></tr>
<tr><td>Experience:</td><td>less than 1 year:<input type="radio" name="f_year" value="one"/></td></tr>
<tr><td></td><td>1-3 years:<input type="radio" name="f_year" value="onetothree"/></td></tr>
<tr><td></td><td>more than 3 years:<input type="radio" name="f_year" value="three"/></td></tr>
</table>
<input type="submit" value="send">
</fieldset>
</form>
<div id="stext"></div>
</body>
</html>

php：

<?php
require("pdate.php");
$fname=$_POST['f_fname'];
$lname=$_POST['f_lname'];
$mail=$_POST['f_mail'];
$detail=$_POST['f_detail'];
$year=$_POST['f_year'];
$date=pdate("y-m-d h:i:s");
$fp=fopen("database.txt","a");
fwrite($fp,"Name=$fname\n\rLastName=$lname\n\rMail=$mail\n\rDetail=$detail\n\rYear=$year\n\rDate=$date\n\r--------------------\n\r");
echo "Your Data has been submited.";

Answer 1

您需要在return false函数中使用submited()来停止提交表单。使用jquery也简单得多。

此外，您不会将数据发送到您的脚本，您应该使用例如

xmlhttp.send("f_fname="+f_fname+"&f_lname="+f_lname);

而不是

xmlhttp.send();

但请记住将值分配给变量。您可以通过为输入提供ID并在js中分配变量来实现。因此，在您的脚本中编辑了2（您应该自己添加其余部分），它将是这样的：

<html>
<head>
<title>Submit your info</title>
<script type="text/javascript">
 function submited()
 {
 var xmlhttp;
 if (window.XMLHttpRequest)
 {// code for IE7+, Firefox, Chrome, Opera, Safari
     xmlhttp=new XMLHttpRequest();
 }
 else
 {// code for IE6, IE5
     xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
 }
 xmlhttp.onreadystatechange=function()
 {
     if (xmlhttp.readyState==4 && xmlhttp.status==200)
     {
         document.getElementById("stext").innerHTML=xmlhttp.responseText;
     }
 }
 var f_fname = document.getElementById('f_fname').value;
 var f_lname = document.getElementById('f_lname').value;
 xmlhttp.open("POST","submit.php",true);
 xmlhttp.send("f_fname="+f_fname+"&f_lname="+f_lname); 
 return false;
 }
</script>
</head>
<body>
<form action="submit.php" method="POST" onsubmit="submited()">
<fieldset>
<legend style="color:red">Complete the fields:</legend>
<table>
<tr><td>Name:</td><td><input type="text" id="f_fname" name="f_fname"></br></td></tr>
<tr><td>Last Name:</td><td><input type="text" id="f_fname" name="f_lname"></br></td></tr>
<tr><td>Mail:</td><td><input type="email" name="f_mail"></br></td></tr>
<tr><td>Your Resume:</td><td><textarea name="f_detail"></textarea></br></td></tr>
<tr><td>Experience:</td><td>less than 1 year:<input type="radio" name="f_year" value="one"/></td></tr>
<tr><td></td><td>1-3 years:<input type="radio" name="f_year" value="onetothree"/></td></tr>
<tr><td></td><td>more than 3 years:<input type="radio" name="f_year" value="three"/></td></tr>
</table>
<input type="submit" value="send">
</fieldset>
</form>
<div id="stext"></div>
</body>
</html>

Answer 2

试试这个，添加return false;

function submited()
{
  ..
  return false;
}

HTML：

<form action="submit.php" method="POST" onsubmit="return submited()">

ajax表单提交无效

2 个答案: