AJAX 赋值html(bootstrap)

带参数
<script type="text/javascript">
	   /*ajax查看公告信息*/
	   function queryNotice(id){  
		   $.ajax({  
			    data:{id:id}, 
		        type:"POST",  
		        dataType:'json',
		        async:true,//同步
		        url:"${pageContext.request.contextPath}/noticeDetails.do", 
		        success:function(data){  
		            if(data.ranking==null){
		            	 alert("数据为空！！！"); 
		            }else{
		 	            	$("#title").html(data.notice.title);//赋值
		 	            	$("#substance").html(data.notice.substance);//赋值
		 	            	$("#publishTime").html(data.notice.publishTime);//赋值
		 	            	
		            }
		        }
		        });   
	   }  
	</script>
一：js
 /*ajax查看胜率*/
   function queryRanking(){  
	   $.ajax({  
	        type:"POST",  
	        dataType:'json',
	        async:true,//同步
	        url:"${pageContext.request.contextPath}/queryMyInfo.do", 
	        success:function(data){  
	            if(data.ranking==null){
	            	 alert("数据为空！！！"); 
	            }else{
	            	    $("#picture2").attr("src",'http://image.namedq.com/uploads/20190113/23/1547391673-zNDdiAOjfx.jpg');//赋值
	 	            	$("#gameName").html(data.ranking.gameName);//赋值
	 	            	$("#ranking").html(data.ranking.ranking);//赋值
	 	            	$("#createDate").html(data.ranking.createDate);//赋值
	 	            	
	            }
	        }
	        });   
   }  

二、html
<!-- 模态框（Modal） -->
	<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" 
							aria-hidden="true">×
					</button>
					<h4 class="modal-title" id="myModalLabel">
						user info
					</h4>
				</div>
				<div class="modal-body">
					<div class="container">
						<h2>user info</h2>
						<!-- 左对齐 -->
						<div class="media">
							<div class="media-left">
								<img src="http://image.namedq.com/uploads/20190113/23/1547391673-zNDdiAOjfx.jpg"
									class="media-object"  style="width:239px;height:280px;border: 1px solid gray;
									border-radius:5px;"id="picture2" name="picture2">
							</div>
							<div class="media-body">
								<p>游戏名称<h4 class="media-heading" id="gameName"></h4></P>
								<p>胜率:<h4 class="media-heading" id="ranking"></h4></P>
								<p>参赛日期:<h4 class="media-heading" id="createDate"></h4></P>
							</div>
						</div>
					</div>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" 
							data-dismiss="modal">close
					</button>
					<button type="button" class="btn btn-primary">
						reset
					</button>
				</div>
			</div><!-- /.modal-content -->
		</div><!-- /.modal-dialog -->
	</div><!-- /.modal -->

调用
<button  type="button" style="  margin-top: 10px;margin-right: 20px;" class="btn btn-default dropdown-toggle" 
                                  data-toggle="modal" data-target="#myModal" onclick="queryRanking()">
		                         UserInfo
	                           </button>

导入：
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
    <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
	<script src="${pageContext.request.contextPath}/static/js/ajaxfileupload.js"></script>
	<link rel="icon" href="https://cp1.douguo.com/static/nweb/images/favicon.ico?v=444" type="image/x-icon">