$.ajax$.postfrom表单序列化工具

Posted 2020-08-14

$.ajax\$.post

<script type="text/javascript" language="javascript" src="js/jquery-1.8.3.js" ></script>
<script type="text/javascript">
            //使用Ajax($.ajax)调用
            function ajax(){
                $.ajax({
                    type:"post",
                    url:"mvc/testAjax.html",
                    cache:false,
                    data:"name=abc",
                    dataType:"text",
                    success:function(result){
                        alert("成功！"+result);
                    },
                    error:function(){
                    
                    }
                });
            }
            //使用Ajax($.post)调用
            function post(){
                $.post(
                    "mvc/testAjax.html",
                    {name:"def"},
                    function(result){
                        alert("成功！"+result)
                    }
                );
            }
</script>

表单序列化工具

<script type="text/javascript" language="javascript" src="js/jquery-1.8.3.js" ></script>
<script type="text/javascript">
        /**
         * 序列化表单的函数（工具）
         * 
         * 使用方法：$.ajax或$.post
         * data:serializeForm($("#form1")),
         */
           function serializeForm(form){ //form是jquery对象
                var obj = {};
                $.each(form.serializeArray(),function(index){
                    if(obj[this[‘name‘]]){
                        obj[this[‘name‘]] = obj[this[‘name‘]] + ‘,‘+this[‘value‘];
                    } else {
                        obj[this[‘name‘]] =this[‘value‘];
                    }
                });
                return obj;
           }
</script

 

自制Ajax函数工具，提高重复利用。

<script type="text/javascript" language="javascript" src="js/jquery-1.8.3.js" ></script>
<script type="text/javascript">
         /**
          * 调用ajax函数工具
          * @returns
          */
            function login(){
                ajaxBase("loginServlet?method=login","name=zs&password=a123","login");
            }

          /** ajax函数工具类
            * @param url:地址
            * @param data:请求参数
            * @param method:方法信号，作用判断进行什么操作
            */
           function ajaxBase(url,data,method){
             $.ajax({
                 type:‘post‘,
                  url:‘‘+url+‘‘,
                  cache:false,
                  data:data,
                  dataType:‘text‘,
                  success:function(result){
                      alert("ajax函数工具类:success");
                      /** 调用请求成功后的操作函数 */
                      success(result,method);
                  },
                  error:function(){
                      alert("ajax函数工具类:error");
                  }
             });
           }
          
           /** 根据method方法信号判断进行什么操作 
            * @param result:服务端响应的数据
            * @param method:方法信号，作用判断进行什么操作
            */
          function success(result,method){
              if(method=="login"){
                  alert(result);
              }
          }
</script>