jq的ajax交互封装

jq封装的ajax，然后 在此前和此后都是很多要考虑的  ，何不 想想构思封装下。

下面：

　　基本上网页都存在各种ajax，使得网页变得更加易于操作。

举个长长的例子吧：

　　

<input  type="button" value="↑" onclick="changeBidSign('netcreditadmin/bidSignDownA.action',${bidlists.bidId},'UP')">

这是一个向上的按钮--js方法，

changeBidSign（action，id，status）；status存在，使得此方法同样可以运用到 Down Left  之类

下面介绍js，整体构思：

admin：是我写 具体复杂的操作的js方法

ajax——common 

　　ajaxfun：写上简单的ajax提交类似：

　　

/**
 * 简单的form表单提交
 */
function simpleSub(formId, callbackFun){
	//var DivRef = document.getElementById("Loader");
	var options = { 
		dataType: 'json',
//		beforeSubmit: function(){
//			//提交开始前使按钮不可用
//			$("#"+buttonId).attr("disabled", "true");
//			DivRef.style.display = "block"; 
//		},
		success: callbackFun //此方法封装在callbackfun.js
	};
	$("#"+formId).ajaxSubmit(options); 
	return false;
}

　　callbackfun.js： 写在response回调函数

 进程的分析如下：
　　前台ajax交互，无非是data不同，要么前面逻辑处理。  所以 分3部分

　1.　data  和 逻辑处理　 写在同一个js里面。
　2.　ajax基本共用，
　3.　回调函数兴许，有时候 div 等局部刷新。所以这里callbackFun 一个远不够。这里归一类。
data 和 逻辑：
　　

function batchDelete(checkboxName, delTagAction, listTagAction, rel){
    var ids=new Array();
    if($("input[name="+checkboxName+"]:checked").size()==0){
        alertMsg.warn("请至少选择一条需要删除的数据！");
        return false;
    }
    $("input[name="+checkboxName+"]:checked").each(function(i,obj){
        ids[i]=$(obj).val();
    });
    var idStr=ids.join("-");
    //alert(idStr);
    if (confirm("删除的数据将放入回收站,确定继续")) {

　　　　　　dialogAjaxSimple(delTagAction,idStr);

 　　　}else{ return false; 
　　}
}

 

 

 

ajax基本共用：

function dialogAjaxSimple(tagAction,idStr){ 
$.ajax({
            url:tagAction,
            data:{
                sendTime:(new Date()).getTime(),
                idStr:idStr
            },
            type:"post",
            async:false,
            dataType:"json",
            success:reponse
        });
}

 

回调函数兴许，有时候 div 等局部刷新:

//tab页面的ajax回调
function response(data){
    if(data.success == true){
        alertMsg.correct(data.msg);
        var $box = $("#"+data.rel+"");
        $box.ajaxUrl({
            type:"POST", url:data.url, data: null, callback:function(){
                $box.find("[layoutH]").layoutH();
            }
        });
    }else{
        alertMsg.error(data.reason);
    }
}

 

在后台，我想说的也有：
　　两个文件，一个是类，一个是reponse后的页面。
类先说吧：
　　

clientResponse = successResponse("操作成功",
                "netcreditadmin/getbidListA.action", "bidId");

 这个是我 getset的字符串clientResponse。

　　

···/**
     * ajax返回的json对象
     * */
    protected String failResponse(String reason) {
        String response = "{\"success\": false, \"reason\":\"" + reason + "\"}";
        return response;
    }

    protected String successResponse(String msg, String url, String rel) {
        String response = "{\"success\": true,\"msg\":\"" + msg
                + "\",\"url\":\"" + url + "\",\"rel\":\"" + rel + "\"}";
        return response;
    }

 

先看配置文件吧：
　　

    <action name="bidSignDownA" class="xidian.sl.netcredit.action.admin.BasicDataA"
            method="bidSignDownA_">
                <result name="success">/WEB-INF/ajax_response/client.jsp</result>
        </action>

 

ajax_response/client.jsp：
　　

<%@ taglib prefix="s" uri="/struts-tags"%>
<% response.setCharacterEncoding("UTF-8"); %>
<% System.out.println(response);%>
<s:property value="clientResponse" escape="false"/>

 到这里终于 全部过程讲了一遍。适合学过jq的人。

这封装不单单这一种，但是我想说，这慢慢改 慢慢改都会可以的。java之路皆美也，共同开发。

学jq，js 学java 必须带这脑子学。做这个必须让自己，问自己为什么做这个。

加油！！！