`
ileson
  • 浏览: 215038 次
  • 性别: Icon_minigender_1
  • 来自: 河南省
社区版块
存档分类
最新评论

jquery+json

    博客分类:
  • RIA
阅读更多
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
<title>无标题文档</title>  
<style>  
.st{  
    color:#FF0000;  
}  
</style>  
<script type="text/javascript" src="jquery-1.2.6.js"></script>  
<script>  
    /**  
     *把json数据添充到页面中去  
     */  
        function initJson(){  
        var data=[{a:'张三',b:20,c:'男'},{a:'李四',b:50,c:'男'},{a:'王',b:18,c:'女'}];//数组中放的对象;  
        var tb=$("table[id=mytable11]")[0];//得到id="mytable11" 的ul   
          
        $("tr",tb).each(function(){  
            $(this).remove();//循环删除原来table下的tr;  
        })  
        
		//添加表头  
		$("<tr><td>姓名</td><td>年龄</td><td>性别</td></tr>").css("background-color","#0099ee").click(function(){  
                    alert("这是表头");  
                }).appendTo(tb);//把tr添加到tb中。
        //添值  
        $(data).each(function(i){  
            var d=this;//this指当前对象.   
            if(i%2==0){//显示样式  
                $("<tr><td>"+d.a+"</td><td>"+d.b+"</td><td>"+d.c+"</td></tr>").addClass("st").click(function(){//添加鼠标点击事件  
                    alert(d.b);  
                }).appendTo(tb);//把tr添加到table中。  
            }else{  
                $("<tr><td>"+d.a+"</td><td>"+d.b+"</td><td>"+d.c+"</td></tr>").click(function(){  
                    alert(d.b);  
                }).appendTo(tb);//把tr添加到tb中。  
            }  
        })  
          
    }  
      
</script>  
</head>  
  
<body onload="initJson();">  
<table id="mytable11" align="center">
  	<tr id="myheader">
	</tr>
  </table></body>  
</html>


JavaScript 与 Jquery 写循环的对比
var jsonStr='[{name:"aaaa",sex:"1111"},{name:"bbbb",sex:"22222"}]';//模拟后台返回的Json字符串
	/**
	 *用js写循环
	 */
	function test(){
		var jsObj=eval('('+jsonStr+')');
		for(var i=0;i<jsObj.length;i++){
			alert(jsObj[i].name);
		}
	}
	/**
	 *用jquery 写循环
	 */
	function test2(){
		var jsObj=eval('('+jsonStr+')');	
		$(jsObj).each(function(i){
			alert(this.name);
		});
	}



jquery ajax 向后台传需要的值。


/**
		 * 通用的提交修改。
		 * @param e:表示哪个div下面的input
		 */
		function doSubmit(e) {
			// 			var $input = $("#" + e + " input");//指定div 下面的所有input 对象。
			var obj = {};//定义一个存放参数的对象。
			var mpid = $("#mpid").val();//页面上的某个input 的value
			obj['id'] = mpid;//存放key:value 数据。
			$(" input", $("#" + e)).each(function() {//遍历 某id='?' 下的所有input .
				var key = this.name;
				var value = this.value;
				obj[key] = value;
			});
			
			$(" textarea", $("#" + e)).each(function() {//遍历 某id='?' 下的所有textarea .
				var key = this.name;
				var value = this.value;
				obj[key] = value;
			});

			var url = "/mp/updateMP";
			$.ajax({
				async : false,
				url : url,
				type : "post",
				dataType : "json",
				data : obj,
				success : function(respStr) {
					alert(JSON.stringify(respStr));
				
				},
				error : function(respStr) {
					alert(JSON.stringify(respStr));
				}
			});
		}



jquery 操作 select 页面控件。
http://www.cnblogs.com/joboxs/p/3557436.html
$(function(){
      $("#mp_select").change(function(){
// 				alert($(this).val());//选中的option value 值;
				
			});
});




			$(":input+span", $("#regist")).each(function() {//遍历 id=? 下的所有input相邻的下一个 <span> 元素 .
				$(this).remove();//将span 元素清除。
			});



动态获取json 对象的key 和value
for ( var key in respStr.val) {
						// 						alert("Key是:" + key + ";对应的值是:" + respStr.val[key]);
						$("#" + key + "").remove();//清空
						$("[name='" + key + "']").after(
								"<span id='"+key+"' style='color:red;'>"
										+ respStr.val[key] + "</span>");
					}
分享到:
评论

相关推荐

    SSH+jQuery+json 实现的Ajax操作,绝对精华,代码简练清晰,绝对能看明白

    在IT行业中,SSH、jQuery和JSON是Web开发中不可或缺的重要技术。这个压缩包中的资源,"SSH+jQuery+json 实现的Ajax操作,绝对精华,代码简练清晰,绝对能看明白",显然提供了一个使用这些技术实现Ajax级联操作的实例...

    struts2+spring+hibernate+jquery+json

    Struts2、Spring、Hibernate、jQuery 和 JSON 是五个在IT行业中极为重要的技术组件,它们各自在Web应用开发中扮演着不同的角色。这篇文章将详细介绍这些技术的整合使用以及它们的功能。 首先,Struts2 是一个基于 ...

    简单的SSH+JQuery+JSON例子

    在IT行业中,SSH、JQuery和JSON是三个非常重要的技术组件,它们在Web开发领域有着广泛的应用。SSH指的是Struts、Spring和Hibernate这三个Java Web开发框架的缩写,而JQuery是一个强大的JavaScript库,JSON则是一种轻...

    Struts2 + jQuery+JSON 实现ajax

    ### Struts2 + jQuery + JSON 实现Ajax 在现代Web开发中,Ajax技术因其能够实现网页的局部刷新而被广泛采用。本篇文章介绍如何利用Struts2框架结合jQuery与JSON来构建一个简单的Ajax功能。 #### 一、环境搭建 1. ...

    Springmvc+maven+ajax+jquery+json+mybatis登录增删改查详细注释

    Springmvc+maven+ajax+jquery+json+mybatis做的登录,注册,增删改查详细注释,大家可以来一下,看看对自己有没有帮助哈,这是我自己一点点的打的,采用MyEclipse 10运行出来.并且付有sql脚本.可直接导入运行.并且经本人...

    jQuery+json+struts2 开发备忘录(一)

    在本篇“jQuery+json+struts2 开发备忘录(一)”中,我们将探讨如何使用这三种技术来构建高效且用户友好的Web应用程序。jQuery是一个强大的JavaScript库,它简化了DOM操作、事件处理、动画效果以及Ajax交互。JSON...

    Jquery + Json 无刷新分页

    Ajax无刷新分页(jQuery+Json) 做了一个用jQuery来实现的用户控件,VS2008+Access jQuery+ashx+JSON 用ashx来接收请求,数据格式为JSON 实现了批量(选择)操作,编辑接口(反回两个值给用户进行自定义操作) 删除,...

    jQuery+Json 实现Ajax无刷新分类管理实例演示

    jQuery+Json 实现Ajax无刷新分类管理实例演示 基于jquery+json实现的网站后台管理中无刷新的分类管理功能演示,如上图演示所示,可无刷新添加一个分类、在动画弹出的对话框中输入分类名称即可实现保存,同进还可无...

    Ajax无刷新分页(jQuery+Json)

    Ajax无刷新分页(jQuery+Json) 做了一个用jQuery来实现的用户控件,VS2008+Access 只用来玩玩.所以就用Access数据库了 jQuery+ashx+JSON 用ashx来接收请求,数据格式为JSON 实现了批量(选择)操作,编辑接口(反回...

    jQuery+JSON

    标题 "jQuery+JSON" 暗示了我们将探讨如何在Web开发中利用jQuery库与JSON数据格式进行交互。jQuery是一个广泛使用的JavaScript库,它简化了DOM操作、事件处理、动画制作以及Ajax交互。而JSON(JavaScript Object ...

    Java+Servlet+Jquery+Json基础示例

    在IT行业中,Java、Servlet、Jquery和Json都是不可或缺的技术组件,它们在Web开发领域扮演着重要的角色。这里我们将深入探讨这些技术的基础及其在实际应用中的结合。 首先,Java是一种多平台、面向对象的编程语言,...

    Jquery+JSON+REST WCF DEMO

    "Jquery+JSON+REST WCF DEMO"是一个演示项目,它结合了这些技术,以实现高效、灵活的客户端-服务器通信。下面将详细讲解这些技术及其在项目中的应用。 **1. jQuery** jQuery是一个轻量级的JavaScript库,简化了HTML...

    struts2+jquery+json

    Struts2、jQuery和JSON是Web开发中的三个关键技术,它们在构建动态、交互式的Web应用程序时发挥着重要作用。下面将分别对这三个技术进行详细解释,并探讨它们如何协同工作。 Struts2是一个基于MVC(Model-View-...

    一个页面实现Ajax效果的增删改查-JQuery+Json版.zip

    本项目"一个页面实现Ajax效果的增删改查-JQuery+Json版.zip"正是展示了如何利用jQuery库和JSON数据格式在单一页面上实现动态的数据操作,包括添加、删除、修改和查询功能。 首先,jQuery是一个轻量级的JavaScript库...

    jquery+json 实现页面无刷新列表分页

    "jQuery+JSON"实现的页面无刷新列表分页就是这样的一个技术,它允许用户在不重新加载整个网页的情况下查看分页内容。这里我们将深入探讨这个主题,包括它的原理、实现方式以及优势。 **一、页面无刷新分页原理** ...

    基于jQuery+JSON的省市联动效果

    省市区联动下拉效果在WEB中应用非常广泛,尤其在一些会员信息系统、电商网站最为常见。开发者一般使用Ajax实现无刷新下拉联动。本文将讲述,利用jQuery插件,通过读取JSON数据,实现无刷新动态下拉省市

    jquery+json 无刷新分页

    **jQuery + JSON 无刷新分页技术详解** 在现代网页应用中,用户界面的响应速度和用户体验至关重要。无刷新分页技术就是一种提高用户交互体验的方法,它允许用户在不重新加载整个页面的情况下查看不同页面的数据。本...

    ssh2+ajax+jquery+json 登陆验证

    本文将围绕SSH2框架、Ajax、jQuery和JSON这些技术展开讨论,并结合给定的部分内容来深入分析如何利用这些技术进行用户名验证。 ### SSH2框架 SSH2框架是指Spring、Struts2和Hibernate三个开源框架的集成应用,它们...

    Jquery+struts2上传图片,制作进度条,以及Jquery+Json+Struts交互等示例

    Jquery+struts2上传图片,制作进度条等示例,还有Jquery+Json+Struts实现Ajax技术,还有图形处理技术等,虽然很少,但都有重点突出,由于我也是学习,所以代码不是很简洁,对想学习交流的朋友非常合适

    Jquery+Json实现无刷新分页插件

    Jquery+Json实现无刷新分页插件是利用JavaScript库Jquery和数据交换格式Json来创建动态、无需页面完全刷新的分页功能。这种方法提高了用户体验,因为它允许用户在不重新加载整个页面的情况下切换到不同的页面。 ...

Global site tag (gtag.js) - Google Analytics