struts+jquery实现ajax登陆
- 格式:doc
- 大小:39.00 KB
- 文档页数:3
jquery $.ajax 同步调用实现原理jQuery .ajax 同步调用实现原理在前端开发中,经常会涉及到使用Ajax进行异步请求。
而jQuery库中的.ajax()方法是非常常用的一种实现方式。
.ajax()方法使用起来非常方便,可以对数据进行异步请求,并且可以设置回调函数来处理返回的数据。
但是有时候我们需要在请求完成之前进行一些操作,此时可以使用同步调用的方式来实现。
本文将详细介绍使用jQuery .ajax()方法进行同步请求的实现原理。
1. .ajax()方法简介.ajax()是jQuery库中用于发送HTTP请求的核心方法。
它是一个异步方法,可以向服务器发送GET、POST等请求,并处理服务器返回的数据。
.ajax()方法使用一个包含键值对的配置对象作为参数,可以设置请求的地址、请求方式、请求参数、回调函数等。
当请求完成时,可以在回调函数中处理返回的数据。
2. 异步请求与同步请求的区别在讲解实现原理之前,我们先来了解一下异步请求和同步请求的区别:- 异步请求:是指在发送请求的同时,主线程不会阻塞,而是继续执行后续的代码。
当请求完成后,会通过回调函数来处理返回的数据。
异步请求一般使用于需要较长时间才能返回结果的场景,如网络请求、文件上传等。
- 同步请求:是指在发送请求的同时,主线程会一直等待请求的响应结果,而不会继续执行后续的代码。
只有在请求完成后,才会继续执行下面的代码。
同步请求一般使用于需要立即获取结果的场景,如表单提交、页面加载等。
在默认情况下,.ajax()方法是异步请求的,即发送请求后会继续执行后续的代码。
而实现同步请求则需要额外的设置。
3. 同步请求的设置要实现同步请求,可以通过设置.ajax()方法的async选项为false来实现。
async的默认值为true,表示异步请求,当设置为false时表示同步请求。
示例代码:javascript.ajax({url: 'example',async: false,其他配置项...success: function(data) {处理返回的数据}});4. 同步请求的实现原理实现同步请求的关键在于事先知道请求需要的时间,以便正确地进行阻塞。
JSP Ajax 用户登录
使用Ajax技术来实现用户登录,将会提交登录区域数据。
练习使用这种方法来实现用户登录校验。
(1)创建客户端程序,通过有参数请求把客户的用户名和密码发送到服务器,然后根据服务器返回的结果来判断是否登录成功。
其中发送有参数请求的JavaScri
(3)实现页面的登录界面,注意一些标签的id属性的设置不能有错,不然将
(4)实现服务器处理——check.java文件,它是一个Servlet,主要功能是起到一个控制器作用,将调用逻辑处理模块(一个JavaBean)SqlCheck来判断用户是否
(5)实现逻辑处理模块——SqlCheck.java,它是一个JavaBean,主要功能是查
(6)编译并部署各文件,运行效果如图9-15所示:
图9-15 登录成功。
jquery中$.ajax()⽅法使⽤详解1.url说明:发送请求的地址(默认为当前页⾯),要求是String类型的参数,⽐如是.net下,"~wexin(控制器)/getweinxinmenu(动作)",2.type说明:请求⽅法(post或者get),默认是get,要求是String类型的参数。
其他的htpp请求如(put、delete)等也⽀持,但是要浏览器⽀持3.timeout说明:设置请求超时时间(毫秒),要求是number类型的参数。
此设置将覆盖$.ajaxSetup()⽅法的全局设置。
4.async说明:默认值为true,所有请求是异步,要求是Bool类型的参数,如果需要发送同步请求,将此项设置为false。
注意:同步时浏览器会被锁住。
5.cache说明:默认为true(当datatype为script时,默认为false)从浏览器缓存中加载请求信息,要求是Bool类型的参数。
6.data说明:发送到服务器的数据,要求是Object或string类型的参数。
如果已经不是字符串,将⾃动转换为字符串格式。
get请求中将附加在url 后。
防⽌这种⾃动转换,可以查看 processData选项。
对象必须为key/value格式,例如{foo1:"bar1",foo2:"bar2"}转换为&foo1=bar1&foo2=bar2。
如果是数组,JQuery将⾃动为不同值对应同⼀个名称。
例如{foo:["bar1","bar2"]}转换为&foo=bar1&foo=bar2。
7.dataType:说明:预期服务器返回的数据类型,要求为String类型的参数。
如果不指定,JQuery将⾃动根据http包mime信息返回responseXML或responseText,并作为回调函数参数传递。
在上一篇博文中已经学习了如何整合mybatis和spring,实现持久层的CRUD操作、业务层的事务管理和spring的IoC。
现在我们这个demo的基础上,继续整合struts2,并利用json插件和jquery实现ajax,完成后系统将实现登录与注册的简单功能。
浏览器端如何简单、高效地与服务器端进行数据交互是web开发者最为关心的内容。
在客户端构造intput表单数据或者拼凑URL参数名称/参数值,然后在服务器端笨拙地用request.getParameter(“参数名称”)获取参数显然已经过时了,在struts2中,只要在action 里定义了input表单名称/URL参数名称对应的String类型属性,并设置getter和setter 方法,struts2在调用action的时候就可以根据参数值自动帮你设置好action中对应的属性值供你使用,这极大地方便了开发者。
但是json更为强大——它可以根据浏览器端上传的符合格式的数据设置action中对象的值,也就是说,struts2自动封装的数据只有一层,而json是无限层。
json给页面参数的传递带来极大的方便,结合jquery来使用,可以轻易地做到页面局部刷新、页面无跳转进行友好的系统异常提示等,其中后者是我觉得最有必要做到的一点,在action中定义一个message变量,把action方法执行的结果或者系统异常信息放到里面以json的方式返回给客户端,客户端根据这个变量的结果来进行下一步的操作或者提示系统异常信息,非常地好用。
json由javascript中的对象和数组构成,基本形式是{key:value},key为属性名称,value 为属性值,value可以为数字、字符串、数组、对象,value可以为数组和对象是json可以封装无限层数据的关键所在。
至于如何建构和解析json不是本篇博文的详细表述范围,请参考其他资料。
现在就让我们利用struts2作为MVC框架,整合json插件,在浏览器端使用jquery解析和系列化json数据,由此制作一个具有登陆/注册功能的小demo。
摘要本文通过对基于B/S模式下的BBS论坛系统的设计与实现,以及对BBS系统的相关背景、系统设计、需求分析、技术支持、系统测试与维护等方面阐述了BBS 系统的开发过程,并使用当下主流的论坛大多采用的目前流行的java语言+SSH (struts+spring+hibernate)框架和后台Oracle技术,它的特点是具备一般论坛的基本功能且操作简单,使用方便。
本BBS论坛系统的可以为学生提供一个交流的平台,在网上为大家提供了交流经验、探讨问题的空间。
BBS系统给用户提供注册和登录的功能。
注册时用户可以自由选择头像和编写名称,BBS论坛系统拥有的发表主题和回复等功能,使论坛更具特色,回复时还有表情添加功能,大大提高了论坛的趣味性。
关键词:BBS;JAVA;MYSQL;SSH;JSP作者上传的文档中有配套的ppt,请自行下载,有任何疑问或要软件包,发到:lqn6633163.AbstractThis article through to the BBS system based on B/S mode of the research and implementation, as well as the background, the BBS system design, requirement analysis, technical support, system testing and maintenance describes the development process of BBS system, and use the current mainstream forum websites are mostly based on the popular java language SSH (struts+spring+hibernate) frame and background of Oracle technology, it is characterized with the general forum's basic function and has the advantages of simple operation, easy to use. TheBBS system can provide a platform for the exchange of students, the Internetprovides us exchange experience, explore the problem space. The BBS systemprovides to the user registration and login function. Registered users can freely choose the picture and write name, keynote and reply function with BBS forum system, make the forum more features, reply and expressions add functionality,greatly improving the forum's interest.Key words: BBS;JA V A;MYSQL;SSH;JSP目录第1章概述 (1)1.1 课题背景 (1)1.2 系统要解决的问题 (2)1.3 本章小结 (2)第2章相关技术及运行环境简介 (3)2.1java语言 (3)2.2SSH框架 (3)2.3JSP框架 (4)2.4javascript框架 (5)2.5 数据库MYSQL (6)2.6开发环境 (6)2.7本章小结 (8)第3章需求设计 (9)3.1需求的必要性 (9)3.2 可行性分析 (9)3.3用户功能需求 (10)3.4数据需求 (10)3.5本章小结 (11)第4章系统整体设计 (12)4.1系统结构模块设计 (12)4.2数据库设计 (13)4.3数据表设计 (13)4.4本章小结 (15)第5章详细设计 (16)5.1用户登录模块 (16)5.2用户注册模块 (17)5.3帖子版块模块 (18)5.4主题帖子模块 (18)5.5浏览主题界面 (19)5.6发表帖子模块 (19)5.7管理员模块 (20)5.8本章小结 (20)第6章系统运行和测试 (21)6.1测试过程概述 (21)6.2测试运行情况 (22)6.3 程序有待改进方面 (22)6.4本章小结 (23)结论 (24)参考文献 (25)致 (26)第1章概述1.1课题背景在当今这个以网络为主流的社会,互联网已经日益深入,成为了人们生活中不可缺少的一部分。
实例通过 AJAX 加载一段文本: jQuery 代码: $(document).ready(function(){ $("#b01").click(function(){ htmlobj=$.ajax({url:"",async:false}); $("#myDiv").html(htmlobj.responseText); }); });HTML 代码: <div id="myDiv"><h2>321 导航</h2></div> <button id="b01" type="button"></button>亲自试一试定义和用法ajax() 方法通过 HTTP 请求加载远程数据。
该方法是 jQuery 底层 AJAX 实现。
简单易用的高层实现见 $.get, $.post 等。
$.ajax() 返回其创建 的 XMLHttpRequest 对象。
大多数情况下你无需直接操作该函数,除非你需要操作不常用的选项,以获 得更多的灵活性。
最简单的情况下,$.ajax() 可以不带任何参数直接使用。
注意:所有的选项都可以通过 $.ajaxSetup() 函数来全局设置。
语法jQuery.ajax([settings])参数 settings描述 可选。
用于配置 Ajax 请求的键值对集合。
可以通过 $.ajaxSetup() 设置任何选项的默认值。
参数 options 类型:Object可选。
AJAX 请求设置。
所有选项都是可选的。
async 类型:Boolean 默认值: true。
默认设置下,所有请求均为异步请求。
如果需要发送同步请求,请将此选项设 置为 false。
注意,同步请求将锁住浏览器,用户其它操作必须等待请求完成才可以执行。
$.ajax使用方法$.ajax是jQuery中的一个方法,用于执行异步HTTP(Ajax)请求。
以下是$.ajax的基本使用方法:1.创建请求:```javascript$.ajax({url:"example.php",//请求的URL地址type:"GET",//请求方式,GET或POST dataType:"json",//预期服务器返回的数据类型,可以是xml、json、script、html等success:function(data){//请求成功后的回调函数console.log(data);//输出服务器返回的数据},error:function(){//请求失败时的回调函数console.log("请求失败");}});```2.发送数据:```javascript$.ajax({url:"example.php",type:"POST",data:{foo:"bar"},//要发送到服务器的数据,以键值对的形式表示dataType:"json",success:function(data){console.log(data);},error:function(){console.log("请求失败");}});```3.处理服务器响应:在成功回调函数中,服务器返回的数据作为参数传递给回调函数。
可以根据需要处理这些数据,例如更新页面内容或执行其他操作。
4.配置选项:$.ajax方法接受一个配置对象作为参数,其中包含以下选项:-`url`:请求的URL地址。
-`type`:请求方式,默认为"GET"。
-`dataType`:预期服务器返回的数据类型,默认为"html"。
struts+jquery实现ajax登陆
一、新建一个web项目:test,配置好struts2的环境(详细配置见:/wuweidu/p/3841297.html)
导入Jquery的js文件到项目
二、在com.action包下,新建一个loginAction.java
loginAction.java的代码如下
package com.action; import org.apache.struts2.convention.annotation.Action; import org.apache.struts2.convention.annotation.ParentPackage; import org.apache.struts2.convention.annotation.Result; import org.apache.struts2.convention.annotation.Results; import com.opensymphony.xwork2.ActionSupport;
@Action("login")
@ParentPackage(value = "json-default")
@Results({ @Result(name = "success", type = "json", params = { "data", "flag" }), }) public class LoginAction extends ActionSupport { /** * */ private static final long serialVersionUID = 1751244794407005783L; private String flag; private String username; private String password; public String execute() { try { if (getUsername() == null || getUsername().trim().equals("")) {
setFlag("用户名不能为空"); return SUCCESS;
} else if (getPassword() == null || getPassword().trim().equals("")) {
setFlag("密码不能为空"); return SUCCESS;
} else if (getUsername().trim().equals("admin") && getPassword().equals("admin")) {
setFlag("登陆成功"); return SUCCESS;
} else {
setFlag("用户名或密码错误"); return SUCCESS;
}
} catch (Exception e) {
e.printStackTrace();
setFlag("登陆异常"); return SUCCESS;
}
} public String getFlag() { return flag;
} public void setFlag(String flag) { this.flag = flag;
} public String getPassword() { return password;
} public void setPassword(String password) { this.password = password;
} public String getUsername() { return username;
} public void setUsername(String username) { ername = username;
}
}
三、在WebRoot目录下新建index.jsp和success.jsp
index.jsp登陆界面success.jsp登陆成功后跳转的界面
index.jsp内容如下
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<% String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort() + path + "/"; %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script type="text/javascript" src="./resource/js/jquery.min.js"></script>
</head>
<script type="text/javascript"> $(document).ready(function() {
$(".loginButton").click(function() {
var name = $("#username").val();//获取登陆用户名var password = $("#password").val(); //获取登陆密码$.post("login", {
username : name,
password : password
}, callback, "json");
});
function callback(data) {
var value=data.flag; if(value=="登陆成功"){
location.href="./success.jsp";
}else{
alert(value);
}
}); </script>
<body>
<input name="username" id="username" type="text" />
<input name="password" id="password" type="password" />
<button class="loginButton" class="btn btn-inverse">登陆</button> </body>
</html>。