3. AJAX前后端交互

1)URL传值和restful的区别和规范

在使用GET请求传参数时,URL使用&PARAM=xxxxxx传递参数,若参数中包含特殊字符,处理起来就比较麻烦,特别是参数本身带有&,此时就需要将特殊字符进行处理.这里使用函数encodeURIComponent()在传参前对其进行处理,在使用时,使用decodeURIComponent()对其进行解码.

PS:

  1.encodeURIComponent() 函数可把字符串作为 URI 组件进行编码,该方法不会对 ASCII 字母和数字进行编码,也不会对这些 ASCII 标点符号进行编码: - _ . ! ~ * ' ( ) 。其他字符(比如 :;/?:@&=+$,# 这些用于分隔 URI 组件的标点符号),都是由一个或多个十六进制的转义序列替换的。

  提示:请注意 encodeURIComponent() 函数 与 encodeURI() 函数的区别之处,前者假定它的参数是 URI 的一部分(比如协议、主机名、路径或查询字符串)。因此 encodeURIComponent() 函数将转义用于分隔 URI 各个部分的标点符号

  2.decodeURIComponent() 函数可对 encodeURIComponent() 函数编码的 URI 进行解码。

   返回值 URIstring 的副本,其中的十六进制转义序列将被它们表示的字符替换。[以上来源于w3c]

(java写法
System.out.println(URLEncoder.encode("中国","utf-8"));//转码
System.out.println(URLDecoder.decode("%E4%B8%AD%E5%9B%BD","utf-8"));//解码
javascript写法
decodeURIComponent("%E4%B8%AD%E5%9B%BD")
encodeURIComponent("中国"))

 

2)GET、POST、PUT、DELETE、OPTION请求的区别

~GET:GET可以说是最常见的了,它本质就是发送一个请求来取得服务器上的某一资源。资源通过一组HTTP头和呈现据(如HTML文本,或者图片或者视频等)返回给客户端。GET请求中,永远不会包含呈现数据。

~POST:向服务器提交数据。这个方法用途广泛,几乎目前所有的提交操作都是靠这个完成。

~PUT:这个方法比较少见。HTML表单也不支持这个。本质上来讲, PUT和POST极为相似,都是向服务器发送数据,但它们之间有一个重要区别,PUT通常指定了资源的存放位置,而POST则没有,POST的数据存放位置由服务器自己决定。
举个例子:如一个用于提交博文的URL,/addBlog。如果用PUT,则提交的URL会是像这样的”/addBlog/abc123”,其中abc123就是这个博文的地址。而如果用POST,则这个地址会在提交后由服务器告知客户端。目前大部分博客都是这样的。显然,PUT和POST用途是不一样的。具体用哪个还取决于当前的业务场景。

~DELETE:删除某一个资源。基本上这个也很少见,不过还是有一些地方比如amazon的S3云服务里面就用的这个方法来删除资源。

~OPTIONS:这个方法很有趣,但极少使用。它用于获取当前URL所支持的方法。若请求成功,则它会在HTTP头中包含一个名为“Allow”的头,值是所支持的方法,如“GET, POST”。

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

 

4)如何使用formdata传输

<form>标签添加enctype="multipart/form-data"属性
jQuery 的 ajax 中processData设置为false (表示不需要对数据做处理)
jQuery 的 ajax 中cache设置为false (表示上传文件不需要缓存)
jQuery 的 ajax 中contentType设置为false (因为前面已经声明了是‘FormData对象’)
如果没有<form>标签,也没有enctype="multipart/form-data"属性,怎么使用formData对象提交表单呢?如下方式:

 

注意:要想让<input type="file">标签 能够上传多个文件,只需要在<input type="file">里添加multiple或multiple="multiple"属性。

php文件:(示例)

 

 5)如何使用json格式传输

city类

 

Province类

 

 Test

 

6)如何使用ajax上传图片

1:先说我们平时接触到的接口都是后台需要你给他传递几个参数,你就把参数对应的值 给他们就行了

eg:

 

上面的这个截图就是我们最常用的接口形式飒飒;

2.当你给后台传图片时,你传的是一个文件 而不再是普通的string类型的值。而是file类型 也就是文件类型

我这里说的是用ajax实现的图片上传

1.在ajax中加上processData : false,

2.在ajax中加上contentType : false,

3.在ajax中加上async:false,

4.主要是改变ajax中的data这个属性:看代码

 

 



posted @ 2021-08-10 19:29  小阿古  阅读(746)  评论(0编辑  收藏  举报