ajax 异步提交表单

最新推荐文章于 2024-07-13 23:25:03 发布

学徒王小明

最新推荐文章于 2024-07-13 23:25:03 发布

阅读量243

点赞数

分类专栏： jquery 文章标签： ajax 异步 PHP 表单

本文链接：https://blog.csdn.net/github_37512301/article/details/79632457

版权

jquery 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

ajax 异步提交表单非常简单，只需两步
1. 获取表单数据。
2. 发送 ajax 请求。

获取表单数据，需要用到 jquery 中的 serialize() 方法，提取表单数据。serialize 参考

这里给出示例代码
index.html

<html>
<head>
<meta charset="utf8">
<script src="http://apps.bdimg.com/libs/jquery/1.11.1/jquery.js"></script>
</head>
<body>
<form id="form" data-action="test.php">
姓名：<input name="name"><br>
年龄：<input name="age"><br>
<input type="button" id="btn" value="提交">
</form>
<script type="text/javascript">
$(document).ready(function(){
    $("#btn").click(function(){
        var data = $("#form").serialize();
        var url = $("#form").data("action")
        console.log(data)
        $.ajax({
            url: url,
            method:"POST",
            data:data,
            success:function(data){
                console.log(data)
            }
        })
    })
})
</script>
</body>
</html>

test.php

<?php
header("Content-Type:application/json");
$result = $_POST;
var_dump($result);
echo "提交成功";
?>

提交表单后，在浏览器的 network 中可以看到服务器返会的响应。

学徒王小明

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
ajax 异步提交表单

ajax 异步提交表单非常简单，只需两步 1. 获取表单数据。 2. 发送 ajax 请求。获取表单数据，需要用到 jquery 中的 serialize() 方法，提取表单数据。serialize 参考这里给出示例代码 index.html&lt;html&gt;&lt;head&gt;&lt;meta charset="utf8"&gt;&lt;script src="...
复制链接

扫一扫