AJAX前后端交互

AJAX前后端交互一、 URL传值和restful的区别和规范1.URL传值和restful的区别2.URL设计规范二、 GET、POST、PUT、DELETE、OPTION请求的区别三、如何携带数据使用AXIOS、JQUERY发送GET、POST、PUT、DELETE请求三、如何使用formdata传输四、 FormData提供的方法五、如何使用json格式传输六、如何使用ajax上传图片一、

小翁-

518人浏览 · 2021-08-08 22:05:24

小翁- · 2021-08-08 22:05:24 发布

AJAX前后端交互

一、 URL传值和restful的区别和规范
- 1.URL传值和restful的区别
- 2.URL设计规范
二、 GET、POST、PUT、DELETE、OPTION请求的区别
三、如何携带数据使用AXIOS、JQUERY发送GET、POST、PUT、DELETE请求
四、如何使用formdata传输

一、 URL传值和restful的区别和规范

1.URL传值和restful的区别

get形式传参： 传统rul传参

 // 传统形式的传参
fetch("http://localhost:3000/store?id=321", {
     method: "get",
})
// 传统形式的传参
app.get('/store', (req, res) => {
    res.end('传统url传递参数' + req.query.id)
})

get形式传参： Restful形式传参

 //   restful形式的传参
  fetch("http://localhost:3000/books/123", {
        method: "get",
  })
  // restful形式的传参
app.get('/books/:id', (req, res) => {
    res.end('Restful形式的url传递参数' + req.params.id)
})

2.URL设计规范

URL为统一资源定位器 ,接口属于服务端资源，首先要通过URL这个定位到资源才能去访问，而通常一个完整的URL组成由以下几个部分构成：

URI = scheme “：//”host “:” port “/” path [ “?” query ][ “#” fragment ]

scheme: 指底层用的协议，如http、https、ftp
host: 服务器的IP地址或者域名
port: 端口，http默认为80端口
path: 访问资源的路径，就是各种web 框架中定义的route路由
query: 查询字符串，为发送给服务器的参数，在这里更多发送数据分页、排序等参数。
fragment: 锚点，定位到页面的资源

在设计API时URL的path是需要认真考虑的，而RESTful对path的设计做了一些规范，通常一个RESTful API的path组成如下：

/{version}/{resources}/{resource_id}

version：API版本号，有些版本号放置在头信息中也可以，通过控制版本号有利于应用迭代。
resources：资源，RESTful API推荐用小写英文单词的复数形式。
resource_id：资源的id，访问或操作该资源。

从大体样式了解URL路径组成之后，对于RESTful API的URL具体设计的规范如下：

不用大写字母，所有单词使用英文且小写。
连字符用中杠"-“而不用下杠”_"
正确使用 "/"表示层级关系,URL的层级不要过深，并且越靠前的层级应该相对越稳定
结尾不要包含正斜杠分隔符"/"
URL中不出现动词，用请求方式表示动作
资源表示用复数不要用单数
不要使用文件扩展名

二、 GET、POST、PUT、DELETE、OPTION请求的区别

1、GET

get请求是用来获取数据的，只是用来查询数据，不对服务器的数据做任何的修改，新增，删除等操作。
在这里我们认为get请求是安全的，以及幂等的。安全就是指不影响服务器的数据，幂等是指同一个请求发送多次返回的结果应该相同。

特点：

get请求会把请求的参数附加在URL后面，这样会产生安全问题，如果是系统的登陆接口采用的get请求，需要对请求的参数做一个加密。

2、POST

post请求一般是对服务器的数据做改变，常用来数据的提交，新增操作。

特点：

post请求的请求参数都是请求体中
post请求身HTTP协议也是没有限制大小的，限制它的是服务器的处理能力

3、PUT

put请求与post一样都会改变服务器的数据，但是put的侧重点在于对于数据的修改操作，但是post侧重于对于数据的增加。

4、DELETE

delete请求用来删除服务器的资源。

