ajax第一天

达成的能力目标

1. 能够知道Ajax 可以使网页在不重新刷新的情况下实现局部更新数据
2. 能读懂Api接口描述文档 （数据接口文档）
3. 能够使用jQuery编写发送Ajax GET和POST请求的固定套路代码
4. 能够分析服务器返回的数据如何转换成Dom元素呈现在界面上
5. 能够理解Ajax的本质是使用XMLHttpRequest对象与服务器进行通讯
6. 能够使用art-template模板实现将服务器返回的数据转换成Dom元素呈现在界面上
7. 能够知道Ajax请求中的两种跨域解决方案JSONP和CORS
8. 能够完成英雄的增、删、查、上传头像业务

Get请求

10. 向约定客户端向服务器要资源就用Get请求,获取
11. 
    
    

Post请求

作用：该方法是利用Ajax发送Post请求将数据提交给服务器

语法和参数

语法格式
$.post(url, [data], [callback], [type])
参数名称 参数类型 是否必填 参数说明
url string 字符串 必填 要请求的资源地址，我们通常叫做Api接口
例如：http://127.0.0.1:3001/addHeroSkin
此地址通常是由Java，PHP，Python，.Net等后端工程师提供也
可以由前端工程师编写NodeJS代码来实现
data object 对象 选填 待发送给服务器的数据，格式{key:value,key1,value1}
或者 key=value&key1=value1 都可以
如果没有数据提交可以填写null，或者不填写
callback function 函数 选填 请求成功回调函数
我们可以通过此函数参数获得服务器响应数据
例如：function(resdata){ resdata即为服务器响应的数据 }
虽然是选填，但真正开发过程中99%都需要填写此函数
type string 字符串 选填 服务器返回数据格式，我们用得最多的是json格式，少量使用xml
真正开发过程中此参数99%都省略

3.14.3. $.ajax()方法(语法熟练掌握)

作用:既能发送Get请求,也可以发送post请求,比$.get()和&.post()更灵活,功能更加丰富

语法和参数

基本语法格式
$.ajax({
url:’ ‘, //请求URL地址
type:’ ', //请求方式 Get 或 Post
data:{ } , // 本次请求要携带的参数
success:function(resData){ } //请求成功后的回调函数
})
发送带参数的Get请求，典型特征：第二个参数传入了{属性名:属性值} 这样格式的一个对象

$.ajax({
url:‘http://127.0.0.1:3001/getHeroSkin’, // 请求api接口地址
type:‘GET’, // 表示发送get请求
data:{heroName:‘白起’}, // 表示查询英雄名称为“白起”的数据
success:function(resData){ // 请求成功的数据存放在resData中
console.log(resData);
}
})

案例1:

英雄名称: <input class="name" type="text " placeholder="请输入英雄"> 皮肤名称: <input class="skin" type="text " placeholder="请输入皮肤">
<input class="submit" type="submit" value="提交">
<script src="./js/jquery-1.12.4.min.js"></script>
<script>
    //给按钮一个点击事件
    $('.submit').click(() => {
            //获取name输入框的内容
            const name = $('.name').val().trim()
                //获取skin输入框的内容
            const skin = $('.skin').val().trim()
                //判定name和skin是不是为空，如果是就return，弹出警告框
            if (name === '' || skin === '') return alert('请您输入英雄名称或者皮肤名称')
                //ajax的方式
            $.ajax({
                //获取地址，参数对象
                url: 'http://127.0.0.1:3001/addHeroSkin',
                //这个是提交的命令
                type: 'Post',

                //请求要携带的参数
                data: {
                    cname: name,
                    skin_name: skin


                },
                //请求成功后的回调函数
                success: (res) => {
                    //打印是否成功
                    console.log(res);
                    //判断添加的是否为200，为200就是添加成功
                    if (res.code === 200) {
                        alert('棒极了')
                            //输入成功后清空本来的输入框
                        $('.name,.skin').val('')
                    } else {
                        //如果不是200就弹出警告框
                        alert('你眼睛有问题')
                    }
                }
            })
        })

jQuery中的serialize()方法

为什么要使用serialize()方法
我们在使用 $.post()方法时，通常需要获取页面上用户输入的数据，例如：“添加英雄皮肤案例-练习Post请求” 时我们是通过定义一个heroData 对象，里边的cname和skin_name属性值都是通过jQuery去获取页面上文本框中的值，这种方式的弊端在于有时候我们做的业务比较复杂，页面中需要获取值的个数会相当多，这时如果还是一个个通过jQuery方法获取的话，我们写的代码就会相当复杂，如果使用jQuery中的serialize()方法配合form标签就能一次性自动获取到所有处在

中的带有name属性的元素值
利用serialize()方法获取form表单中带有name属性元素的值步骤
1、在html页面上将需要获取值所有元素设置一个name属性
举例： 文本框元素添加了一个 name="cname"的属性
2、将这些元素全部包裹到中，并且给form标签设置一个id属性，比如：form1
举例：
3、使用 KaTeX parse error: Expected 'EOF', got '#' at position 3: ('#̲form元素id').seri…(’#form1’).serialize()获取到的结果字符串为：cname=baiqi&skin_name=gouzi
案例2:

< form id=“form”>

英雄名称: 皮肤名称:
< input class=“submit” type=“submit” value=“提交”>
< /form>
< script src="./js/jquery-1.12.4.min.js">< /script>
< script>
//给按钮做点击事件
$(’[type=“submit”]’).on(‘click’, (e) => {
//阻止点击提交按钮导致页面被刷新
e.preventDefault()
//序列化表单：快速获取表单数据
// const str = $(’#form’).serialize()
// console.log(str);
$.ajax({
type: ‘Post’,
url: ‘http://127.0.0.1:3001/addHeroSkin’,
data: $(’#form’).serialize(),
success: (res) => {
console.log(res)
},
})
})
< /script>