如何实现前端与后端数据交互

前后端数据交互

把上一篇：前端入门（html+css+js）的代码中前后端数据交互部分拿出来看看

定义变量

	var pay = '';    //举例
	var ispay=false;
	var lastpay='包年包月';

设置监听器
#pay是指找到id为pay的要素，当对其执行‘click’操作时就执行下面函数内容。

	
	$('#pay').on('click', 'button', function() {
		if(ispay!=false){
			lastpay=pay;
		}
		
		console.log($(this).attr('id'));
		
		pay=$(this).attr('id');

		if(pay=="按量计费"){
			$('#Time').hide();
		}else if(pay=="包年包月"){
			$('#Time').show();
		}
		document.getElementById(lastpay).style.backgroundColor = "buttonface";
		document.getElementById(pay).style.backgroundColor = "GoldenRod";
		ispay=true;
		
		
	})

利用ajax进行前后端交互
前端
定义date数据，利用ajax将数据发送到目标url
如果访问成功执行这个函数function (data) ，data是从服务器返回来的数据
我们在这里是将data内容循环直接构造成一个html的字符串，利用命令$(’#result’).html(html);将id为result的地方的html更新为我们的html，这样就可以在页面上看到服务器返回的内容了

var date = {
				"pay":pay,     //支付方式
				"area":area,    //地区
				"zone":'random',  //可用区
				"cpu":cpu,      //cpu
				"memory":memory,   //内存
				"systemdisk":system,  //系统盘类型
				"systemdiskData":systemdiskData,  //系统盘大小
				"datadisk": dataList,                  //数据盘的信息
				"bandwidthCharge":bandwidthCharge,  //带宽支付方式
				"publicBandwidth":publicBandwidth,  //带宽大小
				"time":time,   //时长
				"count":count, //台数
				
			}
			
			
			
			var arrJson=JSON.stringify(date);
			
			console.log(arrJson);
			
			$.ajax({
	            type: "post",//数据发送的方式（post 或者 get）
	            url: "http://localhost:8080/cloud/search",//要发送的后台地址
	            //data: {area_:area,cpu_:cpu,memory_:memory},//要发送的数据（参数）格式为{'val1':"1","val2":"2"}
	            contentType: 'application/json; charset=UTF-8',
	            data: arrJson,
	            datatype: "json",//后台处理后返回的数据格式
	            success: function (data) {//ajax请求成功后触发的方法
	             
	               //alert('请求成功');
	              // $("#result").html()
	               console.log(data);
	              //上面已经得到数据，现在需要做的是刷新局部html，result
	              var html='<tr bgcolor="#b4c8ed"><th width="15%">机型</th><th width="15%">规格</th><th width="10%">cpu数</th><th width="10%">内存</th><th width="10%">带宽</th><th width="10%">pps</th><th width="10%">服务商</th><th width="10%">配置费用</th><th width=200px>带宽费用</th></tr>';
	              for(var i=0;i<data.length;i++){
	              	html=html+'<tr>';
	              	html=html+'<td  width=15% align="center" >'+data[i].type+'</td>';
	              	html=html+'<td  width=15% align="center" >'+data[i].concreteType+'</td>';
	              	html=html+'<td  width=10% align="center">'+data[i].vcpu+'</td>';
	              	html=html+'<td  width=10% align="center">'+data[i].memory+'</td>';
	              	html=html+'<td  width=10% align="center">'+data[i].bandwidth+'</td>';
	              	html=html+'<td  width=10% align="center">'+data[i].pps+'</td>';
	              	html=html+'<td  width=10% align="center">'+data[i].provider+'</td>';
	             	html=html+'<td  width=10% align="center">'+data[i].peizhiprice+'</td>';
	              	html=html+'<td  width=10% align="center">'+data[i].bandwidthprice+'</td>';
	              
	            	html=html+'<tr>';
	              }
	              $('#result').html(html);
	               
	            },
	            error: function (msg) {//ajax请求失败后触发的方法
	                alert(msg);//弹出错误信息
	            }
	        });

后端
@RequestBody String data 这是后端收到的数据，对其进行解析操作等等就可以使用拉

	
	/*
	 * url:http://localhost:8080/cloud/search
	 *    输入：一系列参数 json格式
	 *    过程：拿到参数查询符合条件的数据   
	 *    输出：符合条件的list
	 */
	
	@SuppressWarnings("null")
	@RequestMapping(value = "/search", method = RequestMethod.POST)
	@ResponseBody
	public List<TypeInfo> search(@RequestBody String data,
			 HttpServletRequest request
			 , HttpServletResponse res,Map<String, Object> model
			 ) throws Exception {

		System.out.println("=========这是从前端传来的参数json数据 ==========="+data);
		JSONObject json=JSONObject.parseObject(data);	
		String pay=json.getString("pay");  //支付方式
		String area=json.getString("area");  //地区
		String cpu=json.getString("cpu");  
		String memory=json.getString("memory").substring(1);
		String systemdisk=json.getString("systemdisk");  //系统盘类型
		String systemdiskData=json.getString("systemdiskData");   //系统盘大小
		String bandwidthCharge=json.getString("bandwidthCharge");   //带宽支付方式
		String publicBandwidth=json.getString("publicBandwidth");   //带宽大小
		String time=json.getString("time");
		String count=json.getString("count");		
		List<DataDisk> datadiskList = JSON.parseArray(json.getString("datadisk"), DataDisk.class);  //数据盘
		
		Map<String,String> map=SearchSuitableProvider.searchSuitableProvider(data); //寻找符合条件的数据
		
		//这里需要做的工作是拿着上面信息分别去三大云的数据库取信息
		//规格族 实例规格 cpu数 memory数 bandwidth pps 服务商 
		//每个服务商一个函数,最后都放进这个list里
		List<TypeInfo> typeList=  new ArrayList<TypeInfo>();
		
		
		//阿里云
		System.out.println("阿里:"+map.get("Ali"));
		if(map.get("Ali").equals("1")) {
			
			List<TypeInfo> aliList= SearchAli.searchAli(pay,area,cpu,memory,systemdisk,systemdiskData,datadiskList,bandwidthCharge,publicBandwidth,time,count);
			typeList.addAll(aliList);
		}
		//腾讯云
		System.out.println("腾讯:"+map.get("Tencent"));
		if(map.get("Tencent").equals("1")) {
			List<TypeInfo> tencentList= SearchTencent.searchTencent(pay,area,cpu,memory,systemdisk, systemdiskData,datadiskList,bandwidthCharge,publicBandwidth,time,count);
			typeList.addAll(tencentList);
		}
		
		//华为云
		System.out.println("华为:"+map.get("Huawei"));
		if(map.get("Huawei").equals("1")) {
			List<TypeInfo> huaweiyunList=SearchHuawei.searchHuawei(pay,area,cpu,memory,systemdisk, systemdiskData,datadiskList,bandwidthCharge,publicBandwidth,time,count);
			typeList.addAll(huaweiyunList);

		}
		
		

		System.out.println("============这是国内三大云符合要求的个数====="+typeList.size());
	
		request.setAttribute("typeList", typeList);
	
		return typeList;   //这是返回前端的数据data
	}

大致操作，具体可以再讨论，欢迎一起学习~整这个是完全成功哒，当然也是看了无数博客，有些一试可能不太行，但是总会可以的。