Ajax表单提交不起作用

Question

I am trying to load the php code without refreshing the page but some how my Ajax cod is not working.what part is wrong ? 我试图在不刷新页面的情况下加载php代码，但是我的Ajax cod无法正常工作。什么地方错了？
I wouldn't use jquery or other frameworks by the way. 顺便说一下，我不会使用jquery或其他框架。 Is the problem with my javascript code ? 我的JavaScript代码有问题吗？ Shoud I use jquery for this or it can be done without it ? 我应该为此使用jquery还是没有它可以完成？ What is the advantages of using jquery ? 使用jquery有什么好处？ thank you. 谢谢。

html and javascript : 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：

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

You need to use return false in the submited() function to stop submitting the form. 您需要在submited()函数中使用return false来停止提交表单。 Also using jquery is much more simple. 另外，使用jQuery更简单。

Also you do not send the data to your script, which you should do by using eg 另外，您也不会将数据发送到脚本中，而应该使用例如

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

instead of 代替

xmlhttp.send();

But remember to assign the values to variables. 但是请记住将值分配给变量。 You can do it by giving the inputs the ID and assign the variable in js. 您可以通过为输入提供ID并在js中分配变量来实现。 So with that 2 edited (you should add the rest by yourself) in your script it would be like this: 因此，在脚本中编辑了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

Try this, Add return false; 试试这个，添加return false;

function submited()
{
  ..
  return false;
}

HTML: HTML：

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

Ajax表单提交不起作用

问题描述

2 个解决方案

解决方案1
1 已采纳 2014-03-08 21:06:59

解决方案2
0 2014-03-08 21:09:06

Ajax表单提交不起作用

问题描述

2 个解决方案

解决方案1 1 已采纳 2014-03-08 21:06:59

解决方案2 0 2014-03-08 21:09:06

解决方案1
1 已采纳 2014-03-08 21:06:59

解决方案2
0 2014-03-08 21:09:06