文档章节

ajax中get和post的提交、却别、错误处理以及注意事项

文文1
 文文1
发布于 2015/12/03 10:02
字数 952
阅读 81
收藏 3
点赞 0
评论 0
<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>

$.get和$.post的不同
    1、get通过url提交的,post是通过http消息实体提交的
    2、get提交大小限制为2kb,post不限制
    3、get提交会被缓存下来,有安全隐患,post没有

    $.get 和 $.post的几种传参方式
    1、在url后面直接问号传参: test.php?age=20
    2、以字符串键值对的方式传参:  'age=20'
    3、以对象键值对的方式传参:  {age:20}

    $.get 以上三种方式都支持,但是$.post和$.ajax只支持后2种写法

    具体demo:
    1、$.get('test.php?age=20',function(result){
        alert(result)
    })
    2、$.get('test.php','age=20',function(result){
        alert(result)
    })
    3、$.get('test.php',{age:20},function(result){
        alert(result)
    })

   三、getScript 一般就是引入一个js文件
   $.getScript('demo.js') 即可 
   四:getScript 请求一个json文件,不必要指定返回的数据类型,而且如果制定了非json的type类型如type:html ,由于安全性高一点也不会返回html格式的数据

   五、在用ajax 提交表单的时候可以用表单序列化获取表单的传参内容,而且传参的形式是字符串键值对,并且还会对url进行编码
   $('form').serialize();
   如:$.ajax({
        type:'POST',
        url:'text.php',
        data: $('form').serialize(),
        success:function(response,status,xhr){
            dosomething...
        }  
   })

   五-1;在一下html中可以用decodeURLComponent对序列化的数据进行解码
   <form>
       <input type="checkbox" name="sex" value="男" id="">
       <input type="checkbox" name="sex" value="女" id="">
   </form>
   <div id="box"></div>
   <script>
        $('form input[name=sex]').click(function(){
            $('#box').html(decodeURLComponent($(this).serialize()))
        })
   </script>


   5-2,以上的例子可以用serializeArray()可将数据格式化为json格式


   六;ajaxSetup 是对ajax进行初始化,应用场景当多个ajax重复用到某些数据的时候可以分装起来如:
   $.ajaxSetup({
    type:'POST',
    url:'text.php',
    data:'{}'
   });
   $('form :submit').click(function(){
    $.ajax({
     success:function(response,status,xhr){


     }
    })
   });

   7.$.param()方法可对复杂的json进行字符串键值对解析r

   进阶:
   8、$.ajaxstart()和$.ajaxStop()放置加载时间过长处理
   在jq1.8版本后必须绑定在document上如:
   $(document).ajaxStart(function(){
        $('.loading').show()
   }).ajaxStop(function(){
         $('.loading').hide()
   });

   8-1 如果加载超时,可以用timeout设置超时限制


 ===============
    $.ajax进阶 
    1、加载请求
    $.ajaxStart() 、$.ajaxStop 可以在对用户等待时间加载loading图片


    2、错误处理
    $.ajax的错误处理  可以在自己当前添加error方法,参数是(xhr,status,statusText) 如:
    2-1: $.ajax的error处理
    $.ajax({
        url:'www.seogjgsdggd.com/test.php',
        type:'POST',
        data:'age=20',
        error:function(xhr,status,statusText){
            alert(xhr.status)
        }
    });
    2-1:$.post的error错误处理,添加连缀的局部方法error,参数是(xhr,errorText,errorType)如:
    $.post('test.php','age=20',function(response,status,xhr){
         alert(response+"//"+xhr.status)
    }).error(function(xhr,errorText,errorType){
        alert('错误')
    });
    也可以用全局的ajaxError方法如(1.8版本建议吧事件绑定在document上),但是参数有所不同(event,xhr,settings,errorType) 如:
    $(document).ajaxError(function(event,xhr,settings,errorType){
        event,xhr,settings都是对象,event一般就用(type,target)属性,settings一般就用(url,type);
    });

    3/ 请求全局事件有 $.ajaxstart(),$.ajaxstop()、$.ajaxError(),
                        $.ajaxSuccess(),$.ajaxComplete,$.ajaxSend()
        前三个是请求时出发的全局事件,
        $.ajaxSuccess() 对应一个局部方法 .success();
        $.ajaxComplete()对应一个局部方法 .complete();
        $.ajaxSend()没有对应的局部方法,只有属性beforeSend
        例子:
        $(document).ajaxSend(function(){
            alert(发送请求之前);
        }).ajaxComplete(function(){
             alert(请求成功和失败之后都会出现,是出现在成功或者失败的后面);
        }).ajaxSuccess(function(){
             alert(请求成功后);
        }).ajaxError(function(){
            alert(请求失败后);
        })

        $.post('test.php',$('form').serialize()).success(function(){
            alert(请求成功后);
        }).complete(function(){
            alert(请求完成后);
        }).error(function(){
            alert(请求失败后);
        })


        $.ajax({
            url:'test.php',
            type:'POST',
            data:$('form').serialize(),
            success:function(response,status,xhr){
                alert(请求成功后);
            },
            complete:function(){
                alert(请求完成后);
            },
            error:function(xhr,errorText,errorType){
                alert(请求错误后);
            },
            beforSend:function(){
                alert(请求之前);
            }
        })


