ajax（原生JavaScript）异步提交表单数据

最新推荐文章于 2025-05-16 10:30:00 发布

原创最新推荐文章于 2025-05-16 10:30:00 发布 · 4.2k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#ajax #javascript #服务器 #异步 #数据

JavaScript 专栏收录该内容

14 篇文章

订阅专栏

本文介绍了一种利用Ajax实现表单异步提交的方法。通过JavaScript遍历表单元素，收集input和select等组件的数据，并将其封装为FormData对象。接着通过发送异步请求将数据传递给服务器端进行处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

采用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;
?>

form表单提交方式
 使用ajax异步提交表单的几种方法总结