ajax实例--传输json数据

最新推荐文章于 2021-08-05 23:11:36 发布

dacainiao007

最新推荐文章于 2021-08-05 23:11:36 发布

阅读量3.3k

点赞数

CC 4.0 BY-SA版权

文章标签： json ajax email integer xmlhttprequest stylesheet

本文链接：https://blog.youkuaiyun.com/dacainiao007/article/details/7884200

JavaWeb 专栏收录该内容

35 篇文章

订阅专栏

本文提供了五个基础JSON范例，从单个人到复杂数据结构，展示了JSON在存储和处理数据方面的灵活性。通过实例演示了如何使用JSON进行数据操作，并介绍了JSON在实现三级联动中的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

五个基础 JSON范例。

<script type="text/javascript">
		//json格式,这是只有一个人。 
		var people = {firstname:"zhang1",lastname:"xxxx1",email:"kengni@125.com"};

		alert(people.email);
  </script>

  <script type="text/javascript">
  	//如果有多个人是并列的，就相于一个数组，里面有多个人。
		var people = [
				{firstname:"zhang1",lastname:"xxxx1",email:"kengni@125.com"},
				{firstname:"zhang2",lastname:"xxxx2",email:"kengni@126.com"}
				];
				alert(people[1].lastname);
  </script>

  <script type="text/javascript">
  	//如果有多个人是并列的，就相于一个数组，里面有多个人。其实都是key和value.
  	//这个其实就是key就一个普通的key，而value不过是一个数组。
		var people = {param1:[
					{firstname:"zhang1",lastname:"xxxx1",email:"kengni.com1"},
					{firstname:"zhang2",lastname:"xxxx2",email:"kengni.com2"}
				]};
		alert(people.param1[1].lastname);
  </script>

  <script type="text/javascript">
  	//就是一个数组。
		var people = [
				
				{"param1":[{firstname:"zhang11",lastname:"xxxx11",email:"kengni11.com"},
				{firstname:"zhang12",lastname:"xxxx12",email:"kengni12.com"}]},
				{"params2":[
                           {firstname:"zhang21",lastname:"xxxx21",email:"kengni21.com"},
                           {firstname:"zhang22",lastname:"xxxx22",email:"kengni22.com"}
	                                ]},
				{"params3":[
                           {firstname:"zhang31",lastname:"xxxx31",email:"kengni31.com"},
                           {firstname:"zhang32",lastname:"xxxx32",email:"kengni32.com"}
				        ]}	
		];
		alert(people[2].params3[0].lastname);
  </script>

  <script type="text/javascript">
  	//最普通的一个json格式 ，里面就像有复合的东西 。
  			var people = {
			username:"zhang",
			age:20,
			info:{phone:"12123213",tel:"659999"},
			address:[
				{homeAddress:"北京",homeCode:12345778},
				{companyAddress:"河北",companyCode:1300000},
			]
		};
		alert(people.info.tel);
		alert(people.address[1].companyCode);
  </script>

JSON实现三级联动：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>json01.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

  </head>
  
  <script type="text/javascript">
  	function ajaxFunction(){
		   var xmlHttp;
		   try{ // Firefox, Opera 8.0+, Safari
		        xmlHttp=new XMLHttpRequest();
		    }
		    catch (e){
			   try{// Internet Explorer
			         xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
			      }
			    catch (e){
			      try{
			         xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
			      }
			      catch (e){}
			      }
		    }
		     return xmlHttp;
 	}
 	
 	
 	window.onload=function(){
 		
 		 var  xmlRequest=ajaxFunction();
 		 
 		 xmlRequest.onreadystatechange=function(){
 		 	if(xmlRequest.readyState==4){
 		 		if(xmlRequest.status==200||xmlRequest.status==304){
 		 			var sdata=xmlRequest.responseText;
 		 			alert(sdata);
 		 			//函数 eval 会把一个字符串当作它的参数。然后这个字符串会被当作 JavaScript 代码来执行
 		 			var sDataObj=eval("("+sdata+")");
					 alert("sDataObj  "+sDataObj);
					 for(var i=0;i<sDataObj.length;i++){
					 		 var province = document.getElementById("province");
					 		 var optionElment = document.createElement("option");
					 		 optionElment.setAttribute("value", sDataObj[i].pname);
					 		 var textElement = document.createTextNode(sDataObj[i].pname);
					 		 optionElment.appendChild(textElement);
					 		 
					 		 province.appendChild(optionElment); 
					 		
					 }
 		 		}
 		 	}
 		 }
 		
 		xmlRequest.open("post","../jsonServlet?timeStamp="+new Date().getTime(),true);
 		
 		xmlRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
 		
 		xmlRequest.send(null);
 		
 	}
  </script>
  
  <body>
	  <select id="province" name="province">
	       <option value="">请选择....</option>
	     </select>
		 <select id="city" name="city">
		 	<option value="">请选择.....</option>
		 </select>
  </body>
</html>

package cn.ajax;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.sun.org.apache.bcel.internal.generic.ISTORE;

import net.sf.json.JSONArray;

import cn.bean.Province;

public class JsonServlet extends HttpServlet {


	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {

		this.doPost(request, response);
		
	}

	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {

		request.setCharacterEncoding("utf-8");
		response.setContentType("text/html;charset=utf-8");
		PrintWriter out=response.getWriter();
		
		//模拟数据库
		Province p1=new Province(1,"吉林省");
		Province p2=new Province(2,"辽宁省");
		Province p3=new Province(3,"山东省");
		
		List<Province> list=new ArrayList();
        list.add(p1);
        list.add(p2);
        list.add(p3);
		
        //在实际项目中有没有和一种工具直接可以把集合转换成json格式的数据。
        JSONArray jsonArray = JSONArray.fromObject(list);
        System.out.println(jsonArray.toString());
        
        //回到客户端
        out.println(jsonArray.toString());
        
        
	}

}

package cn.bean;

public class Province {

	public Province() {
		
	}
	
	public Province(Integer pid, String pname) {
		this.pid = pid;
		this.pname = pname;
	}
	private Integer pid;
	private String pname;
	
	public Integer getPid() {
		return pid;
	}
	public void setPid(Integer pid) {
		this.pid = pid;
	}
	public String getPname() {
		return pname;
	}
	public void setPname(String pname) {
		this.pname = pname;
	}


}