首页 技术 正文
技术 2022年11月21日
0 收藏 347 点赞 3,274 浏览 2683 个字

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

下面:

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

举个长长的例子吧:

  

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

这是一个向上的按钮–js方法,

changeBidSign(action,id,status);status存在,使得此方法同样可以运用到 Down Left  之类下面介绍js,整体构思:

jq的ajax交互封装

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 必须带这脑子学。做这个必须让自己,问自己为什么做这个。

加油!!!

 
相关推荐
python开发_常用的python模块及安装方法
adodb:我们领导推荐的数据库连接组件bsddb3:BerkeleyDB的连接组件Cheetah-1.0:我比较喜欢这个版本的cheeta…
日期:2022-11-24 点赞:878 阅读:8,965
Educational Codeforces Round 11 C. Hard Process 二分
C. Hard Process题目连接:http://www.codeforces.com/contest/660/problem/CDes…
日期:2022-11-24 点赞:807 阅读:5,486
下载Ubuntn 17.04 内核源代码
zengkefu@server1:/usr/src$ uname -aLinux server1 4.10.0-19-generic #21…
日期:2022-11-24 点赞:569 阅读:6,331
可用Active Desktop Calendar V7.86 注册码序列号
可用Active Desktop Calendar V7.86 注册码序列号Name: www.greendown.cn Code: &nb…
日期:2022-11-24 点赞:733 阅读:6,114
Android调用系统相机、自定义相机、处理大图片
Android调用系统相机和自定义相机实例本博文主要是介绍了android上使用相机进行拍照并显示的两种方式,并且由于涉及到要把拍到的照片显…
日期:2022-11-24 点赞:512 阅读:7,747
Struts的使用
一、Struts2的获取  Struts的官方网站为:http://struts.apache.org/  下载完Struts2的jar包,…
日期:2022-11-24 点赞:671 阅读:4,781