这篇文章主要介绍了Ajax的简单实用实例代码,对ajax感兴趣的朋友可以参考下Ajax的简单实用的方法

我将实现一个简单的Ajax页面无刷新进行用户验证案例：

效果如下图：

实现主要过程：

在UsersAction类中的checkUser方法中接收并验证前台的表单数据，针对不同情况，返回一个状态码code给jsp页面，然后在ajax1.jsp中通过$.post方法接受后台传递过来的状态码

做出不同的响应。

具体代码如下：

1.实体类

package com.bean;

import java.io.Serializable;

public class Users implements Serializable {

private String uname;

private String passwd;

public String getUname() {

return uname;

}

public void setUname(String uname) {

this.uname = uname;

}

public String getPasswd() {

return passwd;

}

public void setPasswd(String passwd) {

this.passwd = passwd;

}

public Users(String uname, String passwd) {

super();

this.uname = uname;

this.passwd = passwd;

}

public Users() {

super();

}

}

2.action类

package com.action;

import java.io.IOException;

import java.io.PrintWriter;

import javax.servlet.http.HttpServletResponse;

import org.apache.struts2.ServletActionContext;

import org.apache.struts2.convention.annotation.Action;

import com.bean.Users;

public class UsersAction {

private Users us;

public Users getUs() {

return us;

}

public void setUs(Users us) {

this.us = us;

}

@Action(value="checkUser")

public String checkUser() {

System.out.println("aaaaaaaaa");

HttpServletResponse response = ServletActionContext.getResponse();

response.setCharacterEncoding("utf-8");

try {

PrintWriter out = response.getWriter();

int code = 0;

if (us == null) {

out.print(0);

return null;

} else {

if (us.getUname() == null || us.getUname().trim().equals("")) {

code = 1;

out.print(code);

return null;

} else {

if (us.getPasswd() == null

|| us.getPasswd().trim().equals("")) {

code = 2;

out.print(code);

return null;

} else {

code = 200;

out.print(code);

}

}

}

out.flush();

out.close();

} catch (IOException e) {

// TODO Auto-generated catch block

e.printStackTrace();

}

return null;

}

}

3.ajax1.jsp

String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

%>

Ajax练习

$(function() {

$("#btok").click(function() {

//获取数据

var uname = $("#uname").val();

var passwd = $("#passwd").val();

//将数据组织为json格式

var json = {"us.uname":uname,"us.passwd":passwd};

//进行异步请求

$.post("checkUser.action",json,function(msg){

if(msg == '0') {

alert("用户名和密码错误！");

return;

}

if(msg == '1') {

$("#uerror").html("用户名错误！");

return;

} else {

$("#uerror").html("*");

}

if(msg == '2') {

$("#perror").html("密码错误！");

return;

} else {

$("#perror").html("*");

}

if(msg == '200') {

alert("登陆成功！");

return;

}

});

});

});

用户注册
账号:	*
密码:	*

以上所述是小编给大家介绍的Ajax的简单实用实例代码，希望对大家有所帮助！

相关推荐：