index.jsp:
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="js/jquery-1.7.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#btn_login").click( function() {
var loginName=$("#loginName").val();
var password=$("#password").val();
$.ajax({
type: "POST",
dataType: "json",
url: 'ajaxLogin',
data: 'loginName='+loginName+'&password='+password,
success: function(data) {
alert(data);
}
});
});
/** //使用 Ajax 的方式 判断登录
$("#btn_login").click( function() {
var url = 'ajaxLogin';
//获取表单值，并以json的数据形式保存到params中
var params = {
loginName:$("#loginName").val(),
password:$("#password").val(),
}
//使用$.post方式
$.post(
url, //服务器要接受的url
params, //传递的参数
function cbf(data){ //服务器返回后执行的函数 参数 data保存的就是服务器发送到客户端的数据
alert(data);
var member = eval("("+data+")"); //包数据解析为json 格式
$('#result').html("欢迎您： "+member.name+"<br>您的密码是："+member.password);
},
'json' //数据传递的类型 json
);
});*/
});
</script>
</head>
<body>
<center>
<table>
<tr>
<td>
<span>用户名：</span>
</td>
<td>
<input type="text" id="loginName" name="loginName">
</td>
</tr>
<tr>
<td>
<span>密码：</span>
</td>
<td>
<input type="password" name="password" id="password">
</td>
</tr>
<tr>
<td colspan="2">
<input type="button" id="btn_login" onclick="check()" value="Login" />
</td>
</tr>
</table>
<p>
这里显示ajax信息：
<br />
<span id="result"></span>
</p>
</center>
</body>
</html>
struts.xml:
<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 2.1//EN" "http://struts.apache.org/dtds/struts-2.1.dtd"> <struts> <package name="default" extends="json-default"> <action name="ajaxLogin" class="AjaxLoginAction"> <!-- 返回类型为json 在json-default中定义 --> <result type="json"> <!-- root的值对应要返回的值的属性 --> <!-- 这里的result值即是 对应action中的 result --> <param name="root">result</param> </result> </action> </package> </struts>
AjaxLoginAction.java:
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import net.sf.json.JSONObject;
import com.opensymphony.xwork2.ActionSupport;
public class AjaxLoginAction extends ActionSupport {
// 用Ajax返回数据
private String result;
// struts的属性驱动模式，自动填充页面的属性到这里
private String loginName;
private String password;
public String getResult() {
return result;
}
public void setResult(String result) {
this.result = result;
}
public String getLoginName() {
return loginName;
}
public void setLoginName(String loginName) {
this.loginName = loginName;
}
public String getPassword() {
return password;
}
public void setPassword(String password) {
this.password = password;
}
@Override
public String execute() {
System.out.println("------------");
List list=new ArrayList();
list.add(0, "huhu");
list.add(1, "33");
// 用一个Map做例子
Map<String, String> map = new HashMap<String, String>();
// 为map添加一条数据，记录一下页面传过来loginName
map.put("name", loginName);
map.put("password",password);
map.put("mes", "成功啦！");
map.put("list", list.toString());
// 将要返回的map对象进行json处理
JSONObject jo = JSONObject.fromObject(map);
// 调用json对象的toString方法转换为字符串然后赋值给result
result = jo.toString();
// 可以测试一下result
System.out.println(this.result);
return SUCCESS;
}
}
public String myData(){
System.out.println("************");
User user=new User();
user.setId(11);
user.setName("hhkk");
List<User> list=new ArrayList();
list.add(user);
System.out.println(list);
Map<String, Object> map = new HashMap<String, Object>();
map.put("user", list);
map.put("haha", "哈哈");
JSONObject jo = JSONObject.fromObject(map);
result=jo.toString();
System.out.println(result);
return SUCCESS;
}
相关推荐
《jQuery与Ajax学习指南》是一本专为初学者和有一定JavaScript基础的开发者设计的电子书，旨在帮助读者深入理解和熟练掌握这两个在实际Web开发中不可或缺的技术。jQuery是一个强大的JavaScript库，它极大地简化了DOM...
2. JQueryAjax教程讲解.ppt：这可能是关于使用jQuery进行AJAX请求的详细讲解，包括$.ajax()函数，$.get()和$.post()方法的使用，以及如何处理回调函数。 3. Jquery(很好的PPT教程-技术较为全面-分享给大家).ppt：这...
1. **$.ajax()函数**：这是jQuery中最核心的Ajax方法，可以接受多个参数来定制请求。例如，URL、类型（GET或POST）、数据、回调函数等。基本用法如下： ```javascript $.ajax({ url: 'your-url', type: 'GET', ...
在这个聊天室程序中，jQuery库被用来简化Ajax的使用，使得开发者能更轻松地实现这一功能。 1. **jQuery**：jQuery是一个快速、简洁的JavaScript库，它简化了HTML文档遍历、事件处理、动画以及Ajax交互。在本聊天室...
在"JqueryWebServiceTestDemo"这个示例中，可能包含了完整的前端HTML、CSS和JavaScript文件，以及可能的服务端接口文档或示例代码，用于演示如何在实际项目中运用jQuery进行跨域Ajax请求。通过学习和运行这个示例，...
**jQuery AJAX分页技术详解** ...对于初学者，这个实例是学习和理解AJAX分页的宝贵资源，而对于经验丰富的开发者，它则提供了灵感和参考。在实践中不断探索和优化，将能创造出更多适应不同场景的分页解决方案。
在IT领域，jQuery和AJAX是前端开发中的两个重要技术，尤其对于网页动态交互和数据异步传输至关重要。本文将围绕“jquery+ajax 学习必备的源码个书籍（推荐）”这一主题，深入探讨这两个技术的核心概念、应用场景以及...
《jQuery+Ajax学习大全》是一本全面覆盖jQuery与Ajax技术的综合教程，旨在帮助开发者深入理解和熟练运用这两种在Web开发中至关重要的工具。jQuery是一个高效、简洁的JavaScript库，极大地简化了JavaScript的DOM操作...
**jQuery的Ajax方法**是JavaScript库中的核心特性之一，它为开发者提供了简单、高效的数据交互方式，无需刷新页面即可实现异步与服务器进行通信。在Web开发中，jQuery的Ajax功能极大地简化了XMLHttpRequest对象的...
jQuery+AJAX学习笔记
jQuery 是一个广泛使用的 JavaScript 库，它极大地简化了前端开发中的许多任务，尤其是处理 AJAX（Asynchronous JavaScript and XML）请求。AJAX 是一种在不刷新整个网页的情况下，允许部分网页内容异步更新的技术。...
总之，jQuery Unobtrusive Ajax是现代Web开发中的一个强大工具，它简化了Ajax集成，使开发者能够专注于业务逻辑，而不是繁琐的DOM操作。通过深入学习和实践，你将能够创建出高效、优雅的Web应用。
在IT行业中，jQuery和ajax是两个非常重要的技术，它们在构建动态、交互性强的Web应用程序时发挥着关键作用。在这个“jQuery+ajax实现三级级联”的...对于学习和理解jQuery和ajax的使用，这个实例是一个很好的实践案例。
在Struts2中，Jquery可以与Ajax结合使用，实现页面的无刷新更新。 Ajax（Asynchronous JavaScript and XML）技术允许前端与后台进行异步通信，无需整个页面刷新，提高了用户体验。在Struts2框架下，我们可以使用...
**jQuery和Ajax结合使用是Web开发中的常见技术组合，它能帮助开发者实现页面无刷新的数据交互，提升用户体验。Ajax（Asynchronous JavaScript and XML）是一种在无需重新加载整个网页的情况下更新部分网页内容的技术...
在“第八章后jQueryAjax的使用”中，我们将深入探讨如何利用jQuery进行AJAX操作。 **AJAX基础** AJAX（Asynchronous JavaScript and XML）是一种创建动态网页的技术，允许在不重新加载整个页面的情况下，与服务器...
标题“PHP-JQuery-Ajax-json”揭示了这个压缩包文件主要涉及的是Web开发中的核心技术，具体包括PHP、jQuery、Ajax以及JSON。这四个元素在构建动态、交互式的Web应用程序时起着至关重要的作用。 1. **PHP（Hypertext...
在这个教程中，我们将深入理解如何使用jQuery中的AJAX函数来读取XML文件，进而实现二级联动效果，这对于初学者来说是一个很好的学习起点。 **一、jQuery AJAX基础** 1. **AJAX简介**：AJAX允许在不刷新整个页面的...
在IT行业中，jQuery和AJAX是两个非常关键的前端技术，它们极大地简化了网页与服务器之间的数据交互。本文将深入探讨一个完整的jQuery+AJAX传输请求的实例，旨在帮助开发者理解如何有效地使用这两种技术实现异步数据...