ajax之POST传值，FormData（）

最新推荐文章于 2023-12-16 11:40:35 发布

Cristral

最新推荐文章于 2023-12-16 11:40:35 发布

阅读量2.2k

点赞数 1

分类专栏： ajax JavaScript 文章标签： ajax Js

本文链接：https://blog.csdn.net/xiaozhu123412/article/details/52072864

版权

JavaScript 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

ajax

2 篇文章 0 订阅

订阅专栏

//post.php 接收文件

<?php
    print_r($_POST);
?>

//post.html, JavaScript稍后补全

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>post</title>

    <script type="text/javascript">
    </script>

</head>
<body>
    <h1>ajax注册</h1>
    <div id="regres"></div>
    <form action="" method="post">  
        <p>用户名：<input type="text" name="username" /></p>
        <p>邮件地址：<input type="text" name="email" /></p>
        <p><input type="button" value="注册1" onclick="ajaxreg();"/></p>
        <p><input type="submit" value="注册2"/></p>       
    </form>
</body>
</html>

1、 POST传值

    <script type="text/javascript">
        function createXHR() {
            var xhr = new XMLHttpRequest();
            return xhr;
        }
        //button
        function ajaxreg(){
        //步骤1：收集表单的数据
            //步骤2：打开到后台服务器连接（POST连接）
            //步骤3：发送数据
            //步骤4：监听，回调等

            //1.制造XHR
            var xhr = createXHR();

            //2.打开POST连接
            xhr.open('POST','./post.php',true);

            //4.绑定
            xhr.onreadystatechange = function(){
                if(this.readyState == 4)
                    alert(this.responseText);
            }

            //3.收集表单数据
            var un= document.getElementsByName('username')[0].value;
            var em= document.getElementsByName('email')[0].value;

            //4.send
            xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); //POST 必须有这一句
            xhr.send("username="+un+"&email="+em);

            return false; //阻止页面跳转
        }
    </script>

2、 FormData()

    <script type="text/javascript">

        function createXHR() {
            var xhr = new XMLHttpRequest();
            return xhr;
        }
        //步骤1：收集表单的数据
            //步骤2：打开到后台服务器连接（POST连接）
            //步骤3：发送数据
            //步骤4：监听，回调等
        //submit
        window.onload = function(){

            //收集表单数据
            var fm = document.getElementsByTagName('form')[0];

            fm.onsubmit = function(evt) {

                //创建FormData()对象
                var fd = new FormData(fm);
                //制造xhr
                var xh = createXHR();
                //回调函数
                xh.onreadystatechange = function(){
                    if(this.readyState == 4)
                        alert(this.responseText);
                }
                //打开连接
                xh.open('POST','./post.php',true);

//用Formdata时不能设置setRequestHeader
//xh.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

                //发送数据
                xh.send(fd);
                evt.preventDefault();//阻止页面跳转
            }
        }

    </script>