ajax 实现无刷新筛选,并动态的显示出来,找了好多方法都不行,可能是我这边的方法不对,求指点

JavaScript015

ajax 实现无刷新筛选,并动态的显示出来,找了好多方法都不行,可能是我这边的方法不对,求指点,第1张

使用jQuery实现Ajax操作

想要实现Ajax页面无刷新效果,但是直接利用Ajax代码实在有些麻烦,所以就想用jQuery实现。jQuery很好的封装了Ajax的核心对象XMLHTTPRequest。所以用起来非常方便。

首先,创建服务器端代码,这里用Servlet实现服务器端的数据处理;代码如下:

protected void doPost(HttpServletRequest req, HttpServletResponse resp)

throws ServletException, IOException {

// 设置编码格式

resp.setContentType("text/htmlcharset=UTF-8")

// 创建输出对象

PrintWriter out = resp.getWriter()

// 得到请求参数

String name = req.getParameter("uname")

// 判断

if (name == null || name.length() == 0)

{

out.println("用户名不能为空!")

}

else

{

// 判断

if (name.equals("cheng"))

{

out.println("用户名["+ name +"]已存在!请使用其他用户名!")

}

else

{

out.println("用户名[" + name + "]尚未存在!您可以注册!")

}

}

}

然后,创建JSP页面,要使用jQuery,必须在页面之中引入jQuery库,也就是一个Javascript文件,另外还需引入自定义的Javascript文件,如下:

?

<!-- 引入Javascript文件 -->

<script type="text/javascript" src="js/jquery-1.2.6.js"></script>

<script type="text/javascript" src="js/verify.js"></script>

而JSP页面只需要一个文本框、一个普通按钮和一个空白DIV层即可,该DIV用于显示服务器端返回的处理结果;按钮的单击事件触发verify()方法。如下:

?

<body>

<center>

用户名:<input type="text" id="uname" name="uname" />

<br />

<input type="button" name="btnVerify" value="验证" onclick="verify()" />

<br />

<div id="result">

</div>

</center>

</body>

注意:Ajax方式下不需要使用表单来进行数据提交,因此页面中不用写<form>标签。

接下来,创建一个verify.js文件,在该文件中创建verify()方法,用来实现Ajax的无刷新效果,这是该示例中最为重要的一步。想要使用jQuery实现Ajax分为以下四步:

· 获取文本框中的内容;

· 将文本框中的内容发送给服务器端的Servlet;

· 接收服务器端返回的数据;

· 将服务器端返回的数据动态地显示在JSP页面上。

针对于第一步,首先通过jQuery获得对象,并取得对象的值,如下:

?

// 取得文本框对象,通过$()获取的所有对象都是jQuery对象

var jQueryObject = $("#uname")

// 获取文本框中的值

var userName = jQueryObject.val()

通过jQuery中的$()函数获得页面的节点,该函数得到的是一个jQuery对象,然后通过jQuery中的val()方法取得节点的值,也就是文本框中的内容。

针对于第二步,我们使用jQuery的get()方法来发送数据到服务器端,如下:

$.get("TestServlet?uname=" + userName,null,callback)

该方法返回一个XMLHttpRequest对象,该方法提供三个参数,第一个是请求的服务器端的URL,第二个参数是待发送的参数,一般可以在第一个URL中直接带上参数,所以一般该参数为null,第三个参数是服务器端成功处理完成数据之后的一个回调函数。

针对于第三步,就应该创建一个回调函数,用来处理服务器端返回的数据,如下:

?

// 回调函数

function callback(data)

{

}

该回调函数有一个参数,该参数就是客户端返回的数据。

针对于第四步,再次利用jQueyr的选择器函数得到DIV层,将返回的数据显示在该层之上,如下:

function callback(data)

{

/**

* 第三步,接收服务器端返回的数据

*/

// 将服务器端返回的数据动态的显示在页面上

var resultObject = $("#result")

resultObject.html(data)

}

利用jQuery的html()方法将数据动态地显示到DIV层之中。

现在我们对以上的代码进行优化,我们用两句代码就可以实现以上所有代码的功能,这就是jQuery的强大之处之一。在verify.js文件之中的verify()方法也可以写成下面的形式:

?

$.get("TestServlet?uname=" +$("#uname").val(),null,function(data){

$("#result").html(data)

})

再为大家分享一个,下面是“无刷新登录”的例子,采用Ashx+jQuery Ajax实现。

1、后台实例代码 ashx文件(可替换为从数据库中读取)

public void ProcessRequest(HttpContext context)

{

context.Response.ContentType = "text/plain"

//context.Response.Write("Hello World")

string name = context.Request.Params["name"].ToString().Trim()

if ("china".Equals(name))

{

context.Response.Write("1")//1标志login success

}

else

{

context.Response.Write("0")//0标志login fail

}

}

2、前台实例代码 aspx文件

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title></title>

<script src="js/jquery-1.4.2.js" type="text/javascript"></script>

<script type="text/javascript">

$(function() {

$("#test").live("click", function() {

//alert(0)

$.ajax({

type: 'POST',

url: 'Handler1.ashx',

data: { "name": $("#name").val() },

success: function(data) {

if (1 == data)

alert('login success')

else

alert('login fail')

}

})

})

})

</script>

</head>

<body>

<form id="form1" runat="server">

<div>

<input type="text" name="name" id="name" />

<input type="button" name="test" id="test" value="validate" />

