jQuery_基础四_Ajax_JSON_XML

jQuery_基础4_Ajax_JSON_XML

<script type="text/javascript">

		var value ={section:
	{
		"tilt":"book-siingning event", 
		"singnig":
			[
				{
					"autor":{"title":"mr,name:vikram"},
					"book":{"tilte":"a suitable boy ,price:22.95"}
				},{
					"autor":{"title":"mr,name:vikram"},
					"book":{"tilte":"a suitable boy ,price:22.95"}
				}
			
			]
	}
};
		
		alert(value.section.tilt);
		alert(value.section.singnig[0].autor.title);
		alert(value.section.singnig[1].book.tilte);
		
</script>

JSON:
1.json中双引号等要转义
2.json uncode编码(全球最大的字符集)

JSON->Java对象  
Java对象->JSON

public static void main(String[] args) throws Exception
	{
		//要传一个格式良好的json字符串
		String jsonContent = "{'hello': 'world', 'abc': 'xyz'}";
		
		//JSONObject:专门处理普通json字符串
		JSONObject jsonObject = new JSONObject(jsonContent);
		
		String str1 = jsonObject.getString("hello");
		String str2 = jsonObject.getString("abc");
		
		System.out.println(str1);
		System.out.println(str2);
		
		System.out.println("--------------------");
		
		//要符合json格式的字符串.  数组的json格式:[:开头 ,   ]:结束
		jsonContent = "[{'hello': 333, 'abc': false, 'xyz': {'a': 1, 'b': 'ab'}}, {'hello': 555, 'abc': true, 'xyz': {'a': 3, 'b': 'ba'}}]";
		
		//JSONArray:专门处理数组的.
		JSONArray jsonArray = new JSONArray(jsonContent);
		
		for(int i = 0; i < jsonArray.length(); i++)
		{
			JSONObject jsonObject2 = jsonArray.getJSONObject(i);
			
			int value1 = jsonObject2.getInt("hello");
			boolean value2 = jsonObject2.getBoolean("abc");
			//String value3 = jsonObject2.getString("xyz");
			
			JSONObject jsonObject3 = jsonObject2.getJSONObject("xyz");
			
			int value3 = jsonObject3.getInt("a");
			String value4 = jsonObject3.getString("b");
			
			System.out.println(value1);
			System.out.println(value2);
			System.out.println(value3);
			System.out.println(value4);
		}
	}

public static void main(String[] args) {
		Person person = new Person();

		person.setB(false);
		person.setUsername("zhangsan");
		person.setPassword("123456");
		person.setAddress(null);
		person.setAge(30);

		person.getList().add("hello");
		person.getList().add("world");
		person.getList().add("hello world");

		Gson gson = new Gson();

		String result = gson.toJson(person);

		System.out.println(result);
		Person person2 = gson.fromJson(result, Person.class);
	}

JSON向前端输出:

		Gson gson = new Gson();
		// 转换之后两个数组
		String result = gson.toJson(list);

		System.out.println(result);

		resp.setContentType("application/json; charset=utf-8");
		resp.setHeader("pragma", "no-cache");
		resp.setHeader("cache-control", "no-cache");
		PrintWriter out = resp.getWriter();
		out.println(result);
		out.flush();

字符串向前端输出:

	int p1 = Integer.parseInt(req.getParameter("param1"));
		int p2 = Integer.parseInt(req.getParameter("param2"));

		resp.setHeader("pragma", "no-cache");
		resp.setHeader("cache-control", "no-cache");
		PrintWriter out = resp.getWriter();
		out.println(p1 + p2);
		out.flush();

XML向前端输出:

// 1 拼接字符串
		// 2 自己生成xml
		Document document = DocumentHelper.createDocument();
		Element rootElement = document.addElement("users");
		rootElement.addComment("This is a comment!");
		Element userElement = rootElement.addElement("user");

		Element idElement = userElement.addElement("id");
		Element nameElement = userElement.addElement("username");
		Element ageElement = userElement.addElement("age");
		Element addressElement = userElement.addElement("address");

		idElement.setText(person.getId() + "");
		nameElement.setText(person.getUsername());
		ageElement.setText(person.getAge() + "");
		addressElement.setText(person.getAddress());

		response.setContentType("text/xml; charset=utf-8");// 设置响应头.
		response.setHeader("pragma", "no-cache");
		response.setHeader("cache-control", "no-cache");

		PrintWriter out = response.getWriter();

		OutputFormat format = OutputFormat.createPrettyPrint();
		format.setEncoding("utf-8");
		XMLWriter xmlWriter = new XMLWriter(out, format);
		xmlWriter.write(document);
		out.flush();

