有效Ajax案例

<script>
$(document).ready(function(){
    $("input:submit").click(function(){
        $.ajax({
            type: "POST",
            url: "Ajax",
            contentType: 'application/x-www-form-urlencoded;charset=utf-8',
            data: {name:$("#username").val(), pwd:$("#password").val()},
            dataType: "html",
            success: function(data,status){
                alert("数据: \n" + data + "\n状态: " + status);
                     },
            error:function(data,status){
                alert("数据: \n" + data + "\n状态: " + status);
            },
                     
        });
    });
});
</script>

---

---

---

实体类接收参数类型：

  $.ajax({
                    type: "GET",
                    url: "/disk/user/updateUserphoto?id="+v_id+"&photo="+v_photo,
                    contentType: 'application/x-www-form-urlencoded;charset=utf-8',
                    data: {params},
                    dataType: "html",
                    success: function(data){
                        alert("修改完成");
                    },
                    error:function(data){
                    },
                });

---

---

---

function commit(){
    $.ajax({
        type: 'GET',
        // dataType: 'json',
        async: true,
        url: "editArticleSubmit1",
        data: {
            name:$("#name").val(),
            sex:$("#sex").val(),
            age:$("#age").val(),
            purpose:$("#purpose").val(),
            workAge:$("#workAge").val(),
            content:$("#content").val(),
        },
        success: function (data) {
            // obj=eval('('+obj+')');//这段代码就是将字符串转换成json格式

            /*var name = this.data.name;
            var sex = this.data.sex;
            var age = this.data.age;
            var purpose = this.data.purpose;
            var workAge = this.data.workAge;
            var content = this.data.content;*/

            alert("投递成功");
        }, error: function (msg,status) {
            alert(msg+status);
            return;
        }
    });
    // var a=$("#massage").val();
    // alert(a)
}

 ajax发送获取数据处理后显示在前端页面

function articleList(page) {
    $.ajax({
        url: "indeArticleList",
        data: {
            pageNum: page,
            pageSize: 9
        },
        type: 'GET',
        dataType: 'json',
        async: true,
        success: function (data) {
            var list = data.list;
            $("#prePage").val(data.prePage);
            $("#nextPage").val(data.nextPage);
            $("#tailPage").val(data.pages);
            $("#pageNum").text(data.pageNum);
            console.log(list);
            if(list != null && list.length > 0){
                $("#container").empty();
                var articleDiv = "";
                for(var i=0; i<list.length; i++){
                    var article = "";
                    if(i%3==0){
                       article += "<div class='row'>";
                    }
                    article += "<div class='col-md-4'>" +
                        "   <div class='box-item'>" +
                        "      <div class='entry-thumb'>" +
                        "        <img class='img-responsive' src='"+list[i].imgUrl+"'>" +
                        "        <a class='thumb-link' href='qryById?id="+list[i].articleId+"'><i class='fa fa-link'></i></a>" +
                        "      </div>" +
                        "      <div class='content'>" +
                        "         <h3 class='entry-title'><a href='qryById?id="+list[i].articleId+"'>"+list[i].title+"</a></h3>" +
                        "         <p class='summary'>"+list[i].summary+"</p>" +
                        "         <span>"+list[i].createDate+"</span>" +
                        "      </div>" +
                        "      <div class='read-more'><a href='qryById?id="+list[i].articleId+"'>阅读全文...</a></div>" +
                        "    </div>" +
                        "</div>";
                    if(i>0 && i%3==0){
                        articleDiv += "</div>" + article;
                    }else{
                        articleDiv += article;
                    }
                }
                articleDiv += "</div>";
                $("#container").append(articleDiv);
            }
        },
        error: function (msg) {
            alert("服务器异常，请稍后再试！")
            return;
        }
    });
}

 此处后端接口以及数据：

    @GetMapping("indeArticleList")
    @ResponseBody
    public PageInfo<Article> articleList(@RequestParam(required = false, defaultValue = "1") Integer pageNum, @RequestParam(required = false, defaultValue = "9") Integer pageSize) {
        // 获取文章列表
        PageInfo<Article> articleList = articleService.list1();
        return articleList;
//此处返回的数据：

PageInfo{pageNum=1, pageSize=2, size=2, startRow=0, endRow=1, total=2, pages=1, list=[Article(articleId=2b3b22ae4c1842549848b83c876b3a2e, author=admin, title=还是没有上传成功, summary=还是没有上传成功, content=### 再一次测试上传图片
上传：
, htmlContent=<h3 id="h3-u518Du4E00u6B21u6D4Bu8BD5u4E0Au4F20u56FEu7247"><a name="再一次测试上传图片" class="reference-link"></a><span class="header-link octicon octicon-link"></span>再一次测试上传图片</h3><p>上传：<br><img src="images/articles/87cc1538f0.jpg" alt=""></p>
, type=0, typeName=null, classify=0, classifyName=null, createDate=2019-11-02, updateDate=2019-11-02 22:00:51, imgUrl=images/articles/87cc1538f0.jpg, enable=null), Article(articleId=a8db37aecc9c4786815e14c677cdfb0f, author=admin, title=编辑, summary=编辑测试, content=测试vhjv, htmlContent=<p>测试vhjv</p>
, type=1, typeName=null, classify=0, classifyName=null, createDate=2019-11-21, updateDate=2019-11-24 15:28:47, imgUrl=images/articles/blog.jpg, enable=null)], prePage=0, nextPage=0, isFirstPage=true, isLastPage=true, hasPreviousPage=false, hasNextPage=false, navigatePages=8, navigateFirstPage=1, navigateLastPage=1, navigatepageNums=[1]}

    }

articleList.list的数据：