码迷,mamicode.com
首页 > 编程语言 > 详细

【Jsp】Jqueryajax技术在Jsp中的应用与javascript中的正则表达式

时间:2014-12-17 22:46:44      阅读:270      评论:0      收藏:0      [点我收藏+]

标签:ajax   表单   jquery   正则表达式   jsp   

ajax不是一门新语言,只是一个很平常的即时响应技术,非常简单,一点都不玄虚,就像数据库技术一样能够运用至php,asp.net,asp与jsp等各大网页之中,与网页有着很好的融合性

ajax务必运行在服务器中,因为ajax是一项服务器技术,所以使用ajax在本地的两个未被挂载到服务器上的网页之间,传递数值是不可能的,尽管jquery是本身并不需要挂载到服务器上使用

那么ajax到底是什么呢?

传统的表单的提交有时会带给用户不良的体验,

比如以下的例子:

bubuko.com,布布扣

在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中传递一个值并且利用这个值查询数据库等后台操作了,那么就同时又希望达到如下的效果,不刷新,不提交表单就返回结果给用户,那应该怎么办呢?

bubuko.com,布布扣

这时候,就会利用到ajax技术。


一、基本目标

就是完成上面的例子,在两个文本框中输入两个数,不刷新,通过jqueryhandle.jsp瞬间得到结果

bubuko.com,布布扣

同时还要利用正则表达式认证这两个输入框是否为一个整数,免得jqueryhandle.jsp无法将其转换为整型,然后Tomcat控制台不停报错


二、制作过程

1、首先在eclipse中新建一个web工程,里面新建两个页面,一个jqueryajax.jsp与jqueryhandle.jsp,一个文件夹js,里面就装着一个jquery.js,至于jquery.js怎么配置可以参照我之前的《【jQuery】使用JQ来编写最基本的淡入淡出效果》一文(点击打开链接),其实也没有什么难的,就是从官网上下载一个js文件放进去就行了,目录结构如下:

bubuko.com,布布扣


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%>

但是,这段代码按理说,为防止恶意用户直接访问本页报错,所以应该加上抛出异常的结构,保护此页


3、jqueryajax.jsp
<%@ 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()这个函数,每0.5秒执行一次jqueryajax(),详情可以参考我之前的《【JavaScript】使用setInterval()函数作简单的轮询操作》(点击打开链接)一文。

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 () {
					}
				});

这段结构一定要在一个js函数中,直接写在外面是不符合语法的,type里面是post方法或者get方法,url就是要相应的网页,相当于表单中的action属性,datatype是该相应网页返回的类型,一般是text,如果是json则下面的success中,要用data = eval(data);把其擦写成数组data,后对data[i]这个数组进行处理。

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中的正则表达式

标签:ajax   表单   jquery   正则表达式   jsp   

原文地址:http://blog.csdn.net/yongh701/article/details/41986473

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!