</body>
</html>


本文转载自:

共有 人打赏支持
文文1
粉丝 19
博文 339
码字总数 114952
作品 0
长沙
程序员
Ajax请求session超时处理流程(DWZ)

名人名言:问题不在于告诉他一个真理,而在于教他怎样去发现真理。——卢梭 DWZ-Java框架Ajax请求session超时处理思路: 1)SessionValidateFilter统一验证session是否超时 2)SessionValida...

GIFCOOL
2012/10/19
0
0
Sprig MVC AJAX提交数据整理

标签: 在使用SpringMVC+AJAX提交数据的时候一直提交不成功,发现自己对于SpringMVC AJAX提交数据的认知完全是错误的,重新学习整理。 什么是JSON对象/字符串 JSON对象: 这种格式的叫JSON对象...

化烟雨
2017/11/28
0
0
关于ajax的问题(整理回答,发布正确的代码,csrf)

在这里把我遇到的ajax问题和大家的回答整理总结一下, 刚学CI, 可能有错误,希望指正。 如果你有以下问题,可能会得到帮助: 1. 跨域访问错误 2. csrf保护开启后ajax出现错误 3. gZip开启后出现...

mac_zhao
2014/12/15
0
0
Spring MVC RequestBody

上一节小博老师给大家详细讲解了RequestMapping的具体使用方法以及各个参数的含义。今天小博老师继续给大家讲解RequestBody如何使用。 @RequestBody用于读取Request请求的body数据,并使用H...

博为峰教研组
2016/12/06
36
0
原 Ajax中get与post的区别,以及Ajax中的乱码问题的解决方法

一、Ajax中的Get和Post Get方式: 用get方式可传送简单数据,但大小一般限制在1KB下,数据追加到url中发送(http的header传送),也就是说,浏览器将各个表单字段元素及 其数据按照URL参数的格...

CAN-DO
2014/02/09
0
0
Ajax中get与post的区别,以及Ajax中的乱码问题的解决方法(PHP)

一、Ajax中的Get和Post Get方式: 用get方式可传送简单数据,但大小一般限制在1KB下,数据追加到url中发送(http的header传送),也就是说,浏览器将各个表单字段元素及 其数据按照URL参数的格...

Junn
2012/11/26
0
0
JQuery & Django Ajax 踩过的坑

JQuery & Django Ajax 踩过的坑 现在做一个数据可视化的项目,由于核心的机器学习代码使用python写的,数据可视化用的是D3.js 现在要给老大们展示这个结果,于是简单搭建了一个web applicati...

