ajax基本用法

怼烎@ 2021-09-28 19:28 505阅读 0赞

注：[https://www.cnblogs.com/hi-feng/p/7873352.html][https_www.cnblogs.com_hi-feng_p_7873352.html]

1、html页面

#@layout()
    #define main()
    <h1>JFinal Demo 项目首页</h1>
    <div class="table_box">
    	<p>欢迎来到 JFinal极速开发世界！</p>
    	
    	<br><br><br>
    	
    	本Demo采用 JFinal Template 作为视图文件。
    	点击<a href="/blog"><b>此处</b></a>开始试用Demo。
    	
    	<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    	<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    	
    	<div id="cat"></div>
    	<img id="sea" src="" />
    	<button type="button" class='btn btn-danger' id="btn"> btn</button>
    </div>
    #end
    <script type="text/javascript">
    
    
    $("#btn").click(function(){
    	  //alert("123");
    	  $.ajax({
    			url:'/blog/getImgUrl',
    			type:'post',
    			dataType : 'json',
    			success:function(data){
    				console.log(data.img);
    				$("#sea").attr("src",data.img);
    				}
    		  });
    	});
    </script>

2、后端

public void getImgUrl() {
    	String img="http://www.gov.cn/xinwen/2019-07/05/5406487/images/653e59b36f57401b82b4927b2cef5946.JPG";
    	Map<String,String> map=new HashMap<>();
    	map.put("img", img);
    	renderJson(map);
    }

3、jquery ajax中data属性详解

[https://blog.csdn.net/mingliangniwo/article/details/45533201][https_blog.csdn.net_mingliangniwo_article_details_45533201]

[https://api.jquery.com/jquery.ajax/][https_api.jquery.com_jquery.ajax]

4、分割线

$.ajax();
    {
    	url:'',
    	type:'post',
    	data:{'name':'zs','age':17},
    	dataType:'json',
    	success:function (data) {
    		// body...
    	}
    }

[https_www.cnblogs.com_hi-feng_p_7873352.html]: https://www.cnblogs.com/hi-feng/p/7873352.html
[https_blog.csdn.net_mingliangniwo_article_details_45533201]: https://blog.csdn.net/mingliangniwo/article/details/45533201
[https_api.jquery.com_jquery.ajax]: https://api.jquery.com/jquery.ajax/