Ajax

Ajax

Ajax 是指一种创建交互式网页应用的网页开发技术

Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。（异步请求技术）

对服务器发送请求的几种方式

整个页面

1.在浏览器网址栏输入网址

2.a标签发请求

3.location.href 也能发请求

window.open(‘http://www.baidu.com’); 跳转到某页面

window.location.href = “http://www.baidu.com”; 跳转到某页面

let url = window.location.search ; 获取浏览器地址栏?及以后的内容

---

表单的请求方法

action：就是请求的地址，只不过form会跳转而已

method：请求方式,有get和post

name= " 这里为请求参数 "

<form action="https://autumnfish.cn/api/joke/list" method="post">
        		<!-- 用表单的时候，一定要给内容加name属性 -->
        		<!-- 表单里的name属性，相当于是添加请求参数的，name值是什么，参数名就是什么 -->
        		<input type="text" name="num">
        		<input type="submit">
</form>

网页局部

jQuery-get方法

$.get({
	url:'请求的接口地址',
    data: { 参数名1: 参数值1 , 参数名2 : 参数值2 },
    dataType: "json",         //强行把结果当JSON字符串来转成JS对象
	success:function( 响应回来的内容 ){
		//请求成功后的回调函数.
	}
});

        let url = window.location.search;         //获取浏览器地址栏?及以后的内容
    	let id = url.split('=')[1];               //从地址上截取id
									//变量.split('=');   将字符串按"="截取成数组		 
    	$.get({					    //发送get请求 
                url:"https://autumnfish.cn/api/joke",
                data: { id: id },         		  //请求参数
            	dataType: "json",        		  //强行把结果当JSON字符串来转成JS对象
                success:function(res){			  //响应成功后的回调函数
                    console.log(res);			  //res为响应回来的数据
                } 
         });

jQuery-post方法

//点击登录按钮发送的post请求
$('#login').click(function(e){                 //给登录按钮,添加点击事件
    	e.preventDefault();    				   //e为事件对象,阻止事件的默认行为
    	let userName = $('#userName').val();   //拿到用户名框里的内容
    	let passWord = $('#passWord').val();   //拿到密码框里的内容
        $.post({                               //发送post请求
                url:"https://autumnfish.cn/api/user/check",  //发送请求的地址
               // data:"username=" + $(this).val(),
               // 其实给接口传递参数，也可以传入一个对象，属性名就是参数名，属性值就是要传递过去的参数值
                data: { 
                    username: uaerName,        //请求参数1
                    password: passWord,		   //请求参数2
                },
            	dataType: "json",        	   //强行把结果当JSON字符串来转成JS对象
                success:function(res){         //响应成功后的回调函数,用来接收响应回来的数据
					console.log(res)	       //res为响应回来的数据
                }
         })
})

jQuery中的ajax方法

. $ . ajax({

. type: ‘get / post’ , // 发送请求的方式

. url: ‘链接接口’ ,

. data:{参数名1:参数值1 ,参数名2:参数值2 } , //发送请求的参数

. dataType : ‘json’, // JSON 字符串来转成 JS 对象

. success : function( 响应回来的内容 ){ 请求成功后执行的代码 }

. // 响应成功后的回调函数

. })

$('#get').click( function(){
		$.ajax({							 //利用ajax发送请求
                type:"get",                  // 发get/post请求
                url:"https://autumnfish.cn/api/joke/list",      //请求的地址  				            data:{num : 3},    			  // data:"num=3",
                success:function(res){
				     console.log(res);        //res 为响应回来的数据
                }
         })
});

json字符串

var str = {“name” : “jack” , “age” : 16 }; JS对象

var str = { name : “jack” , age : 16 }; JS对象

var str = ’ { “name” : “jack” , “age” : 16 } ’ ; JSON字符串，这个字符串代表的是一个对象

var str = ’ [ 10 , 20 , 30 , 40 , 50 ] ’ ; JSON字符串，这个字符串代表是的一个数组

JSON字符串规则：

1. 单引号包裹的字符串

2. 最外层必须用 { } 或者 [ ] 包起来

3. [ ] 包起来的代表数组，{ } 包起来的代表对象

4. { } 包起来的键必须用双引号包起来 , 值如果是字符串就用双引号，数字或者布尔类型就不用双引号

   json字符串转对象 或 者数组

   var str = ’ { " name " : " jack " , " age " : 16 } ’ ; JSON字符串对象

   var obj = JSON.parse( str ) ; 将json字符串转化为js对象

   var str = ’ [ 10 , 20 , 30 , 40 , 50 ] ’ ; JSON字符串数组

   var arr = JSON . parse ( str ) ; 将json字符串转化为js数组

   对象 或 者数组 转 json字符串

   var obj = { name : “jack” , age : 16 }; JS对象

   var res = JSON . stringify ( obj ); JS对象转成JSON字符串对象

   var arr = [10,20,30,40,50]; JS数组

   var res = JSON.stringify ( arr ) ; JS对象转成JSON字符串数组

JSON 字符串数组

var str = '[{"name":"jack","age":16},{"name":"rose","age":17},{"name":"andy","age":18}]';

JSON 字符串对象

var str = '{"num":3, "data":[{"name":"jack","age":16},{"name":"rose","age":19},{"name":"andy","age":19}]}';

原生js发送Ajax请求

原生js发送get请求

btn1.onclick = function(){
        var xhr = new XMLHttpRequest();         //new一个请求对象 
        xhr.open('get' , 'https://autumnfish.cn/api/joke/list?num='num);  
    	//请求方式 , 请求地址?数据名 = 数据值 & 数据名 = 数据值 ♥♥♥♥♥♥♥
        xhr.onreadystatechange = function(){
            if(xhr.readyState == 4 && xhr.status == 200){
            	  //将json字符串对象转换成对象
                  var obj = JSON.parse(xhr.responseText);
                  //xhr.responseText是服务器返回的数据
                  console.log(obj);
            }
        }
        xhr.send();     //发送请求    
}

原生js发送post请求

btn1.onclick = function(){
        var xhr = new XMLHttpRequest();         //new一个请求对象 
        xhr.open('post' , 'https://autumnfish.cn/api/joke/list');  
    	//请求方式和 请求地址
    	xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    	//设置请求头
        xhr.onreadystatechange = function(){
            if(xhr.readyState == 4 && xhr.status == 200){
            	  //将json字符串对象转换成对象
                  var obj = JSON.parse(xhr.responseText);
                  //xhr.responseText是服务器返回的数据
                  console.log(obj);
            }
        }
        xhr.send('参数名1=参数值1 & 参数名2 = 参数值2');     //发送带参数的请求    
}

字符串模板

   <!-- 1.导入art-template.js -->
<script src="./template-web.js"></script>
	<!-- 2.准备一个模板 -->
<script type="text/html" id="tpl">
    <!-- 我希望它我有几个数据，它就自动帮我们生成几个这样的html -->
    <!-- 用each就代表数组有多少个就会创建几段 -->
    {{ each }}
       {{ $value }} ----- {{ $index }}
       <hr>
	{{ /each }}
</script>

<script type="text/html" id="tpl2">
	{{ each }}
        <h3>我的名字是：{{ $value.name }}</h3>
        <p>我的年龄是：{{ $value.age }} 岁</p>
        <p>我的女朋友是：{{ $value.girlFriend }}</p>
	{{ /each }}    
</script>
<script>
        var data = [
            { name: "张三", age: 16, girlFriend: '苍老师' },
            { name: "李四", age: 17, girlFriend: '林老师' },
            { name: "王五", age: 19, girlFriend: '张老师' },
            { name: "麻子", age: 19, girlFriend: '邹老师' },
        ];
        var res1 = template('tpl2', data);
        console.log(res1);
        document.body.innerHTML = res1
</script>

提交form表单的内容

$('.btn-save').click(function(e){
    e.preventDefault();             			//阻止事件的默认行为
    var fm = new FormData($('form')[0]);        //获取所有的表单元素对象
    fm.append('id',id);							//给表单添加新的请求内容
    
$.ajax({										//给服务器发请求
      type:'post',								//请求内容
      url:'http://localhost:4399/hero/update',  //请求地址
      data:fm,									//请求参数
        
      contentType:false,						//参数传表单元素就必须设置1
      processData:false,						//参数传表单元素就必须设置2
        
      success:function(res){					//请求成功后的执行内容
        console.log(res);                       //res为请求成功后服务器返回的内容
      }
  })

注意 : form表单中的name值一定要和请求的参数的名一一对应;

原生ajax封装

$.ajax = function (params) {
      // 创建请求对象
      var xhr = new XMLHttpRequest();
      // 既要满足是get请求，又要满足有参数，才帮你拼接url
      if (params.type=='get' &&  params.data) {
      // 如果传了参数就要拼接网址
          params.url += "?" + params.data;
      }
      // open方法设置请求方式和请求路径
      xhr.open( params.type, params.url);
      // 监听响应完成
      xhr.onreadystatechange = function () {
      	if (xhr.readyState == 4 && xhr.status == 200) {
      // 永远只能打印响应体
      // console.log(xhr.responseText);
      // 大家对响应体的处理代码可能都不一样，所以这里不能写死代码
      // 不能写死，就干脆让别人把处理响应体的代码，传进来
            params.success(xhr.responseText);
         }
       }
       if(params.type == 'post'){
       // 如果是post请求，还要设置请求头
          xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
          xhr.send(params.data);
       }else{
          xhr.send();
       }
}

发送ajax请求

$.ajax({
            type:"get",										//发送请求的方式
            url:"https://autumnfish.cn/api/joke",
            success:function(res){
                alert(res);
            }
 })       
 $.ajax({
            type:"post",
            url:"https://autumnfish.cn/api/user/check",
            data:"username=rose",
            success:function(res){
                alert(res);
            }
  })