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 必须带这脑子学。做这个必须让自己,问自己为什么做这个。
加油!!!
jq的ajax交互封装的更多相关文章
- JQ中的Ajax的封装
1.认识JQ中ajax的封装 jQ 对于ajax的封装有两层实现:$.ajax 为底层封装实现:基于 $.ajax ,分别实现了$.get 与$.post 的高层封装实现: 2.Ajax的底 ...
- ajax的封装——jq简化版
最近在复习ajax的知识,练习了下ajax的封装,此处做下笔记 废话不多说,直接代码 //发请求 //此处的url为请求地址,type为请求方式,success为请求成功的回调函数 myaxios({ ...
- 原生态AJAX详解和jquery对AJAX的封装
AJAX: A :Asynchronous [eI`sinkrenes] 异步 J :JavaScript JavaScript脚本语言 A: And X :XML 可扩展标记语言 AJAX现在 ...
- 关于jQ的Ajax操作
jQ的Ajax操作 什么是AJAX AJAX = 异步的javascript和XML(Asynchronous Javascript and XML) 它不是一门编程语言,而是利用JavaScript ...
- jQuery-实现简单的Ajax请求封装
封装的意义在于复用,在于减少重复的代码. 我在项目中做了简单的Ajax请求封装,实现方式如下: //封装Ajax请求 $.extend({ ajaxDirect:function(url,type,d ...
- jq的ajax方法
相较与js异步对象的繁琐,jq的ajax对象结构更加清晰 一:ajax对象简述 ajax(Asynchronous JavaScript and XML),异步的xml和js对象,主要用于在不刷新全局 ...
- ThinkPHP中使用ajaxReturn进行ajax交互
以管理员登录为例来介绍下$this->ajaxReturn与模板页进行ajax交互使用方法 首先看PHP控制器的处理,在application/Admin/Controller/LoginCon ...
- struts2 的验证框架validation如何返回json数据 以方便ajax交互
struts2 的验证框架validation简单,好用,但是input只能输出到jsp页面通过struts2的标签<s:fielderror />才能取出,(EL应该也可以). 如果使 ...
- struts2中使用json插件实现ajax交互
json插件可以简单的实现ajax交互,避免了使用struts2-dojo-plugin.jar包时带来的struts2.x版本冲突问题.并且减少了使用ajax标签时需要的繁琐的配置包括web.xml ...
随机推荐
- 异常解决 Unable to write generated Java files for schemas: null
错误是在使用cxf调用其他系统接口时报出的.而且问题很诡异,只有服务器调用时才报错,本地直接写main方法直接调用却正常的.以下是异常的堆栈: ERROR c.k.p.webservice.WebSe ...
- 【bug小记】应用跳转白屏
tv端项目 测试那边反馈我们的应用跳转到别的应用,再跳转回来会出现白屏的情况. 其实这个原因很简单,就是系统内存不足了把我们的app进程销毁了 所以再回到我们的应用的时候需要重新绘制,而这个" ...
- tiny4412 --Uboot移植(3) 时钟
开发环境:win10 64位 + VMware12 + Ubuntu14.04 32位 工具链:linaro提供的gcc-linaro-6.1.1-2016.08-x86_64_arm-linux-g ...
- 使用U盘安装CentOS7
为了在公司的旧笔记本电脑上安装centos供自己学习使用折腾了两天,终于在看了https://www.cnblogs.com/yeeo1/p/7306611.html这篇博文后装上了, 以下内容为转载 ...
- mysql sql_mode=only_full_group_by错误解析
实测,解决问题; 1.错误提示: 2.检查参数设置: 3.mysql的配置文件my.cnf里面可以修改, 但是,改完以后,你检查所有的参数设置都是对的,就是运行不了.怎么办?怎么办? 4.如果还是不行 ...
- 批量屏蔽符合条件的IP地址,支持添加白名单,IP段,增量,大于指定次数的IP
批量屏蔽符合条件的IP地址,支持添加白名单,IP段,增量 大概的思路是利用sh,从日志中提取出来对应的IP地址,然后再交由python进行对比,判断,最终将需要添加至iptables列表中的IP写入到 ...
- gitlab 10安装
电脑环境:centos6.2+gitlab10.0 gitlab10.0 (gitlab-ce-10.0.0-ce.0.el6.x86_64.rpm)下载地址:https://mirrors.tuna ...
- java多线程系列12 ConcurrentHashMap CopyOnWriteArrayList 简介
我们知道 ,hashmap 和 arraylist 是线程不安全的 在多线程环境下有数据安全问题, 当然 我们可以通过Collections的一些方法把他们变成线程安全的, Collections.s ...
- Asterisk 11 chan_sip.c: Failed to authenticate device 看不到IP的问题
Asterisk 11 chan_sip.c: Failed to authenticate device 看不到IP的问题 没有验证过 原文地址 http://www.coochey.net/? ...
- PDF 转 PNG JPG 操作
# gs gs -dSAFER -dBATCH -dNOPAUSE -r300 -dTextAlphaBits=4 -dGraphicsAlphaBits=4 -sDEVICE=pnggray - ...