</div>

</form>

</body>

</html>

这里调用了一个 js 函数: verify()

不知道你的具体代码和应用场景。如果用的是第三方 API,你看看有没有 verify() 函数的说明,如果是你们自己公司写的 js,你去搜搜 verify() 函数看看是干什么用的就可以了。

用户名或昵称 : ^[\u4e00-\u9fa5A-Za-z0-9-_]*$——只能中英文,数字,下划线,减号

用户密码: ^[a-zA-Z]\w{5,17}$ 正确格式为——以字母开头,长度在6-18之间,只能包含字符、数字和下划线。

汉字 :^[\u4e00-\u9fa5],{0,}$

Email地址 :^\w+[-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$

                     ^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$

IP地址 :^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])(\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])){3}$

日期 格式是否为YYYY-MM-DD:^\d{4}-(0?[1-9]|1[0-2])-(0?[1-9]|[1-2]\d|3[0-1])$/

时间 格式是否为hh:mm:ss:^([0-1]\\d|2[0-3]):[0-5]\\d:[0-5]\\d$

InternetURL :^http://([\w-]+\.)+[\w-]+(/[\w-./?%&=]*)?$ ;^[a-zA-z]+://(w+(-w+)*)(.(w+(-w+)*))*(?S*)?$

                            ^http:\/\/[A-Za-z0-9]+\.[A-Za-z0-9]+[\/=\?%\-&_~`@[\]\':+!]*([^<>\"\"])*$

电话号码 :^(\(\d{3,4}\)|\d{3,4}-)?\d{7,8}$——正确格式为:XXXX-XXXXXXX,XXXX-XXXXXXXX,XXX-XXXXXXX,XXX-XXXXXXXX,XXXXXXX,XXXXXXXX。

                        ^((\(\d{2,3}\))|(\d{3}\-))?(\(0\d{2,3}\)|0\d{2,3}-)?[1-9]\d{6,7}(\-\d{1,4})?$

手机号码 :^0?(13[0-9]|15[012356789]|18[0236789]|14[57])[0-9]{8}$:打长途时一般要在手机号码前加0。

身份证号 (15位或18位数字):^\d{15}(\d{2}[A-Za-z0-9])?$

QQ号码 : /^[1-9]\d{4,8}$/

验证是否含有 ^%&',=?$\" 等字符:[^%&',=?$\x22]+

验证一年的12个月:^(0?[1-9]|1[0-2])$ 正确格式为:“01”-“09”和“1”“12”

验证一个月的31天:^((0?[1-9])|((1|2)[0-9])|30|31)$ 正确格式为:01、09和1、31。

验证数字:^[0-9]*$

验证n位的数字:^\d{n}$  

验证至少n位数字:^\d{n,}$ 

验证m-n位的数字:^\d{m,n}$

验证零和非零开头的数字:^(0|[1-9][0-9]*)$

验证有两位小数的正实数:^[0-9]+(.[0-9]{2})?$

验证有1-3位小数的正实数:^[0-9]+(.[0-9]{1,3})?$

验证非零的正整数:^\+?[1-9][0-9]*$

验证非零的负整数:^\-[1-9][0-9]*$

验证非负整数(正整数 + 0) ^\d+$

验证非正整数(负整数 + 0) ^((-\d+)|(0+))$

验证长度为3的字符:^.{3}$

验证由26个英文字母组成的字符串:^[A-Za-z]+$

验证由26个大写英文字母组成的字符串:^[A-Z]+$

验证由26个小写英文字母组成的字符串:^[a-z]+$

验证由数字和26个英文字母组成的字符串:^[A-Za-z0-9]+$

验证由数字、26个英文字母或者下划线组成的字符串:^\w+$

整数:^-?\d+$

非负浮点数(正浮点数 + 0):^\d+(\.\d+)?$

正浮点数: ^(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*))$

非正浮点数(负浮点数 + 0):^((-\d+(\.\d+)?)|(0+(\.0+)?))$

负浮点数: ^(-(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*)))$

浮点数 :^(-?\d+)(\.\d+)?$

双精度:^[-\+]?\d+(\.\d+)?$

//判断输入的字符是否为中文

function IsChinese(){

    var str = document.getElementById('str').value.trim()

    if(str.length!=0){

        reg=/^[\u0391-\uFFE5]+$/

        if(!reg.test(str)){

            alert("对不起,您输入的字符串类型格式不正确!")

        }

    }

}

//判断输入的数字不大于某个特定的数字

function MaxValue(){

    var val = document.getElementById('str').value.trim()

    if(str.length!=0){

        reg=/^[-+]?\d*$/

        if(!reg.test(str)){//判断是否为数字类型

            if(val>parseInt('123')){//“123”为自己设定的最大值

                alert('对不起,您输入的数字超出范围')

            }

        }

    }

}

//为上面提供各个JS验证方法提供.trim()属性

String.prototype.trim=function(){

    return this.replace(/(^\s*)|(\s*$)/g, "")

}

var patterms = newObject()

//验证IP

patterms.ip = /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])(\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])){3}$/

//验证EMAIL

patterms.email = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/

//验证函数

functionverify(str,pat){

    var thePat = patterms[pat]

    if(thePat.test(str)){

        return true

    }else{

        return false

    }

}

//测试alert(verify("asidycom@163.com","email")+","+verify("192.168.1.1","ip")+","+verify("192.168","ip"))

本文摘自: js正则表达式验证大全