ajax取字符串:

$(function()
	{
		$("#button1").click(function()
		{
			//jquery的ajax方法
			$.ajax({
				type: "POST",//必填,提交方式
				url: "ajax",//必填,提交地址
				dateType: "html",//默认普通字符串html/ 其他: xml/json/
				data: {'param1': $("#param1").val(), 'param2': $("#param2").val()},
				//接收一个参数,回传过来的数据. 回调
				success: function(returnedData){
					$("#result").val(returnedData);
				}
			});
		});
	});
	</script>
  </head>
  <body>
    <input type="text" id="param1">+
    <input type="text" id="param2">=
    <input type="text" id="result"> <input type="button" value="get content from server" id="button1">
  </body>

ajax取json:

$(function()
	{
		$("#button1").click(function()
		{
			//3个参数  地址 ,提交参数(这里不需要提交参数),回调
			$.get("gsonservlet",{}, function(returnedData, status)
			{
				console.info(status);
				var html = "<table width='60%' border='1' align='center'><tr><th>id</th><th>name</th><th>companyAddress</th><th>homeAddress</th>"
				
				for(var i = 0; i < returnedData.length; i++)
				{
					var people = returnedData[i];
					
					var id = people.id;
					var name = people.name;
					var companyAddress = people.address.companyAddress;//这里js的提示会失效,因为根本不摘掉书
					var homeAddress = people.address.homeAddress;
					
					html += "<tr align='center'><td>" + id + "</td><td>" + name + "</td><td>" + companyAddress + "</td><td>" + homeAddress + "</td></tr>";
				}
				
				html += "</table>";
				
				$("#theBody table:eq(0)").remove();
				
				$("#theBody").append(html);
				
			});			
		});
	});
	</script>
  </head>
  <body id="theBody">
    <input type="button" value="get json content from server" id="button1">
  </body>

ajax取xml:

	$(function()
	{
		/*
		$("#button1").click(function()
		{
			$.ajax({
				
				type: "POST",
				url: "xmlservlet",
				dateType: "xml",//xml要指定 默认html
				data: {name: $("#name").val()},
				//returnedData:dom对象
				success: function(returnedData){//returnedData:服务器端返回来的xml对象
					//将dom对象转成jquery对象.调用xml的find方法
					var id = $(returnedData).find("id").text();
					var name = $(returnedData).find("username").text();
					var age = $(returnedData).find("age").text();
					var address = $(returnedData).find("address").text();
					//创建表格
					var html = "<table width='60%' border='1' align='center'><tr><th>id</th><th>name</th><th>age</th><th>address</th><tr align='center'><td>" + id + "</td><td>" + name + "</td><td>" + age + "</td><td>" + address + "</td></tr></table>";
				
					//找到第一个table,把第一个table删掉
					$("#theBody table:eq(0)").remove();
					$("#theBody").append(html);
					
				}
			});
		});
		*/
		
		$("#button1").click(function()
		{
			//jquery:提供的简化的写法
			// $.get(arg0,arg1,arg2)//请求资源路径,传递的参数,回调函数
			$.post("xmlservlet", 
			{
				name: $("#name").val()	//多个的话逗号隔开		
			}, function(returnedData, status)//status:成功的话就执行回调.
			{
				var id = $(returnedData).find("id").text();
				var name = $(returnedData).find("username").text();
				var age = $(returnedData).find("age").text();
				var address = $(returnedData).find("address").text();
				
				var html = "<table width='60%' border='1' align='center'><tr><th>id</th><th>name</th><th>age</th><th>address</th><tr align='center'><td>" + id + "</td><td>" + name + "</td><td>" + age + "</td><td>" + address + "</td></tr></table>";
			
				$("#theBody table:eq(0)").remove();
				$("#theBody").append(html);
			});
		
	});
	});
	</script>
  </head>
  <body id="theBody">
    <select id="name">
    	<option value="zhangsan">zhangsan</option>
    	<option value="lisi">lisi</option>
    </select>
    <input type="button" id="button1" value="get content from server">
  </body>