js利用formdata实现ajax传递表单

来源：互联网发布：淘宝合作快递编辑：程序博客网时间：2024/06/07 01:07

表单页面

<!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); } }

0 0