记录jquery的ajax

1、直接干货

  ajax很简单jquery有很好的支持,原生js就不写了。总的说常用的有3个方法

  $.post

  $.get

  $.ajax

       具体参数参考教程http://www.runoob.com/jquery/ajax-post.html

  $.get\$.post主要4个参数url,params,callback,type用法在教程很详细我就不说了

  主要说的有1点,get方法很方便,可以用,post方法尽量少用,在spring框架下接收参数不是很舒服,不能直接用对象接收参数。

在项目应用中常要这样接收参数

public String login(@RequestBody User user, HttpServletRequest request, HttpServletResponse response) throws UnsupportedEncodingException{

直接用$.post接收不到User对象,只能单个传参,很麻烦,所以这里推荐用$.ajax方法

2、

        function submitForm(){
            /*<![CDATA[*/
                 var url = /*[[@{/user/login}]]*/null;
                 if ([[${redirectURL}]] != null){
                    var redirectURL = "?redirectURL="+/*[[${redirectURL}]]*/;
                     url = url + redirectURL;
                 }
                var params = $("#userForm").serializeJson();
                if ($("#userMobile").val() == ""){
                    alert("手机号为空。");
                    $("#userMobile").focus();
                    return;
                }
                if ($("#userPassword").val() == ""){
                    alert("密码为空。");
                    $("#userPassword").focus();
                    return;
                }
                $.ajax({ 
                    type:"POST", 
                    url:url, 
                    dataType:"json",      
                    contentType:"application/json;charset=utf-8",               
                    data:params, 
                    success:function(result){
                        if (result.redirectURL != undefined){
                            location.href = result.redirectURL;
                        }else{
                            if (result.status == "200"){
                                location.href = "http://localhost";
                            }else{
                                alert(result.message);
                            }     
                        }      
                    } 
                 });
                /*]]>*/  
             }

代码中标红的就是将form表单中的数据对象化,这样上面的服务器代码就可以直接用对象接收了,很方便。

给出js的serializeJson 代码如下:

// 把json字符串封装成json对象
(function($) {
    $.fn.serializeJson = function() {
        var serializeObj = {};
        var array = this.serializeArray();
        var str = this.serialize();
        $(array).each(
                function() {
                    if (serializeObj[this.name]) {
                        if ($.isArray(serializeObj[this.name])) {
                            serializeObj[this.name].push(this.value);
                        } else {
                            serializeObj[this.name] = [
                                    serializeObj[this.name], this.value ];
                        }
                    } else {
                        serializeObj[this.name] = this.value;
                    }
                });
        return JSON.stringify(serializeObj);
    };
})(jQuery);

 

posted on 2017-08-04 16:24  PPBoy  阅读(188)  评论(0编辑  收藏  举报

导航