| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728 |
- <#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()}
|