ajax不是一门新语言,只是一个很平常的即时响应技术,非常简单,一点都不玄虚,就像数据库技术一样能够运用至php,asp.net,asp与jsp等各大网页之中,与网页有着很好的融合性
ajax务必运行在服务器中,因为ajax是一项服务器技术,所以使用ajax在本地的两个未被挂载到服务器上的网页之间,传递数值是不可能的,尽管jquery是本身并不需要挂载到服务器上使用
那么ajax到底是什么呢?
传统的表单的提交有时会带给用户不良的体验,
比如以下的例子:
在jqueryajax.jsp下,有着如下的一个表单,很简单,就两个对话框,
<form action="jqueryhandle.jsp" method="post"> <input type="text" id="number1" name="number1"/> <input type="text" id="number2" name="number2"/> <input type="submit" value="go!"/> </form>
向jqueryhandle.jsp中传递数值,希望jqueryhandle.jsp完成一个加法,
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <% String number1rec=request.getParameter("number1"); String number2rec=request.getParameter("number2"); int number1=Integer.parseInt(number1rec); int number2=Integer.parseInt(number2rec); int result=number1+number2; %> The result is:<%=result%>
然后输出结果
当然,这只是举个例子,完成加法大可以用javascript或者jquery等脚本语言直接完成,直接输出,不过问题是,如果,jqueryajax.jsp是向jqueryhandle.jsp甚至servlet或者ssh中传递一个值并且利用这个值查询数据库等后台操作了,那么就同时又希望达到如下的效果,不刷新,不提交表单就返回结果给用户,那应该怎么办呢?
这时候,就会利用到ajax技术。
一、基本目标
就是完成上面的例子,在两个文本框中输入两个数,不刷新,通过jqueryhandle.jsp瞬间得到结果
同时还要利用正则表达式认证这两个输入框是否为一个整数,免得jqueryhandle.jsp无法将其转换为整型,然后Tomcat控制台不停报错
二、制作过程
1、首先在eclipse中新建一个web工程,里面新建两个页面,一个jqueryajax.jsp与jqueryhandle.jsp,一个文件夹js,里面就装着一个jquery.js,至于jquery.js怎么配置可以参照我之前的《【jQuery】使用JQ来编写最基本的淡入淡出效果》一文(点击打开链接),其实也没有什么难的,就是从官网上下载一个js文件放进去就行了,目录结构如下:
2、jqueryhandle.jsp
ajax技术并不是用在这里,这里的代码就是上面的jqueryhandle.jsp代码,一段简单得没法再简单得jsp代码,要求得到number1与number2的两个数值,然后把他们转化为整型,再相加,并且把他们相加之后的结果result输出。
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <% String number1rec=request.getParameter("number1"); String number2rec=request.getParameter("number2"); int number1=Integer.parseInt(number1rec); int number2=Integer.parseInt(number2rec); int result=number1+number2; %> The result is:<%=result%>
但是,这段代码按理说,为防止恶意用户直接访问本页报错,所以应该加上抛出异常的结构,保护此页
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>jqueryajax</title> <script type="text/javascript" src="js/jquery-1.11.1.js"></script> <script type="text/javascript"> $(document).ready(function(){ jqueryajax(); setInterval("jqueryajax()", 500); }) function jqueryajax() { var numbera=$("#number1").val(); var numberb=$("#number2").val(); var pattern=/^-?\d+$/; var flag = pattern.test(numbera) && pattern.test(numberb); if(flag==true){ $.ajax({ type:"post", url:"jqueryhandle.jsp", datatype:"text", data:{ number1:numbera, number2:numberb }, success:function (data) { $("#rec").text(data); }, error: function () { } }); } else{ $("#rec").text("请输入整数"); } } </script> </head> <body> <form action="jqueryhandle.jsp" method="post"> <input type="text" id="number1" name="number1" /> <input type="text" id="number2" name="number2" /> <input type="submit" value="go!" /> </form> <p id="rec"></p> </body> </html>
jqueryajax()先是获取输入框的值,jquery对于网页节点的操作,也可以参考我之前的《【jQuery】控制节点,仅在前台通过get方法完成参数传递》一文(点击打开链接)
之后通过正则表达式来判断这个数是否同为整数
正则表达式是这样的,
比如:
var pattern=/^[0-9]*[1-9][0-9]*$/; var flag = pattern.test(a);
正整数匹配表达式是/^[0-9]*[1-9][0-9]*$/;那么可以通过其test方法,来看a是否正整数,如果a是正整数,flag的boolean值为true,如果a不是正整数,flag的boolean值为false。
至于匹配表达式网上的资料库很多,比如我所使用到整数匹配表达式是:/^-?\d+$/;,而找<img src="">的html<img>标签的正则表达式是:/<img[\s]+[^>]+>/gi;,拿过来用其test方法就行了
有兴趣的朋友,可以看看正则表达式的语法,这里不作详细的介绍
如果是整数,那么着执行jquery中的ajax技术:
$.ajax({ type:"post", url:"jqueryhandle.jsp", datatype:"text", data:{ number1:numbera, number2:numberb }, success:function (data) { $("#rec").text(data); }, error: function () { } });
data属性就是要传递给jqueryhandle.jsp这个响应网页的参数,上面的意思是,给jqueryhandle.jsp需要的number1值,也就是jqueryhandle.jsp中request.getParameter("number1");要求的值为本网页的numbera,其实一般numbera都写成number1的,这里为了说明才改名的。
之后success是ajax成功处理之后,你需要执行的网页脚本,一般都成功的,所以error结构一般留空,当然,你也可以在里面写写弹出
function中的data形式参数,意为jqueryhandle.jsp的所有内容拿过来,这里仅有一条脚本,就是把id为rec的p标签里面的值变为这个形式参数data。
自此,整个Jqueryajax工程开发完毕,挂到tomcat中就能看到结果,兼容所有浏览器。
【Jsp】Jqueryajax技术在Jsp中的应用与javascript中的正则表达式
原文地址:http://blog.csdn.net/yongh701/article/details/41986473