ajax, 提交 form 表单，从后台返回值到前端 PHP

最新推荐文章于 2024-09-06 22:20:29 发布

小小优化师 anny

最新推荐文章于 2024-09-06 22:20:29 发布

阅读量122

点赞数 1

分类专栏： PHP JS 文章标签：前端 ajax php

本文链接：https://blog.csdn.net/q28000/article/details/139547505

版权

PHP 同时被 2 个专栏收录

13 篇文章 0 订阅

订阅专栏

9 篇文章 0 订阅

订阅专栏

代码实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ajax Form Submit</title>
</head>
<body>

<form id="lyform">
    <input type="text" name="username" placeholder="用户名">
    <input type="password" name="password" placeholder="密码">
    <button type="submit">登录</button>
</form>

<div id="result"></div>

<script>
document.getElementById('lyform').addEventListener('submit', function(event) {
    event.preventDefault(); // 阻止表单默认提交

    var formData = new FormData(this); // 获取表单数据

    var xhr = new XMLHttpRequest(); // 创建XMLHttpRequest对象
    xhr.open('POST', '/path/to/your/php/script.php', true); // 准备发送POST请求到指定的PHP脚本
    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4 && xhr.status === 200) { // 当请求完成且状态为200时
            document.getElementById('result').innerHTML = xhr.responseText; // 显示返回的结果
        }
    };
    xhr.send(formData); // 发送表单数据
});
</script>

</body>
</html>

PHP 文件 /path/to/your/php/script.php 执行结果返回给，容器<div id="result"></div>