ajax基本用法-蒲公英云

ajax基本用法

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

注：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://api.jquery.com/jquery.ajax/

4、分割线

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