课件_47.第九章：Ajax技术[2]-初探浏览器原生Ajax接口(2)_2

发布时间：2020-12-16 01:47:37 所属栏目：百科来源：网络整理

导读：ajax02.html 客户端 !DOCTYPE html!--客户端--!--课时47初探浏览器原生Ajax接口(2)_2--!--使用post方式传数据给服务器，并返回数据--html id="html"head meta charset="utf-8" / titledemo/title script type="text/javascript" src="jquery-2.1.4.min.js"/s

ajax02.html

客户端

<!DOCTYPE html>
<!--客户端-->
<!--课时47初探浏览器原生Ajax接口(2)_2-->
<!--使用post方式传数据给服务器，并返回数据-->
<html id="html">
<head>
    <meta charset="utf-8" />
    <title>demo</title>
    <script type="text/javascript" src="jquery-2.1.4.min.js"></script>
    <script type="text/javascript">
        function encodeU(data) {
            var str='';
            for (var i in data) {
//                对参数进行url编码
                str+=encodeURIComponent(i)+'='+encodeURIComponent(data[i])+'&';
            }
            console.log(str.substr(0,str.length-1));
            return str.substr(0,str.length-1);
        }
        $(function(){
            $('button').click(function(){
                //创建XHR对象,后面的Ajax操作都是基于这个对象的！
                var xhr=new XMLHttpRequest();
                xhr.addEventListener('readystatechange',function(){
                    if (xhr.readyState==4) {
                        //请求完成，将服务器返回的数据，输出来！
                        console.log(xhr.responseText);
                        $('body').append(xhr.responseText);
                    }
                });
//                调用encodeU的方法，传入一个对象
                var data=encodeU({
                    id:10,a:1,b:2,c:3
                });
                xhr.open('post','ajax02.php');
//              这个头信息一定要设置，不设置拿不到，是固定的，服务器返回的数据（表单提交已经默认设置过了）
                xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
//              post请求吧拼接好的字符串id=10&a=1&b=2&c=3放到 xhr.send(data);
                xhr.send(data);
            });

        });
    </script>
</head>
<body>
<button>开始</button>
</body>
</html>

ajax02.php

服务器端

<?php
//可以执行各种PHP代码，各种判断，以及从数据库中获取到数据,返回给客户端
////sleep(5);
//if($_GET['id']==10){
//    print_r($_GET);
//}else{
//    echo'没有数据';
//}
print_r($_POST);
echo'访问到数据';
?>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!