ajax

最新推荐文章于 2024-09-13 08:33:26 发布

chuandie2003

最新推荐文章于 2024-09-13 08:33:26 发布

阅读量85

点赞数

文章标签： javascript json ViewUI

原文链接：https://my.oschina.net/qjxiongba/blog/887112

版权

<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
    
        <title>Test get</title>
        <style type="text/css" media="screen">
            .inp{
                height:30px;
                width:50px;
            }
            .div1{
                width:50px;
                height:30px;
                border:1px solid red ;
                margin:30px auto;
            }
            .tab{
                border:1px solid green;
                height:100px; 
                width:300px;
                margin:50px auto;
                text-align:center;
                
            }
            .tab th,.tab td{
                height:30px;
                width:50px;
                border:1px solid yellow;
            }
        </style>
    </head>
    <body>
        <div class="div1">
            <input type="BUTTON" class="inp"  name="" value="提交" id="inpt">
        </div>

        <table class="tab" >
            <tr>
                <th>name</th>
                <th>age</th>
            </tr>
            <tr>
                <td>wangs</td>
                <td>33</td>
            </tr>
        </table>
        <input type="TEXT" name="tex" id="inp-tex" >
        <input type="text" name="tex2" value="" id="inp-tex2">
        <script src ="./js/jquery-3.0.0.min.js">
        </script>
        <script type="text/javascript" charset="utf-8">
             //判断浏览器版本 不兼容低版本
            $(function (){
                console.log(1111);
                function banben(){
                    if(typeof XMLHttpRequest != "undefined"){
                        return new XMLHttpRequest();
                    }
                }
                //辅助编码函数  起保护作用
                function addURL(url,name,value){
                    url += url.indexOf('?') == -1 ? '?':'&';
                    url += encodeURIComponent(name) + "=" +encodeURIComponent(value);
                    return url ;
                }
                
                var inpt = document.querySelector("#inpt");
                console.log("inpt:" + inpt);

                inpt.onclick = function(){
                    var t1 = $("#inp-tex").val();
                    var t2 = $("#inp-tex2").val();
                    console.log("t1:"+t1);
                    console.log("t2:"+t2); 
                    var url = addURL("http://127.0.0.1:8000/index","name",t1);
                    url =addURL(url,"age",t2);
                    console.log("url:" + url);
                    //版本可以 返回 XMLHttpRequest 函数 
                    var a =banben();
                    console.log("a:"+ a);
                    //准本期 3个参数： 发送类型  URL  是否异步发送
                    a.onreadystatechange =function(){
                        if(a.readyState ==4){
                           console.log(a.response);

                            var obj =JSON.parse(a.response);
                            $(".tab ").append("<tr><td>"+ obj.name +"</td><td>"+ obj.age +"</td></tr>")
                        }
                    }
                    
                    a.open("get",url,true);
                    //发送请求  如果是异步请求（默认异步请求）方法发送后立即返回
                    // 如果是同步请求 此方法直到相应到达后才会返回
                     a.send(null);

                }

            }) 
        </script>
    </body>
</html>

get请求

转载于:https://my.oschina.net/qjxiongba/blog/887112