ajax基本用法

最新推荐文章于 2022-08-08 22:02:48 发布

l_degege

最新推荐文章于 2022-08-08 22:02:48 发布

阅读量223

点赞数

CC 4.0 BY-SA版权

分类专栏： jQuery 文章标签： ajax基本用法

原文链接：https://blog.youkuaiyun.com/mingliangniwo/article/details/45533201

jQuery 专栏收录该内容

31 篇文章

订阅专栏

博客主要围绕Ajax展开，涉及html页面、后端相关内容，重点对jQuery Ajax中data属性进行了详细解析，还给出了相关参考链接，如https://www.cnblogs.com/hi-feng/p/7873352.html等。

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

注：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.youkuaiyun.com/mingliangniwo/article/details/45533201

https://api.jquery.com/jquery.ajax/

4、分割线

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