基于JQuery的Ajax请求模板:$.post(),$.getJSON(),$.get(),$.ajax()

本文将列举常用的基于JQuery的Ajax请求模板。列举的先后顺序按照我平常使用的频率。

1.post请求:$.post()

模板

<script>
        $.post(
            '[午参数的请求url]',
            '[传参的json串形式]',
            function (result) {
             	//这里写回调函数，result为后台的返回值 
            }
        );
</script>

示例

<script>
    //根据账号密码登录
    function loginByAccount() {
        $.post(
            '${pageContext.request.contextPath}/front/customer/loginByAccount',
                $('#frmLoginByAccount').serialize(),
            function (result) {
                //登录提示消息
                layer.msg(result.message,{time:1000});
                if(result.status == 1){
                    //局部刷新
                    $('#navbarInfo').html(template('welcome',result.data));
                    $('#loginModal').modal('hide');
                    $('#loginMessage').html();
                }
            }
        )
    }
</script>

2.getJSON请求:$.getJSON()

模板

<script>
        $.get(
            '[无参数的请求url]',
			'[传参的json串形式]',
            function (result) {
             	//这里写回调函数，result为后台的返回值 
            }
        );
</script>

示例

<script>
     //短信登录-获取短信验证码
    function sendVerificationCode(btn) {
        $.getJSON(
            '${pageContext.request.contextPath}/front/sms/sendVerificationCode',
            {'phone':'10086'},
            function (result) {
                        layer.msg(result.message);
                    }
            }
        );
    }
</script>

        我们可以看到，$.post()和$.getJSON()的形式一模一样。唯一的区别在于前者发送的是post请求，对传入的字符串长度无要求,传入参数在地址栏不可见,传输较慢；后者发送的是get请求,对URL长度有限制（不同浏览器和不同接受服务器均有差异，以IE浏览器为例，不要超过2083字符），传入参数在地址栏可见，传输快。
        一般情况下，$.post()和$.getJSON()就可以满足传输json串的ajax请求需要了。

3.get请求:$.get()

模板

<script>
        $.get(
            '[带参数或者无参数的请求url]',
            function (result) {
             	//这里写回调函数，result为后台的返回值 
            }
        );
</script>

示例

<script>
       //退出登录
    function logout(){
      $.get(
            '${pageContext.request.contextPath}/front/customer/logout',
            function (result) {
                if(result.status == 1){
                    //局部刷新
                   $('#navbarInfo').html(template('login'));
                }
            }
        );
    }
</script>

$.get() 是得到这个url指向的网址的内容， 内容可以是任意类型的数据， 通常是HTML
如果我们已经知道请求的网址返回的是一段JSON， 那么用$.getJSON(), jQuery会帮我们把取的的JSON字符串转换成js 对象

4.通用请求：$.ajax()

模板

<script>
	$.ajax({
	      type: "POST",      //data 传送数据类型。
	      dataType: 'json',  // 返回数据的数据类型json
	      url: "/site/abc",  
	      cache: false,      
	      data: {tel: tel},  //传送的数据
	      error:function(){	
	       	//数据传输失败时使用
	      },
	      success: function (data) {
	     	//数据传输成功时的回调函数
	      }
	})
</script>

我基本不会用到这种形式。但如果需要在数据传输失败时进行相关处理操作，还是需要使用这种形式。