ajax(原生JavaScript)非同步提交表單資料
阿新 • • 發佈:2018-12-30
採用ajax非同步方式,通過js獲取form中所有input、select等元件的值,將這些值組成Json格式,通過非同步的方式與伺服器端進行互動,
一般將表單資料傳送給伺服器端,伺服器端處理資料並返回結果資訊等
<html>
<head>
</head>
<body>
<form id="register_form">
<input class='formVal' type="text" name="first_name" placeholder="FirstName">
<input class ='formVal' type="text" name="last_name" placeholder="LastName">
<input type="submit" value="submit_now" onclick="myFunction(); return false;">
</form>
<script>
function myFunction()
{
var elements = document.getElementsByClassName("formVal");
var formData =new FormData();
for (var i=0; i<elements.length; i++)
{
formData.append(elements[i].name,elements[i].value);
}
var xmlHttp = new XMLHttpRequest();
xmlHttp.onreadystatechange = function()
{
if(xmlHttp.readyState == 4 && xmlHttp.status == 200)
{
alert(xmlHttp.responseText);
}
}
xmlHttp.open("post" , "server.php");
xmlHttp.send(formData);
}
</script>
</body>
</html>
php
<?php
$firstName = $_POST["first_name"];
$lastName = $_POST["last_name"];
echo $firstName." ".$lastName;
?>