Allocator
2017/09/12
0
0
ThinkPHP操作基础(三)

1.配置项:‘TMPLFILEDERP’=>'':用于减少模板路径层次。但是要将模板文件命名为:控制器名模板名.html的形式;如:Index_index.html。 2.由于使用AJAX提交数据的时候,我们要使用到处理器的路...

笨小熊
2014/08/04
0
0
三日php之路 -- 第二,三天(php知识要点)

一、基础 (1)数组 // 数组的创建$arr = array("apple", "banana"); $arr = array("f1"=>"apple", "f2"=>"banana"); // 在php5.4之后 可以使用 $arr = [1,2,3]; // 对于数组的遍历$arr_len ......

明天以后
2014/09/29
0
0
LiliComeOn/L-AJAX

##当前工程默认是示例1可以使用。 若需使用示例0 请引入call.js 代替callMobile.js ## call.js 解决ajax跨域请求的浏览器兼容问题 ie8、9 ajax 跨域 问题描述 avalon.ajax只对ie10以下的get...

LiliComeOn
2015/03/28
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

打印斐波那契数

package com.jerry.ch04;public class PrintFibonacci {public static void main(String[] args) {for (int i=0; i<10; i++) {System.out.print(fib(i) + " ");}......

JerryNing
8分钟前
0
0
shell编程

一、shell脚本介绍

人在艹木中
8分钟前
0
0
istio 0.8 遥测 案例

==============遥测===================================== 演示如何从网格中收集遥测信息。 分布式跟踪。如何配置代理以向Zipkin或Jaeger发送跟踪请求 收集度量标准和日志。此任务说明如何配...

xiaomin0322
10分钟前
0
0
ND4J求多元线性回归以及GPU和CPU计算性能对比

上一篇博客《梯度下降法求多元线性回归及Java实现》简单了介绍了梯度下降法,并用Java实现了一个梯度下降法求回归的例子。本篇博客,尝试用dl4j的张量运算库nd4j来实现梯度下降法求多元线性回...

冷血狂魔
11分钟前
0
0
springboot常用注解

@SpringBootApplication: 包含@Configuration、@EnableAutoConfiguration、@ComponentScan 通常用在主类上。 @Service: 用于标注业务层组件。 @RestController: 用于标注控制层组件(如strut...

GoldenVein
18分钟前
1
0
如何进行大数据的入门级学习?

不知道你是计算机专业应届生还是已经从业者。总之,有java基础的学生学习大数据会轻松很多,零基础的小白都需要从java和linux学起。 如果你是一个学习能力特别强,而且自律性也很强的人的话可...

董黎明
31分钟前
0
0
使用Parcelable传递复杂参数

最近做AIDL传递对象,对象必须实现Parcelable的方法才可以被传递。 @Override    public int describeContents() {//这个 默认返回0就行了。        return 0;    }    ...

火云
32分钟前
0
0
十大Intellij IDEA快捷键

Intellij IDEA中有很多快捷键让人爱不释手,stackoverflow上也有一些有趣的讨论。每个人都有自己的最爱,想排出个理想的榜单还真是困难。以前也整理过Intellij的快捷键,这次就按照我日常开发...

HJCui
42分钟前
0
0
word 使用mathtype 编写 数学公式

下载安装,这个链接命名。。。。 http://www.mathtype.cn/xiazai.html 安装之后会多出一个选项 使用内联方式插入图表 编写公式的界面 设置支持latex 语法 输入公式回车就可以看到结果...

阿豪boy
今天
0
0
Promise

定义 Promise是异步编程的一种解决方案,所谓Promise就是一个容器,里面保存着某个未来才会结束的事件(通常是一个一步操作)的结果。 特点: 2.1 对象的状态不受外界影响,三种状态pending...

litCabbage
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部