js利用formdata实现ajax传递表单

最新推荐文章于 2024-08-15 21:17:34 发布

Vashon_Wood

最新推荐文章于 2024-08-15 21:17:34 发布

阅读量2.2k

点赞数

分类专栏： web前端文章标签： javascript 表单

本文链接：https://blog.csdn.net/wwx920395962/article/details/50924303

版权

web前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

表单页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--U函数生成提交地址-->
<form method="post" action="{:U('Server/index')}">
    <label>user</label> <input  name="user" type="text">
    <label>user</label><input  name="pwd" type="text">
    <input id="submit" onclick="press(event)" type="submit" value="submit">
</form>
<p></p>
<p></p>
<p></p>
</body>
<script>
    var httprequest;


    function press(e) {
        e.preventDefault();
        var form = document.getElementsByTagName('form')[0];
//    新建formData对象
        var formData = new FormData();
//    获取输入值
        var tableElements = document.getElementsByTagName('input');
        //    添加数据
        for (var i = 0; i < (tableElements.length-1); i++) {
            formData.append(tableElements[i].name, tableElements[i].value);
        }
        httprequest = new XMLHttpRequest();
        httprequest.onreadystatechange = handleresponse;
        httprequest.open("POST", form.action);
        httprequest.send(formData);
    }
    function handleresponse() {
//        4和200表示已完成通信
        if (httprequest.readyState == 4 && httprequest.status == 200) {
            //json转对象
            var data = JSON.parse(httprequest.responseText);
            document.getElementsByTagName('p')[0].innerText = data.js;
            document.getElementsByTagName('p')[1].innerText = data.user;
            document.getElementsByTagName('p')[2].innerText = data.pwd;
        }
    }
</script>
</html>

服务器页面
<?php namespace Home\Controller; use Think\Controller; class ServerController extends Controller { public function index(){ if(!(I('post.user')&&I('post.pwd'))){ $data['js']="未获取到数据"; }else{ $data['js']="获取到数据"; } $data['user']=I('post.user')."_public"; $data['pwd']=I('post.pwd')."_private"; $this->ajaxReturn($data); } }