ajax 异步调教表单

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>



text.php下

<?php
header("Content-Type:application/json");
$result = $_POST;
var_dump($result);
echo "提交成功";
?>
 
posted @ 2018-04-13 15:44  阿豪阿豪  阅读(179)  评论(0)    收藏  举报