5、OPTIONS
options请求属于浏览器的预检请求，查看服务器是否接受请求，预检通过后，浏览器才会去发get，post，put，delete等请求。至于什么情况下浏览器会发预检请求，浏览器会会将请求分为两类，简单请求与非简单请求，非简单请求会产生预检options请求。

三、如何携带数据使用AXIOS、JQUERY发送GET、POST、PUT、DELETE请求

在这里插入图片描述

四、如何使用formdata传输

formData是ajax2.0(XMLHttpRequest Level2)新提出的接口,利用FormData对象可以将form表单元素的name与value进行组合,实现表单数据的序列化,从而介绍表单元素的拼接,提高工作效率

创建formData对象

  var formData=new FormData(form);
 // 通过append()方法追加数据
 formData.append("name","Lori");

FormData提供的方法

FormData.append() 向 FormData
中添加新的属性值，如果FormData对应的属性值存在则覆盖原值，否则新增一项属性值。
FormData.set() 给 FormData 设置属性值，如果FormData 对应的属性值存在则覆盖原值，否则新增一项属性值
FormData.get() 返回在 FormData 对象中与给定键关联的第一个值
FormData.getAll() 返回一个包含 FormData 对象中与给定键关联的所有值的数组。
FormData.delete():从FormData对象里面删除一个键值对
FormData.has() 返回一个布尔值表明 FormData 对象是否包含某些键
FormData.keys() 返回一个包含所有键的iterator对象
FormData.values() 返回一个包含所有值的iterator对象。
FormData.entries() 返回一个包含所有键值对的iterator对象

五、如何使用json格式传输

json的全称是JavaScript Object Notation，是一种数据交换格式，独立于编程语言，可以用来存储数据，优点是非常利于人类阅读和编写，同时也利于机器的解析和生成，同时还可以提升网络传输效率。json的数据格式是以名-值对的方式存储的，可以将其看做是一个字符串，下面就是一个json格式的数据

{name:"小翁",age:"18”}

具体示例请参考：https://blog.csdn.net/chaseqrr/article/details/103739059

六、如何使用ajax上传图片

HTML代码：

<body>
    <form  enctype="multipart/form-data">
        <div><input type="file" id="MinUpload" /></div>
        <div><input type="submit" value="提交" /></div>
    </form>
</body>

JS代码：

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
    <script>
        $(function () {
            $("form").submit(function () {
                var MinUpload = $('#MinUpload').get(0).files[0]; //获取上传的文件;//get(0)将Jquery对象转换为DOM对象
  
                var formData = new FormData();  //创建一个formData
                formData.append('MinUpload', MinUpload);
  
                $.ajax({
                    url: '/Man/Process',
                    method: 'post',
                    data: formData,
                    dataType: 'json',
                    processData: false,//数据处理
                    contentType: false,//内容类型
                    cache: false,
                    async: false,
                    success: (result) => {
                        console.log(result);
                    },
                    error: (error) => {
                    }
                })
            });
        })
    </script>

控制器代码：

public void Process(HttpPostedFileWrapper MinUpload)
            {
                //将图片上传到 upload 文件夹下 （upload下，且按照时间存放图片）
                string baseUrl = AppDomain.CurrentDomain.BaseDirectory + "upload\\";
                int year = DateTime.Now.Year;
                int month = DateTime.Now.Month;
                int day = DateTime.Now.Day;
      
                string dayUrl = baseUrl + year + "\\" + month + "\\" + day;
    
              //判断是否存在年月份文件夹,如果不存在则创建
              if (!Directory.Exists(dayUrl))
              {
                  Directory.CreateDirectory(dayUrl);
              }
    
              //获取拓展名
              string ext = Path.GetExtension(MinUpload.FileName);
    
              //这里可进行判断是否为 合法的格式文件
              string avatorName = Guid.NewGuid().ToString();
    
              MinUpload.SaveAs(dayUrl + "\\" + avatorName + ext);
    
          }