728 lines
26 KiB
HTML
728 lines
26 KiB
HTML
<#def title = "AJAX"/>
|
||
<#def keyword = "ZhiqimUI"/>
|
||
<#def desc = " AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术"/>
|
||
<#def prevUrl = "flexcopy.htm"/>
|
||
<#def nextUrl = "drag.htm"/>
|
||
${zhiqim_com_header()}
|
||
${zhiqim_com_topnav("document")}
|
||
|
||
<script>
|
||
function doChange(tabnav)
|
||
{
|
||
doUpdateCode(Z(tabnav));
|
||
}
|
||
|
||
function doUpdateCode($this)
|
||
{//更新代码
|
||
var html = $this.find("section > div").htmlt();
|
||
$this.find("section > div").next("div > span").html(html);
|
||
}
|
||
</script>
|
||
|
||
<!--容器开始 -->
|
||
<div id="container" class="container">
|
||
<!--边导航-->
|
||
${zhiqim_com_ui("tutorial", "ui", "tool", "ajax")}
|
||
|
||
<!--主体-->
|
||
<div id="mainbody" class="mainbody">
|
||
${zhiqim_com_breadcrumb("文库", "教程", "Ajax")}
|
||
<div class="content">
|
||
|
||
<#-- 标题 -->
|
||
<div class="z-relative-left z-w100p z-pd16 z-bg-blue z-px18 z-lh200p z-bold" style="border-left:5px solid #2293e4">
|
||
<p class="z-text-blue">AJAX：</p>
|
||
<p class="z-color-333" style="text-indent:38px;">
|
||
AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。
|
||
知启蒙AJAX采用面向RMI的概念设计，通过指定类和方法，传入参数对应方法的参数，通过RMI访问JAVA类的方法获取执行结果。
|
||
</p>
|
||
</div>
|
||
|
||
<#-- 一、调用成功，回调函数（无参数的方法） -->
|
||
<div class="tutorial title">一、调用成功，回调函数（无参数的方法）</div>
|
||
|
||
<div class="z-tabnav z-bordered" data-role="z-tabnav" onchange="doChange(this);">
|
||
<nav>
|
||
<ul class="zi-float-left">
|
||
<li class="z-active">示例</li>
|
||
<li>代码</li>
|
||
<li>说明</li>
|
||
</ul>
|
||
</nav>
|
||
<section style="min-height:150px;">
|
||
<div class="z-active z-pd10 z-px16" style="padding-top:40px">
|
||
<!-- 编写AJAX的函数 -->
|
||
<script>
|
||
function doTestSuccess()
|
||
{
|
||
var ajax = new Z.Ajax();
|
||
ajax.setContextPath("${context.getContextPath()}");
|
||
ajax.setClassName("ZuiPresenter");
|
||
ajax.setMethodName("doTestSuccess");
|
||
ajax.setFailureAlert();
|
||
ajax.setSuccess(function(){
|
||
Z.alert(this.responseText);
|
||
});
|
||
ajax.setLoading(document, true);
|
||
ajax.execute();
|
||
}
|
||
</script>
|
||
<!-- 编写AJAX的点击调用 -->
|
||
<a href="javascript:void(0);" onclick="doTestSuccess();">点我执行[doTestSuccess]函数</a>
|
||
</div>
|
||
<div class="z-relative-left z-w100p z-pd10">
|
||
<span class="z-text-prewrap z-pre"></span>
|
||
</div>
|
||
|
||
<div class="z-pd10 z-px16 z-lh200p">
|
||
1、定义一个AJAX调用函数，设置类名或类别名、类方法和回调函数，然后执行<br>
|
||
2、在页面上设置点击执行函数，通过设置callback回调得到responseStatus和responseText<br>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
|
||
<#-- 二、调用成功，回调函数（带参数、使用类别名@AnAlias） -->
|
||
<div class="tutorial title">二、调用成功，回调函数（带参数、使用类别名@AnAlias）</div>
|
||
|
||
<div class="z-tabnav z-bordered" data-role="z-tabnav" onchange="doChange(this);">
|
||
<nav>
|
||
<ul class="zi-float-left">
|
||
<li class="z-active">示例</li>
|
||
<li>代码</li>
|
||
<li>说明</li>
|
||
</ul>
|
||
</nav>
|
||
<section style="min-height:150px;">
|
||
<div class="z-active z-pd10 z-px16" style="padding-top:40px">
|
||
<!-- 编写AJAX的函数 -->
|
||
<script>
|
||
function doTestParam()
|
||
{
|
||
var ajax = new Z.Ajax();
|
||
ajax.setContextPath("${context.getContextPath()}");
|
||
ajax.setClassName("ZuiPresenter");
|
||
ajax.setMethodName("doTestParam");
|
||
ajax.addParam("111111");
|
||
ajax.addParam("222222");
|
||
ajax.setCallback(function()
|
||
{
|
||
Z.alert("状态："+this.responseStatus+"\r\n信息："+this.responseText);
|
||
});
|
||
ajax.execute();
|
||
}
|
||
</script>
|
||
<!-- 编写AJAX的点击调用 -->
|
||
<a href="javascript:doTestParam();">点我执行[doTestParam]函数</a>
|
||
</div>
|
||
<div class="z-relative-left z-w100p z-pd10">
|
||
<span class="z-text-prewrap z-pre"></span>
|
||
</div>
|
||
|
||
<div class="z-pd10 z-px16 z-lh200p">
|
||
1、定义一个AJAX调用函数，设置类类别名、类方法和回调函数<br>
|
||
2、通过ajax.addParam();设置参数，参数个数和类型要和后端对应，支持字符串和基本类型
|
||
3、在页面上设置点击执行函数，通过设置callback回调得到responseStatus和responseText<br>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
|
||
<#-- 三、调用成功，显示到元素中（无参数、使用类别名@AnAlias） -->
|
||
<div class="tutorial title">三、调用成功，显示到元素中（无参数、使用类别名@AnAlias）</div>
|
||
|
||
<div class="z-tabnav z-bordered" data-role="z-tabnav" onchange="doChange(this);">
|
||
<nav>
|
||
<ul class="zi-float-left">
|
||
<li class="z-active">示例</li>
|
||
<li>代码</li>
|
||
<li>说明</li>
|
||
</ul>
|
||
</nav>
|
||
<section style="min-height:150px;">
|
||
<div class="z-active z-pd10 z-px16" style="padding-top:40px">
|
||
<!-- 编写AJAX的函数 -->
|
||
<script>
|
||
function doTestSuccess2()
|
||
{
|
||
var ajax = new Z.Ajax();
|
||
ajax.setContextPath("${context.getContextPath()}");
|
||
ajax.setClassName("ZuiPresenter");
|
||
ajax.setMethodName("doTestSuccess");
|
||
ajax.setCallback("successId");
|
||
ajax.execute();
|
||
}
|
||
</script>
|
||
<!-- 编写AJAX的点击调用 -->
|
||
<a href="javascript:doTestSuccess2();">点我执行[doTestSuccess]函数</a><br><br>
|
||
<!-- 编写AJAX的响应结果 -->
|
||
返回内容：<span id="successId"></span>
|
||
</div>
|
||
<div class="z-relative-left z-w100p z-pd10">
|
||
<span class="z-text-prewrap z-pre"></span>
|
||
</div>
|
||
|
||
<div class="z-pd10 z-px16 z-lh200p">
|
||
1、定义一个AJAX调用函数，设置类名或类别名、类方法和回调函数，然后执行<br>
|
||
2、在页面上设置点击执行函数，把结果放置到Z("#"+id)中<br>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
|
||
<#-- 四、调用成功，加载器，后端等待5秒（无参数、使用类别名@AnAlias） -->
|
||
<div class="tutorial title">四、调用成功，加载器，后端等待8秒（无参数、使用类别名@AnAlias）</div>
|
||
|
||
<div class="z-tabnav z-bordered" data-role="z-tabnav" onchange="doChange(this);">
|
||
<nav>
|
||
<ul class="zi-float-left">
|
||
<li class="z-active">示例</li>
|
||
<li>代码</li>
|
||
<li>说明</li>
|
||
</ul>
|
||
</nav>
|
||
<section style="min-height:150px;">
|
||
<div class="z-active z-pd10 z-px16" style="padding-top:40px">
|
||
<!-- 编写AJAX的函数 -->
|
||
<script>
|
||
function doTestLoading()
|
||
{
|
||
var ajax = new Z.Ajax();
|
||
ajax.setContextPath("${context.getContextPath()}");
|
||
ajax.setClassName("ZuiPresenter");
|
||
ajax.setMethodName("doTestLoading");
|
||
ajax.setCallback(function()
|
||
{
|
||
Z.alert("状态："+this.responseStatus+"\r\n信息："+this.responseText);
|
||
});
|
||
ajax.setLoading(document, true);
|
||
ajax.execute();
|
||
}
|
||
</script>
|
||
<!-- 编写AJAX的点击调用 -->
|
||
<a href="javascript:doTestLoading();">点我执行[doTestLoading]函数</a><br><br>
|
||
</div>
|
||
<div class="z-relative-left z-w100p z-pd10">
|
||
<span class="z-text-prewrap z-pre"></span>
|
||
</div>
|
||
|
||
<div class="z-pd10 z-px16 z-lh200p">
|
||
1、定义一个AJAX调用函数，设置类类别名、类方法和回调函数<br>
|
||
2、通过ajax.setLoading(document, true);设置全屏加载器且遮罩，然后执行<br>
|
||
3、在页面上设置点击执行函数，通过设置callback回调得到responseStatus和responseText<br>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
|
||
<#-- 五、调用成功，指定加载器元素，后端等待5秒（无参数、使用类别名@AnAlias） -->
|
||
<div class="tutorial title">五、调用成功，指定加载器元素，后端等待8秒（无参数、使用类别名@AnAlias）</div>
|
||
|
||
<div class="z-tabnav z-bordered" data-role="z-tabnav" onchange="doChange(this);">
|
||
<nav>
|
||
<ul class="zi-float-left">
|
||
<li class="z-active">示例</li>
|
||
<li>代码</li>
|
||
<li>说明</li>
|
||
</ul>
|
||
</nav>
|
||
<section style="min-height:150px;">
|
||
<div class="z-active z-pd10 z-px16" style="padding-top:40px">
|
||
<!-- 编写AJAX的函数 -->
|
||
<script>
|
||
function doTestLoading2()
|
||
{
|
||
var ajax = new Z.Ajax();
|
||
ajax.setContextPath("${context.getContextPath()}");
|
||
ajax.setClassName("ZuiPresenter");
|
||
ajax.setMethodName("doTestLoading");
|
||
ajax.setCallback("testLoading2");
|
||
ajax.setLoading("testLoading2");
|
||
ajax.execute();
|
||
}
|
||
</script>
|
||
<!-- 编写AJAX的点击调用 -->
|
||
<a href="javascript:doTestLoading2();">点我执行[doTestLoading2]函数</a><br><br>
|
||
|
||
<!-- 指定加载器的位置 -->
|
||
<div id="testLoading2" class="z-w100p z-h100 z-text-center z-bd z-red" style="line-height:100px;"></div>
|
||
</div>
|
||
<div class="z-relative-left z-w100p z-pd10">
|
||
<span class="z-text-prewrap z-pre"></span>
|
||
</div>
|
||
|
||
<div class="z-pd10 z-px16 z-lh200p">
|
||
1、定义一个AJAX调用函数，设置类类别名、类方法和回调函数<br>
|
||
2、通过ajax.setLoading("testLoading2");设置在testLoading2上显示加载器无遮罩，然后执行<br>
|
||
3、如果需要遮罩层，设置为ajax.setLoading("testLoading2", true);
|
||
4、在页面上设置点击执行函数，通过设置callback回调得到responseStatus和responseText<br>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
|
||
<#-- 六、调用成功，自定义加载器，后端等待5秒（无参数、使用类别名@AnAlias） -->
|
||
<div class="tutorial title">六、调用成功，自定义加载器，后端等待8秒（无参数、使用类别名@AnAlias）</div>
|
||
|
||
<div class="z-tabnav z-bordered" data-role="z-tabnav" onchange="doChange(this);">
|
||
<nav>
|
||
<ul class="zi-float-left">
|
||
<li class="z-active">示例</li>
|
||
<li>代码</li>
|
||
<li>说明</li>
|
||
</ul>
|
||
</nav>
|
||
<section style="min-height:150px;">
|
||
<div class="z-active z-pd10 z-px16" style="padding-top:40px">
|
||
<!-- 编写AJAX的函数 -->
|
||
<script>
|
||
function doTestLoading3()
|
||
{
|
||
var ajax = new Z.Ajax();
|
||
ajax.setContextPath("${context.getContextPath()}");
|
||
ajax.setClassName("ZuiPresenter");
|
||
ajax.setMethodName("doTestLoading");
|
||
ajax.setCallback("testLoading3");
|
||
ajax.setLoading(Z.loading({target: "testLoading3", shadow: true, position: 1}));
|
||
ajax.execute();
|
||
}
|
||
</script>
|
||
<!-- 编写AJAX的点击调用 -->
|
||
<a href="javascript:doTestLoading3();">点我执行[doTestLoading3]函数</a><br><br>
|
||
|
||
<!-- 指定加载器的位置 -->
|
||
<div id="testLoading3" class="z-w100p z-h100 z-text-center z-bd z-red" style="line-height:100px;"></div>
|
||
</div>
|
||
<div class="z-relative-left z-w100p z-pd10">
|
||
<span class="z-text-prewrap z-pre"></span>
|
||
</div>
|
||
|
||
<div class="z-pd10 z-px16 z-lh200p">
|
||
1、定义一个AJAX调用函数，设置类类别名、类方法和回调函数<br>
|
||
2、通过Z.loading()函数自定义加载器，然后通过ajax.setLoading();设置到Z.Ajax中<br>
|
||
3、在页面上设置点击执行函数，通过设置callback回调得到responseStatus和responseText<br>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
|
||
<#-- 七、调用失败（无参数、使用类别名@AnAlias） -->
|
||
<div class="tutorial title">七、调用失败（无参数、使用类别名@AnAlias）</div>
|
||
|
||
<div class="z-tabnav z-bordered" data-role="z-tabnav" onchange="doChange(this);">
|
||
<nav>
|
||
<ul class="zi-float-left">
|
||
<li class="z-active">示例</li>
|
||
<li>代码</li>
|
||
<li>说明</li>
|
||
</ul>
|
||
</nav>
|
||
<section style="min-height:150px;">
|
||
<div class="z-active z-pd10 z-px16" style="padding-top:40px">
|
||
<!-- 编写AJAX的函数 -->
|
||
<script>
|
||
function doTestError()
|
||
{
|
||
var ajax = new Z.Ajax();
|
||
ajax.setContextPath("${context.getContextPath()}");
|
||
ajax.setClassName("ZuiPresenter");
|
||
ajax.setMethodName("doTestError");
|
||
ajax.setCallback(function()
|
||
{
|
||
Z.alert("状态："+this.responseStatus+"\r\n信息："+this.responseText);
|
||
});
|
||
ajax.execute();
|
||
}
|
||
</script>
|
||
<!-- 编写AJAX的点击调用 -->
|
||
<a href="javascript:doTestError();">点我执行[doTestError]函数</a>
|
||
</div>
|
||
<div class="z-relative-left z-w100p z-pd10">
|
||
<span class="z-text-prewrap z-pre"></span>
|
||
</div>
|
||
|
||
<div class="z-pd10 z-px16 z-lh200p">
|
||
1、定义一个AJAX调用函数，设置类类别名、类方法和回调函数<br>
|
||
2、在页面上设置点击执行函数，通过设置callback回调得到responseStatus和responseText<br>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
|
||
<#-- 八、调用异常（无参数、使用类别名@AnAlias） -->
|
||
<div class="tutorial title">八、调用异常（无参数、使用类别名@AnAlias）</div>
|
||
|
||
<div class="z-tabnav z-bordered" data-role="z-tabnav" onchange="doChange(this);">
|
||
<nav>
|
||
<ul class="zi-float-left">
|
||
<li class="z-active">示例</li>
|
||
<li>代码</li>
|
||
<li>说明</li>
|
||
</ul>
|
||
</nav>
|
||
<section style="min-height:150px;">
|
||
<div class="z-active z-pd10 z-px16" style="padding-top:40px">
|
||
<!-- 编写AJAX的函数 -->
|
||
<script>
|
||
function doTestException()
|
||
{
|
||
var ajax = new Z.Ajax();
|
||
ajax.setContextPath("${context.getContextPath()}");
|
||
ajax.setClassName("ZuiPresenter");
|
||
ajax.setMethodName("doTestException");
|
||
ajax.setCallback(function()
|
||
{
|
||
Z.alert("状态："+this.responseStatus+"\r\n信息："+this.responseText);
|
||
});
|
||
ajax.execute();
|
||
}
|
||
</script>
|
||
<!-- 编写AJAX的点击调用 -->
|
||
<a href="javascript:doTestException();">点我执行[doTestException]函数</a>
|
||
</div>
|
||
<div class="z-relative-left z-w100p z-pd10">
|
||
<span class="z-text-prewrap z-pre"></span>
|
||
</div>
|
||
|
||
<div class="z-pd10 z-px16 z-lh200p">
|
||
1、定义一个AJAX调用函数，设置类类别名、类方法和回调函数<br>
|
||
2、在页面上设置点击执行函数，通过设置callback回调得到responseStatus和responseText<br>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
|
||
<#-- 九、拦截器，未通过显示未通过信息（无参数、使用类别名@AnAlias） -->
|
||
<div class="tutorial title">九、拦截器，未通过显示未通过信息（无参数、使用类别名@AnAlias）</div>
|
||
|
||
<div class="z-tabnav z-bordered" data-role="z-tabnav" onchange="doChange(this);">
|
||
<nav>
|
||
<ul class="zi-float-left">
|
||
<li class="z-active">示例</li>
|
||
<li>代码</li>
|
||
<li>说明</li>
|
||
</ul>
|
||
</nav>
|
||
<section style="min-height:150px;">
|
||
<div class="z-active z-pd10 z-px16" style="padding-top:40px">
|
||
<!-- 编写AJAX的函数 -->
|
||
<script>
|
||
function doTestInterceptor()
|
||
{
|
||
var ajax = new Z.Ajax();
|
||
ajax.setContextPath("${context.getContextPath()}");
|
||
ajax.setClassName("ZuiPresenter");
|
||
ajax.setMethodName("doTestInterceptor");
|
||
ajax.setCallback(function()
|
||
{
|
||
Z.alert("状态："+this.responseStatus+"\r\n信息："+this.responseText);
|
||
});
|
||
ajax.execute();
|
||
}
|
||
</script>
|
||
<!-- 编写AJAX的点击调用 -->
|
||
<a href="javascript:doTestInterceptor();">点我执行[doTestInterceptor]函数</a>
|
||
</div>
|
||
<div class="z-relative-left z-w100p z-pd10">
|
||
<span class="z-text-prewrap z-pre"></span>
|
||
</div>
|
||
|
||
<div class="z-pd10 z-px16 z-lh200p">
|
||
1、定义一个AJAX调用函数，设置类类别名、类方法和回调函数<br>
|
||
2、在页面上设置点击执行函数，通过设置callback回调得到responseStatus和responseText<br>
|
||
3、拦截器由Java后端设置，如：
|
||
<span class="z-text-prewrap z-pre">
|
||
@AnInterceptor("chkAjax1")
|
||
public static void doTestInterceptor(HttpRequest request)
|
||
{
|
||
request.setResponseResult("返回成功信息");
|
||
}
|
||
</span>
|
||
<span class="z-text-prewrap z-pre">
|
||
@AnAlias("chkAjax1")
|
||
public class AjaxChk1Interceptor implements Interceptor
|
||
{
|
||
@Override
|
||
public void intercept(HttpRequest request) throws Exception
|
||
{
|
||
request.setResponseError("拦截器不通过");
|
||
}
|
||
}
|
||
</span>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
|
||
<#-- 十、拦截器，未通过显示未通过信息（同步调用、无参数、使用类别名@AnAlias） -->
|
||
<div class="tutorial title">十、拦截器（同步调用、无参数、使用类别名@AnAlias）</div>
|
||
|
||
<div class="z-tabnav z-bordered" data-role="z-tabnav" onchange="doChange(this);">
|
||
<nav>
|
||
<ul class="zi-float-left">
|
||
<li class="z-active">示例</li>
|
||
<li>代码</li>
|
||
<li>说明</li>
|
||
</ul>
|
||
</nav>
|
||
<section style="min-height:150px;">
|
||
<div class="z-active z-pd10 z-px16" style="padding-top:40px">
|
||
<!-- 编写AJAX的函数 -->
|
||
<script>
|
||
function doTestSyncInterceptor()
|
||
{
|
||
var ajax = new Z.Ajax();
|
||
ajax.setContextPath("${context.getContextPath()}");
|
||
ajax.setSync();
|
||
ajax.setClassName("ZuiPresenter");
|
||
ajax.setMethodName("doTestInterceptor");
|
||
ajax.execute();
|
||
|
||
Z.alert("状态："+ajax.responseStatus+"\r\n信息："+ajax.responseText);
|
||
}
|
||
</script>
|
||
<!-- 编写AJAX的点击调用 -->
|
||
<a href="javascript:doTestSyncInterceptor();">点我执行[doTestSyncInterceptor]函数</a>
|
||
</div>
|
||
<div class="z-relative-left z-w100p z-pd10">
|
||
<span class="z-text-prewrap z-pre"></span>
|
||
</div>
|
||
|
||
<div class="z-pd10 z-px16 z-lh200p">
|
||
1、定义一个AJAX调用函数，设置类类别名、类方法<br>
|
||
2、通过ajax.setSync();设置表示设置成同步等待，同步调用时无需提供回调函数，直接在执行后读出结果即可<br>
|
||
3、在页面上设置点击执行函数，通过设置callback回调得到responseStatus和responseText<br>
|
||
4、拦截器由Java后端设置，如：
|
||
<span class="z-text-prewrap z-pre">
|
||
@AnInterceptor("chkAjax1")
|
||
public static void doTestInterceptor(HttpRequest request)
|
||
{
|
||
request.setResponseResult("返回成功信息");
|
||
}
|
||
</span>
|
||
<span class="z-text-prewrap z-pre">
|
||
@AnAlias("chkAjax1")
|
||
public class AjaxChk1Interceptor implements Interceptor
|
||
{
|
||
@Override
|
||
public void intercept(HttpRequest request) throws Exception
|
||
{
|
||
request.setResponseError("拦截器不通过");
|
||
}
|
||
}
|
||
</span>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
|
||
<#-- 十一、拦截器，未通过跳转到新页面（无参数、使用类别名@AnAlias） -->
|
||
<div class="tutorial title">十一、拦截器，未通过跳转到新页面（无参数、使用类别名@AnAlias）</div>
|
||
|
||
<div class="z-tabnav z-bordered" data-role="z-tabnav" onchange="doChange(this);">
|
||
<nav>
|
||
<ul class="zi-float-left">
|
||
<li class="z-active">示例</li>
|
||
<li>代码</li>
|
||
<li>说明</li>
|
||
</ul>
|
||
</nav>
|
||
<section style="min-height:150px;">
|
||
<div class="z-active z-pd10 z-px16" style="padding-top:40px">
|
||
<!-- 编写AJAX的函数 -->
|
||
<script>
|
||
function doTestInterceptor2()
|
||
{
|
||
var ajax = new Z.Ajax();
|
||
ajax.setContextPath("${context.getContextPath()}");
|
||
ajax.setClassName("ZuiPresenter");
|
||
ajax.setMethodName("doTestInterceptor2");
|
||
ajax.setCallback(function()
|
||
{
|
||
alert("状态:"+this.responseStatus+"\r\n信息:"+this.responseText);
|
||
});
|
||
ajax.execute();
|
||
}
|
||
</script>
|
||
<!-- 编写AJAX的点击调用 -->
|
||
<a href="javascript:doTestInterceptor2();">点我执行[doTestInterceptor2]函数</a>
|
||
</div>
|
||
<div class="z-relative-left z-w100p z-pd10">
|
||
<span class="z-text-prewrap z-pre"></span>
|
||
</div>
|
||
|
||
<div class="z-pd10 z-px16 z-lh200p">
|
||
1、定义一个AJAX调用函数，设置类类别名、类方法和回调函数<br>
|
||
2、在页面上设置点击执行函数，通过设置callback回调得到responseStatus和responseText<br>
|
||
3、拦截器由Java后端设置，如：
|
||
<span class="z-text-prewrap z-pre">
|
||
@AnInterceptor("chkAjax2")
|
||
public static void doTestInterceptor2(HttpRequest request)
|
||
{
|
||
request.setResponseResult("返回成功信息");
|
||
}
|
||
</span>
|
||
<span class="z-text-prewrap z-pre">
|
||
@AnAlias("chkAjax2")
|
||
public class AjaxChk2Interceptor implements Interceptor
|
||
{
|
||
|
||
@Override
|
||
public void intercept(HttpRequest request) throws Exception
|
||
{
|
||
request.setRedirectTop(request.getRootPath("/index.htm"), "拦截器要求,正地跳转到首页");
|
||
}
|
||
}
|
||
</span>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
|
||
<#-- 十二、拦截器，未通过跳转到新页面（同步调用、无参数、使用类别名@AnAlias） -->
|
||
<div class="tutorial title">十二、拦截器，未通过跳转到新页面（同步调用、无参数、使用类别名@AnAlias）</div>
|
||
|
||
<div class="z-tabnav z-bordered" data-role="z-tabnav" onchange="doChange(this);">
|
||
<nav>
|
||
<ul class="zi-float-left">
|
||
<li class="z-active">示例</li>
|
||
<li>代码</li>
|
||
<li>说明</li>
|
||
</ul>
|
||
</nav>
|
||
<section style="min-height:150px;">
|
||
<div class="z-active z-pd10 z-px16" style="padding-top:40px">
|
||
<!-- 编写AJAX的函数 -->
|
||
<script>
|
||
function doTestSyncInterceptor2()
|
||
{
|
||
var ajax = new Z.Ajax();
|
||
ajax.setContextPath("${context.getContextPath()}");
|
||
ajax.setSync();
|
||
ajax.setClassName("ZuiPresenter");
|
||
ajax.setMethodName("doTestInterceptor2");
|
||
ajax.execute();
|
||
|
||
alert("状态:"+ajax.responseStatus+"\r\n信息:"+ajax.responseText);
|
||
}
|
||
</script>
|
||
<!-- 编写AJAX的点击调用 -->
|
||
<a href="javascript:doTestSyncInterceptor2();">点我执行[doTestSyncInterceptor2]函数</a>
|
||
</div>
|
||
<div class="z-relative-left z-w100p z-pd10">
|
||
<span class="z-text-prewrap z-pre"></span>
|
||
</div>
|
||
|
||
<div class="z-pd10 z-px16 z-lh200p">
|
||
1、定义一个AJAX调用函数，设置类类别名、类方法<br>
|
||
2、通过ajax.setSync();设置表示设置成同步等待，同步调用时无需提供回调函数，直接在执行后读出结果即可<br>
|
||
3、在页面上设置点击执行函数，通过设置callback回调得到responseStatus和responseText<br>
|
||
4、拦截器由Java后端设置，如：
|
||
<span class="z-text-prewrap z-pre">
|
||
@AnInterceptor("chkTutorialRedirect")
|
||
public static void doTestInterceptor2(HttpRequest request)
|
||
{
|
||
request.setResponseResult("返回成功信息");
|
||
}
|
||
</span>
|
||
<span class="z-text-prewrap z-pre">
|
||
@AnAlias("chkTutorialRedirect")
|
||
public class AjaxChk2Interceptor implements Interceptor
|
||
{
|
||
|
||
@Override
|
||
public void intercept(HttpRequest request) throws Exception
|
||
{
|
||
request.setRedirectTop(request.getRootPath("/index.htm"), "拦截器要求,正地跳转到首页");
|
||
}
|
||
}
|
||
</span>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
|
||
<#-- AJAX调用参数说明 -->
|
||
<div class="tutorial title">AJAX调用参数说明（请求参数十个，响应结果两个）</div>
|
||
|
||
<table class="z-table z-bordered z-pd10 z-lh200p z-bd-rd8">
|
||
<tr bgcolor="#f5f5f5">
|
||
<td width="20%">参数</td>
|
||
<td width="30%">值</td>
|
||
<td width="*">说明</td>
|
||
</tr>
|
||
<tr>
|
||
<td colspan="3" class="z-text-cyan">请求参数</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="z-samp">contextPath</td>
|
||
<td>默认为空</td>
|
||
<td>当前上下文环境路径，如/admin，默认为空表示根上下文路径</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="z-samp">className</td>
|
||
<td>必须</td>
|
||
<td>调用的类名或类别名，如ZuiPresenter/com.zhiqim.document.tutorial.ui.ZuiPresenter</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="z-samp">methodName</td>
|
||
<td>必须</td>
|
||
<td>调用的类的方法名，如doTestInterceptor</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="z-samp">async</td>
|
||
<td>true</td>
|
||
<td>异常还是同步调用，默认异步，true|false</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="z-samp">params</td>
|
||
<td>[]</td>
|
||
<td>参数数组，可通过addParam();函数设置参数，如addParam("abc");</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="z-samp">callback</td>
|
||
<td>null</td>
|
||
<td>回调函数或回调elem的id<br>
|
||
1、函数的this为Z.Ajax对象，可以通过this.responseStatus和this.responseText获取结果状态和结果文本<br>
|
||
2、回调ID时，填写elem的id，即把this.responseText的值填充到elem中，有三种填充方式，见callbackMethod参数
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="z-samp">callbackMethod</td>
|
||
<td>"html"</td>
|
||
<td>回调ID时的方法，三种"html"|"text"|"val"</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="z-samp">callScript</td>
|
||
<td>true</td>
|
||
<td>是否在AJAX结果的改变重置由data-role的缓存，如Z.Tooltip,Z.Select等，true|false，默认true</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="z-samp">loading</td>
|
||
<td>null</td>
|
||
<td>三种加载器，通过方法setLoading();方法来设置<br>
|
||
1、传入Z.loading对象，参数由对象指定，如ajax.setLoading(Z.loading({target: "testLoading3", shadow: true, position: 1}));
|
||
2、传入target和是否遮罩，如ajax.setLoading(document, true);或无遮罩ajax.setLoading(document);
|
||
3、传入targetId和是否遮罩，如ajax.setLoading("testLoading3", true);或无遮罩ajax.setLoading("testLoading3");
|
||
4、传入一个函数，在加载时回调该函数，如ajax.setLoading(function(){});此方式用于自定义操作
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="z-samp">loadingParam</td>
|
||
<td>null</td>
|
||
<td>加载器参数，通过方法setLoading();方法来设置，是第二个参数<br>
|
||
1、当loading是Z.loading和字符串时表示是否遮罩<br>
|
||
2、当#ID时指定的HTML，成功后换回原始HTML
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td colspan="3" class="z-text-cyan">响应参数</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="z-samp">responseStatus</td>
|
||
<td>0</td>
|
||
<td>响应状态，0表示成功，601－603表示跳转，其他表示错误</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="z-samp">responseText</td>
|
||
<td>null</td>
|
||
<td>响应文本字符串，默认是text/plain格式，XML或JSON格式自行转化</td>
|
||
</tr>
|
||
</table>
|
||
${zhiqim_com_chapter()}
|
||
</div>
|
||
|
||
<!-- 主体结束 -->
|
||
</div>
|
||
|
||
<!-- 容器结束 -->
|
||
</div>
|
||
${zhiqim_com_footer()} |