post,get,ajax,load,jsonp方法的运用

最新推荐文章于 2022-09-07 18:30:11 发布

weixin_44389107

最新推荐文章于 2022-09-07 18:30:11 发布

阅读量229

点赞数

本文链接：https://blog.csdn.net/weixin_44389107/article/details/87923087

版权

post请求

<body>
<!--get类型提交的数据会显示在url地址？后面，不安全-->
<!--<form action="./text.txt" method="post">
    密码：<input type="password" name="psw">
    <input type="submit" value="提交">
</form>-->
<ul></ul>
<script>
    /*
    * get请求  从服务器获取数据，参数的传递都是通过url地址中的？后面传递的
    * post请求：一般都是业务数据，即表单提交，用户名登录，post也可以用来获取数据
    */
    var xhr = new XMLHttpRequest();
    xhr.open("get","./contacts.json");
    xhr.send();
    xhr.addEventListener('readystatechange',function () {
        if(this.readyState!=4) return;
        //获取请求回来的数据
        console.log(this.responseText);
        console.log(typeof this.responseText);//string字符串 不能遍历
        //需要将json字符串转换成对象  JSON.parse()
        var data = JSON.parse(this.responseText);
        console.log(typeof data);
        for(var i=0 ; i<data.length ; i++){ //遍历
            console.log(data[i]);
            var li = document.createElement("li"); //创建li元素
            li.innerHTML = data[i].name;
            document.getElementsByTagName('ul')[0].appendChild(li); //将li添加到ul
        }
    })
</script>
</body>

post请求

<body>
添加数据：<input type="text" id="data">
<button id="btn">确定</button>
<script>
    var txt = document.getElementById("data");
    var btn = document.getElementById("btn");
    btn.οnclick=function(){
        var addData = txt.value;
        var xhr = new XMLHttpRequest();
        xhr.open("post","http://www.liulongbin.top:3005/api/addproduct");
        //遵循http协议----》一定要设置请求体
        xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        //发送请求
        xhr.send('name='+addData);
        //xhr.send('name=zhangsan&passwrod=123456');//传两个参数
        xhr.onreadystatechange = function(){
            if(this.readyState != 4) return;
            console.log(this.responseText);
        }
    }
</script>

load()方法

<div class="box"></div>
<script src="js/jquery-1.12.4.js"></script>
<script>
    /*
    * ajax的应用；是在浏览器与服务器之间异步加载数据的
    * $.load():从服务器加载数据
    * load()语法：$(selector).load(url,[data],function(response,[status],[xhr]){   })     []可选
    */
    $(".box").load('text.txt',{'name':'zhangsan','age':18},function(res,status){
        console.log(res); //响应的内容
        console.log(status); //响应的状态
    })
</script>

get()与post()

<div class="box"></div>
<script src="js/jquery-1.12.4.js"></script>
<script>
    /*
    * ajax的应用；是在浏览器与服务器之间异步加载数据的
    * $.get():从服务器获取数据
    * get()语法：$.get(selector).load(url,[data],function(response,[status],[xhr]){   })     []可选
    */
    $.get('text.txt',{'name':'zhangsan','age':18},function(res,status){
        console.log(res); //响应的内容
        console.log(status); //响应的状态
    })

   
    $.post('http://www.liulongbin.top:3005/api/addproduct',{'name':'zhangsan','age':18},function(res,status){
        console.log(res); //响应的内容
        console.log(status); //响应的状态
    })
</script>

ajax方法
<div class="box"></div>
<script src="js/jquery-1.12.4.js"></script>
<script>
   /*
   * $.ajax({
   *      url:"请求的地址，
   *      type:"请求的类型"  get  /post
   *      dataType:"要求服务器返回的数据类型"
   *      async:请求是否异步处理，默认是异步
   *      success：function(){},
   *      error:function(){}
   *  })
   * */

   /*$.ajax({
       url:"http://www.liulongbin.top:3005/api/getnewslist",
       type:'get',
       datatype:'json',
       success:function(res){
           console.log(typeof res);
       }
   })*/


   $.ajax({
       url:"http://www.liulongbin.top:3005/api/addproduct",
       type:'post',
       data:{
           name:"丽丽"
       },
       datatype:'json',
       success:function(res){
           console.log(typeof res);
       }
   })

</script>

jsonp
<body>
<!--
jsonp:能实现跨域请求，动态的创建script标签，然后利用script的src,不受同源策略的约束，来跨域的获取数据
-->
<!--法一
<script type="text/javascript">
    function callbackFunction(res) {
        console.log(res);
    }
</script>
<script type="text/javascript" src="http://www.runoob.com/try/ajax/jsonp.php?jsoncallback=callbackFunction"></script>
-->

<!--法二-->
<script src="js/jquery-1.12.4.js"></script>
<script>
    $.ajax({
        type:'get',
        url:'http://www.runoob.com/try/ajax/jsonp.php',
        dataType:'jsonp',
        //请求PHP的参数名
        jsonp:'jsoncallback',
        //要执行回调函数
        jsonpCallback:'callbackFunction',
        success:function(res){
            console.log(res);
        }
    })
</script>
<!--<script>
    //法三
    $.getJSON("http://www.runoob.com/try/ajax/jsonp.php?jsoncallback=?", function(res) {
        console.log(res);
    });
</script>-->
</body>
</html>