Ajax表單提交不起作用
[英]ajax form submiting is not working
問題描述
我試圖在不刷新頁面的情況下加載php代碼，但是我的Ajax cod無法正常工作。什么地方錯了？
順便說一下，我不會使用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.";
2 個解決方案
解決方案1
1 已采納 2014-03-08 21:06:59
您需要在submited()函數中使用return false來停止提交表單。 另外，使用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>
解決方案2
0 2014-03-08 21:09:06
試試這個，添加return false;
function submited()
{
..
return false;
}
HTML：
<form action="submit.php" method="POST" onsubmit="return submited()">
在向Ajax提交表單中沒有屬性
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.