资讯专栏INFORMATION COLUMN

Jquery 以及AngularJS 中 Get/Post 传参笔记

HackerShell / 2780人阅读

摘要:传参并不是很难的事,但有时牵扯到例如要传一个对象或者到后端的时候就会有些麻烦,在这里总结一些使用方法。在中可以通过设定来解决在中就比较难设定,参见错误之处或者更多方案欢迎提出,谢谢

传参并不是很难的事,但有时牵扯到例如要传一个对象或者form到后端的时候就会有些麻烦,在这里总结一些使用方法。

首先先介绍发送请求时我们经常会混淆的几个属性:
dataType: 期待服务器返回的数据格式
mimeType: 告诉说如何处理服务器返回的数据格式,这样browser就会进行相应的处理, 例如,设定类型为"Text/html",那么client端就知道说,这是一个HTML的文档,我直接呈现出来就可以了;如果说是“Application/pdf”,那么client端就会知道说需要启动PDF阅读器插件去呈现内容。
contentType: 是指你所要发送的数据类型,例如“application/json;charset=utf-8”就是很常见的类型, 而“application/x-www-form-urlencoded; charset=UTF-8”是默认类型。

另外,比较一下Request Payload和Form的方式有何区别:
Request Payload需要设定Content-Type:application/json
在chrome developer tool里你会看到他传递的是一个Object/json,注意到里面还包含了数组,假如你是通过ajax提交的请求,浏览器只是显示出你通过Payload body提交的内容,浏览器并不知道资料是从哪里来的

Form形式的需要设定Content-Type: application/x-www-form-urlencoded 或者 Content-Type: multipart/form-data,通过developer tool看到的是这样的,这种情况下form-data就是Request payload,浏览器知道什么键对应什么值,所以他是以xx=xx的形式展现的,要注意的是,数组被转成了字串。

因此,当你需要传的资料仅仅是键值对,用Form的形式足以,如果需要传递的是复杂结构的(例如有嵌套的数组,对象),用RequestPayload比较合适。

接下来让我们比较一下各种传参情况~

第一种情况,传普通字串
JQuery:

let params = {
    a: 1,
    b: 2
}
// 第一种方法:
$.ajax({
        "dataType": "json",
        "type": "GET",
        "url": "your_request?" + $.param(params)
})

//第二种方法:
$.ajax({
        "type": "GET",
        "url": "your_request",
        "data": params
})

AngularJS:

var conf = {
    method: "GET",
    url: "your_request",
    params: {
        a: 1,
        b: 2
    }
};

$http(conf).then(function(response){
    console.log(response.data);
}, function(){
    console.log("error");
}).finally(function(){
    console.log("finally");
});

第二种情况:Post form data
JQuery:

let params = {
    a: 1,
    b: 2,
    ary1: [3,4,5]
}

$.ajax({
    "type": "POST",
    "url": "your_request",
    "data": params
})

AngularJS:
注意data需要被转换成URL-encoded字串
ContentType需要设定为"application/x-www-form-urlencoded"指定传送的数据格式为Form

var conf = {
    method: "POST",
    url: "your_request",
    data: $.param({
        c: 3,
        d: 4
    }),
    headers: {"Content-Type": "application/x-www-form-urlencoded"}
};

第三种情况:使用RequestPayload进行Post参数
JQuery:
设定contentType为“application/json”,并且将params序列化

let params = {
    a: 1,
    b: 2,
    ary1: [3,4,5]
}

$.ajax({
    "type": "POST",
    "url": "your_request",
    "data": JSON.stringify(params),
    "contentType": "application/json"
})

AngularJS:

var conf = {
    method: "POST",
    url: "your_request",
    data: {
        c: 3,
        d: 4
    }
};

有时,当服务器返回response是null,在火狐里会出现xml解析错误,是因为火狐默认使用xml解析服务器返回值,而遇到null返回值时,发生了解析错误。
在JQuery中可以通过设定mimeType来解决

$.ajax({
        "dataType": "json",
        "type": "GET",
        "url": "your_request",
        "mimeType": "json"
}) 

在AngularJS中就比较难设定mimeType,参见:https://github.com/angular/an...

错误之处或者更多方案欢迎提出,谢谢!

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/94979.html

相关文章

  • AJAX跨域、使用formdata传输文件(传输截图后的文件)、angularJS跨域

    A网站访问B网站这就是跨域 当你调用接口时,F12控制台抛出这状态时,你就跨域了(图示) showImg(https://segmentfault.com/img/bVE8yG?w=867&h=44); 如何解决跨域呢? 解决的几种方法(我现在只用到了这两种) JSONP 让后台的小伙伴设置header:如PHP的 header{Access-Control-Allow-Origin: *} ...

    陈伟 评论0 收藏0
  • AngularJS简述

    流行框架 简介 angularjs是一款非常优秀的前端高级JS框架,由谷歌团队开发维护,能够快速构建单页web应用,化繁为简 无论是angularjs还是jQuery都是用原生JS封装的 库:对代码进行封装,调用封装的方法,简化操作 传统方式是用get方式获取元素,然后点方法 jQuery库实现了对获取方式的封装,对方法的封装 框架:提供代码书写规则,按照规则去写代码,框架会帮我们实现响应的功能...

    Jason 评论0 收藏0
  • angularjs+springMvc学习笔记

    摘要:回调说白了,就是把函数当参数传给另一根函数,在另一个函数执行时调用此函数例如,在下面这段代码中,上面定义了两个函数和,下面的方法请求成功执行,失败执行异步异步的原理我看了网上的一些博客和例子,大都以定时任务为例子说明,但具体的原理我还是不太 回调 说白了,就是把函数当参数传给另一根函数,在另一个函数执行时调用此函数例如,在下面这段代码中,上面定义了两个函数success和error,下...

    dreamGong 评论0 收藏0
  • angularjs+springMvc学习笔记

    摘要:回调说白了,就是把函数当参数传给另一根函数,在另一个函数执行时调用此函数例如,在下面这段代码中,上面定义了两个函数和,下面的方法请求成功执行,失败执行异步异步的原理我看了网上的一些博客和例子,大都以定时任务为例子说明,但具体的原理我还是不太 回调 说白了,就是把函数当参数传给另一根函数,在另一个函数执行时调用此函数例如,在下面这段代码中,上面定义了两个函数success和error,下...

    rozbo 评论0 收藏0
  • Ajax详解

    摘要:当请求完成后注册一个回调函数。该请求是否触发全局处理事件如等,请求发送前的回调函数,用来修改请求发送前,此功能可用来设置自定义头信息,在函数中返回将取消这个请求。例如,为请求指定一个回调函数名。即改变回调函数的,默认就是传入的整个对象。 Ajax Ajax 全称是 asynchronous javascript and xml,并不是新的编程语言,可以说是已有技术的组合,主要用来实现客...

    jokester 评论0 收藏0

发表评论

0条评论

HackerShell

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<