收集form数据+附件上传+上传图片立即显示+上传大附件,进度条显示
博客专区 > PHer 的博客 > 博客详情
收集form数据+附件上传+上传图片立即显示+上传大附件,进度条显示
PHer 发表于3年前
收集form数据+附件上传+上传图片立即显示+上传大附件,进度条显示
  • 发表于 3年前
  • 阅读 1314
  • 收藏 1
  • 点赞 0
  • 评论 0

腾讯云 十分钟定制你的第一个小程序>>>   

ajax收集表单数据

    分为两种情况:

            一 有form表单情况

  <script type="text/javascript">
                var logFormObject=document.getElementById('logon');

                function acceppt3(){
                        var xhr = creatXMLHttpRequest();
                    
                        var fd = new FormData(logFormObject);
                        xhr.onreadystatechange=function(){
                            if(xhr.readyState==4 && xhr.status==200){
                                var arr=xhr.responseText;
                        
                                console.log(arr);
                            }
                        }
                xhr.open('post','json2.php');
                xhr.send(fd);
            }
          </script>

表单部分:

<form action="form1"  method="post"  id="logon">
  <input name="usr"  type="text"/>
  <input name="pass">
  </form>
json2.php部分:
<?php
    echo $_POST['usr'],"|",$_POST['pass'];


在send方法中发送的应该是整个FormData对象 而不是getElementById获得元素节点对象。

    在url地址页面。中我们使用POST数组,数组下表就是表单中的name属性值.

    创建FormData对象, 如果有表单对象元素结点 通过dom操作获得的

    如  

var xhr = creatXMLHttpRequest();
var fd = new FormData(logFormObject);

那 如果没有form元素的html页面 我们是否发送form数据呢?

            第二 没有form元素

//获得元素结点对象
var xhr = document.getElementById("idname");
var fd = new FormData(logFormObject);
fd.append('usrname','zhengdia');
fd.append('pass',1546875);
这就相当于在我们的fd表单对象中放入了两个name 属性分别等于usrname和pass.

总结:

1.       通过FormData给服务器传递数据

a)         通过form元素节点对象实现

b)        通过formData的方法append()实现数据整合


共有 人打赏支持
粉丝 4
博文 118
码字总数 38443
×
PHer
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: