码迷,mamicode.com
首页 > Web开发 > 详细

前端小白之每天学习记录----php(4)ajax

时间:2017-08-09 21:20:14      阅读:146      评论:0      收藏:0      [点我收藏+]

标签:点击   文件   sql   set   字符   异步   安装   idt   utf-8   

ajax技术( 异步请求 )
局部无刷新技术: ajax技术不需要刷新页面就能得到服务器的结果,
所以增强了体验。

请求: 发送一次网络连接
目的: 是为了获取服务器的数据

步骤:

第一步:要使用ajax技术, 必须要获取浏览器的ajax对象
    通过浏览器内置的XMLHttpRequest 就可以得到ajax对象
第二步: 打开请求
             open( 打开请求的方式, 请求的地址, true )
第三步: 发送请求
             send使用发送数据的,GET方式一般发送null, 因为get方式的数据是通过url地址传递的
eg:用ajax输出一个hello world
    1.在WWW目录下新建data.txt文件并在里面添加内容hello world。
  2.在相同目录下新建ajax.php如下代码:
  3.启动phpStudy
  4.打开浏览器输入localhpst/ajax.html
  5.点击按钮查看效果
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        window.onload = function(){
            var oBtn = document.querySelector("input");
            oBtn.onclick = function(){
                //第一步:要使用ajax技术, 必须要判断,获取浏览器的xjax对象
                //通过浏览器内置的XMLHttpRequest 就可以得到ajax对象
                var xhr = new XMLHttpRequest();

                //onreadystatechange: 监听服务器数据变化
                xhr.onreadystatechange = function(){
                    //通过xhr对象的属性 readyState的值 就可以判断出来数据接收成功
                    /*
                        1:相当于  xhr.open
                        2: 相当于  xhr.send
                        3: 接收到服务器的部分数据
                        4: 接受到服务端的完整数据
                    */
                    // alert( xhr.readyState );
                    if( xhr.readyState == 4 ){
                        // alert( xhr.responseText );
                        document.querySelector("div").innerHTML = xhr.responseText;
                    }
                }

                //第二步: 打开请求
                //open( 打开请求的方式, 请求的地址, true )
                xhr.open( ‘GET‘, ‘data.txt‘, true );

                //第三步: 发送请求
                //send使用发送数据的,GET方式一般发送null, 因为get方式的数据是通过url地址传递的
                xhr.send( null );
            }
        }
    </script>
</head>
<body>
   <input type="button" value="读取数据"> 
   <div></div>
</body>
</html>
eg:用ajax+php输出一个当前时间
  1.在WWW目录下新建一个php文件server.php
server.php
<?php
    // echo date("Y-m-d H:i:s");
    // if( isset( $_GET[‘name‘]) ){  //isset 判断请求是否存在
    //     echo $_GET[‘name‘] . ‘--->‘ . $_GET[‘age‘] . ‘--->‘ . date("Y-m-d H:i:s");
    // }else if( isset( $_POST[‘name‘] ) ){
    //     echo $_POST[‘name‘] . ‘--->‘ . $_POST[‘age‘] . ‘--->‘ . date("Y-m-d H:i:s");
    //     // echo ‘post request: ‘ . date(‘Y-m-d H:i:s‘);
    // }
    echo $_REQUEST[‘name‘] . ‘--->‘ . $_REQUEST[‘age‘] . ‘--->‘ . date("Y-m-d H:i:s");
?>

  2.在WWW目录下新建一个php文件time.php<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        window.onload = function(){
            var oBtn = document.querySelector("input");
            var oDiv = document.querySelector("div");
            oBtn.onclick = function(){
                var xhr = new XMLHttpRequest();
                var url = ‘server.php?name=lxb&age=22&t=‘ + Math.random();//GET方法
                // var url = ‘server.php‘;//post方法

                xhr.onreadystatechange = function(){
                    if( xhr.readyState == 4 ){
                        oDiv.innerHTML += xhr.responseText + ‘<br/>‘;
} } //GET方法 xhr.open( ‘GET‘, url, true ); xhr.send( null ); /* //POST方法 xhr.open( ‘POST‘, url, true ); //如果是用post发送的数据, 需要加一个请求头 xhr.setRequestHeader(‘content-type‘, ‘application/x-www-form-urlencoded‘); //post的数据 放在send函数里面发过去 xhr.send( "name=lxb&age=22" );*/ } } </script> </head> <body> <input type="button" value="获取时间"> <div></div> </body> </html>

  3.打开浏览器输入localhpst/time.html  

  4.点击按钮查看效果

jQuery的ajax

$.get     $.post    $.ajax   三种函数形式 

$.get( "1", { 2 }, 3);

1, 请求的url  2,发送的数据(json格式) 3,成功之后的回调函数(参数为接收到的结果-->res)

eg:$.get( "sever.php", { ‘province_id‘, }, function( res ){  });
经典的ajxa----》三级联动
1.省市区表格
2.三种复制表数据方法
  一.在安装PHPstudy目录下的mySQL目录下的data记录了数据库的数据信息
  二.用数据库管理软件导入sql文件
  三.用数据库管理软件复制表
3.数据库返回的数据一般是字符串或者xml形式
所以在php得到数组结果后要用 json_encode  把数组转成类似格式的字符串
<?php
    echo json_encode( $arr);
?>
3.有时候ajax得到的数据是字符串,要转成json形式才能用
<script>
        /*
            JSON对象
                parse: 字符串->json对象
                stringify: json对象->字符串
        */
        // var obj = {
        //     "a" : 10,
        //     "b" : 20
        // };
        // alert( typeof obj );
        // var res = JSON.stringify( obj );
        // alert( res );
        // alert( typeof res );


        var str = ‘{"a" : 10, "b" : 20}‘;
        // alert( typeof obj );
        var obj = JSON.parse( str );
        alert( obj.a + ‘,‘ + obj.b );
</script>

  

前端小白之每天学习记录----php(4)ajax

标签:点击   文件   sql   set   字符   异步   安装   idt   utf-8   

原文地址:http://www.cnblogs.com/szlxb/p/7327476.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!