`

Jquery Ajax 练习

 
阅读更多
<%@ page language="java" import="java.util.*" pageEncoding="gbk"%>
<%
	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>jquery-Test1</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 src="jquery/jquery-1.11.1.js"></script>
<script src="jquery/jquery-1.11.1.min.js"></script> 	
</head>
<script>
	$(document).ready(function() {
		$("#s").click(function() {
			$.ajax({
				url : 'jqueryTest/jqueryTestJosn.action',
				type : 'post',
				data:{username:username,password:password},   
				//data : dataString,
				async : true, //默认为true 异步     
				error : function() {
					alert('error');
				},
				success : function(data) {
					//list 类型  json  var s = "[\"a\", \"b\"]";
					alert('success'+data);
					//var jsonData = eval(data);
					var jsonData = eval("(" + data + ")");//为Map 是要这个方法不会报错
					alert('success2'+data);
					$.each(jsonData, function(key, val) {
						alert('_mozi数组中 ,索引 : ' + key + ' 对应的值为: ' + val);
					});
				}
			});
		});
		
		$("#b").click(function(){
			$.getJSON("jqueryTest/jqueryTestJosn.action", { username: "John", password: "2pm" }, function(json){
					var jsonData = eval("(" + json + ")");//为Map 是要这个方法不会报错
					alert('success2'+json);
					$.each(jsonData, function(key, val) {
						alert('_mozi数组中 ,索引 : ' + key + ' 对应的值为: ' + val);
					});
				});
		});
	});
</script>
<style>

</style>

<body>
	<button type="button" id="s">Ajax Json Test</button>
	<button type="button" id="b">Ajax #getJson</button>
</body>

 

package com.sf.test.action;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import com.opensymphony.xwork2.Action;
import com.opensymphony.xwork2.ActionSupport;
import com.sf.test.bean.Test1;

import net.sf.json.JSONArray;
import net.sf.json.JSONObject;

public class JsonTest1Action extends ActionSupport{
	
	private String data;
	private String username;
	private String password;
	
	public String getUsername() {
		return username;
	}

	public void setUsername(String username) {
		this.username = username;
	}

	public String getPassword() {
		return password;
	}

	public void setPassword(String password) {
		this.password = password;
	}

	public String getData() {
		return data;
	}

	public void setData(String data) {
		this.data = data;
	}

	public String arrayToJson(){
		boolean[] boolArray = new boolean[]{true,false,true};
		
		JSONArray jsonArray = JSONArray.fromObject(boolArray);
		System.out.println(jsonArray);
		data = jsonArray.toString();
		//[true,false,true]
		return Action.SUCCESS;
	}
	
	public String listToJson(){
		List list = new ArrayList();
		list.add("first");  
	    list.add("second");  
	      
	    JSONArray jsonArray = JSONArray.fromObject(list); 
	    data = jsonArray.toString();
	    System.out.println(data);
	    //["first","second"]
	    return Action.SUCCESS;
	}
	
	public String mapToJson(){
		try {
			Map<String,Object> map = new HashMap<String,Object>();
			map.put("1", "小王");
			map.put("2", new Integer(1));
			map.put("3", Boolean.TRUE);
			
			JSONObject  mapJson = JSONObject .fromObject(map);
			this.data = mapJson.toString();
			System.out.println(data);
			//{"3":true,"2":1,"1":"小王"}
			return Action.SUCCESS;
		} catch (Exception e) {
			e.printStackTrace();
		}
		return Action.SUCCESS;
	}
	
	public String createToJson(){
		JSONArray jsonArray = JSONArray.fromObject("['json','is','easy']");  
		this.data = jsonArray.toString();
        System.out.println(jsonArray);  
		return Action.SUCCESS;
	}
	
	public String beanToJson(){
		Test1 test = new Test1();
		test.setC1("A");
		test.setC2("B");
		test.setC3("C");
		
		System.out.println("UserName:"+username);
		System.out.println("PassWord::"+password);
		JSONObject jsonBean = JSONObject.fromObject(test);  
		this.data = jsonBean.toString();
		System.out.println(jsonBean); 
		//{"c1":"A","c2":"B","c3":"C"}
		return Action.SUCCESS;
	}
	
/*	   public void json2bean() {  
	        String json = "{name=/"json2/",func1:true,pojoId:1,func2:function(a){ return a; },options:['1','2']}";  
	        JSONObject jb = JSONObject.fromString(json);  
	        JSONObject.toBean(jb, Test1.class);  
	        System.out.println();  
	    } */
	
	// json  var s = "[\"a\", \"b\"]";
	
/*	Json必需的包
	commons-httpclient-3.1.jar
	commons-lang-2.4.jar
	commons-logging-1.1.1.jar
	json-lib-2.2.3-jdk13.jar
	ezmorph-1.0.6.jar
	commons-collections-3.2.jar*/
	
}

 

分享到:
评论

相关推荐

    jquery,ajax的几个小例子

    **jQuery和Ajax技术详解** jQuery是一款非常流行的JavaScript库,它极大地简化了JavaScript的DOM操作、事件处理以及Ajax交互。在Web开发中,jQuery是实现动态和交互性网页的关键工具。Ajax(Asynchronous ...

    jsp.jquery、ajax代码小练习

    适合jsp初学者的练习代码。jquery、ajax的练习

    jQueryAjax动态刷新技术

    jQuery AJAX 动态刷新技术是Web开发中的一个重要概念,它使得网页无需重新加载整个页面就能与服务器交换数据并更新部分网页内容。这一特性显著提升了用户体验,因为它减少了等待时间和网络流量。在本文中,我们将...

    JQuery+AJAX处理XML数据

    **jQuery + AJAX 处理 XML 数据** 在网页开发中,jQuery 和 AJAX 技术的结合是获取和操作服务器端数据的常见方式。本篇将详细探讨如何使用 jQuery 的 AJAX 功能来处理 XML(可扩展标记语言)数据。 **1. jQuery 和...

    ajax的jquery代码

    在Web开发领域,Ajax...在“jQueryTrain”这个项目中,很可能会包含一系列示例和练习,帮助初学者更好地理解和掌握这些Ajax操作。通过实践,你可以更加熟练地运用jQuery来构建功能丰富的、响应式的Web应用。

    ajax练习练习练习练习

    9. **jQuery与Ajax**:jQuery库简化了Ajax操作,如`$.ajax()`、`$.get()`、`$.post()`等函数,让代码更加简洁。 10. **Fetch API**:现代浏览器提供了Fetch API,它是XMLHttpRequest的替代,语法更加直观,支持...

    jquery ajax java实例非常实用

    在IT行业中,jQuery、AJAX和Java是三个关键的技术领域,它们经常被组合使用来创建交互性强、用户体验优良的Web应用程序。这篇关于“jQuery AJAX Java实例”的内容将深入探讨这三个技术如何协同工作,以及如何利用...

    jquery的相关练习

    本文件是一个小的工程,关于ajax框架的jquery的一些小的练习,与大家分享。

    jquery练习

    通过练习,加深对jQuery的理解,提高编写高效、简洁代码的能力。 总结来说,jQuery作为一款强大的JavaScript库,它简化了许多前端开发中的常见任务,提高了开发效率。通过学习和实践jQuery,开发者可以更好地驾驭...

    基于jquery的ajax案例和练习

    传智播客赵君老师视频讲解:基于jquery的ajax案例和练习.

    JQuery第七章上机练习和课后作业

    **jQuery第七章上机练习与课后作业详解** 在学习jQuery的过程中,第七章通常涵盖了更高级和实用的技术,包括DOM操作、事件处理、动画效果以及AJAX交互等。本篇文章将详细探讨这些知识点,旨在帮助前端开发者提升...

    jQuery练习

    在IT行业中,jQuery是一个广泛使用的JavaScript库,它简化了HTML文档遍历、事件处理、动画设计和Ajax交互。本篇文章将深入探讨“jQuery练习”这一主题,特别关注如何使用jQuery实现导航菜单弹出二级菜单的功能。 ...

    jq_ajax练习

    通过上述描述,"jq_ajax的练习"项目很可能是为了帮助学习者理解并实践如何使用jQuery的$.ajax()函数和其他相关方法来执行AJAX请求,包括处理各种类型的HTTP请求,解析不同数据类型,以及错误处理等。通过实际操作,...

    jquery+ajax 学习必备的源码个书籍(推荐)

    在IT领域,jQuery和AJAX是前端开发中的两个重要技术,尤其对于网页动态交互和数据异步传输至关重要。本文将围绕“jquery+ajax 学习必备的源码个书籍(推荐)”这一主题,深入探讨这两个技术的核心概念、应用场景以及...

    Jquery部分效果练习

    在IT行业中,jQuery是一个非常重要的JavaScript库,它极大地简化了JavaScript的DOM操作、事件处理、动画制作以及Ajax交互。对于初学者来说,掌握jQuery的基本用法和常见效果的实现是踏入前端开发领域的关键步骤。本...

    JQuery使用练习

    本练习旨在帮助你熟悉并掌握jQuery的基本用法,包括选择器、事件、文档处理、函数以及属性的运用。 首先,让我们详细探讨jQuery的选择器。jQuery的选择器基于CSS选择器,允许你高效地选取DOM元素。例如,`$("#id")`...

    Ajax练习.rar

    在本"Ajax练习.rar"压缩包中,包含了作者使用Ajax技术进行的一些实践项目,主要聚焦于jQuery中的Ajax操作,同时也涉及到JavaScript的基础Ajax使用。这里我们将深入探讨Ajax的基本概念、在jQuery中的应用以及在实际...

    前端与后端连接,Ajax,axios,jquery等练习

    Ajax、axios和jQuery是实现这种通信的常用工具,它们允许前端与后端进行异步数据交换,提高了用户体验。下面将详细讲解这些技术以及相关的跨域解决方案。 **Ajax(Asynchronous JavaScript and XML)** 是一种创建...

    jquery练习实例

    在“jQuery练习实例”这个压缩包中,我们可以期待找到一系列的示例代码和讲解,帮助我们深入理解jQuery的核心功能和常见用法。 1. **DOM操作**:jQuery的核心在于其对DOM(Document Object Model)的操作。通过简洁...

    Jquery+Ajax

    **jQuery + AJAX 知识点详解** jQuery 是一个流行的JavaScript库,它极大地简化了JavaScript的DOM操作、事件处理以及动画效果。而AJAX(异步JavaScript和XML)是一种创建动态网页的技术,允许在不重新加载整个页面...

Global site tag (gtag.js) - Google Analytics