有效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>

---

---

---

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;
        }
    });
}