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

最新推荐文章于 2022-10-04 15:22:09 发布

yongh701

最新推荐文章于 2022-10-04 15:22:09 发布

阅读量1.9k

点赞数

分类专栏： Javaweb 文章标签： ajax 表单 jquery 正则表达式 jsp

本文链接：https://blog.csdn.net/yongh701/article/details/41986473

版权

Javaweb 专栏收录该内容

86 篇文章 1 订阅

订阅专栏

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

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

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中就能看到结果，兼容所有浏览器。