【ajax】前端ajax传值的几种方法

本博文仅为记录项目过程中遇到的熟练代码

注意事项

1.传值格式

contentType: "application/x-www-form-urlencoded"和contentType: "application/json"

2.ajax在sucecess后继续执行代码

async: false,

3.传值方式

type: "post",

传图片文件到后端

其他的详细代码见本人其他博客

function uploadImage(htmlId) {
    // wjy: 因为懒得写两个这个函数就让增加和修改共用

    // ————————————————
    // 版权声明：本文为CSDN博主「修炼中的菜鸟」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
    // 原文链接：https://blog.csdn.net/j903829182/article/details/78406778

    //var uploadUrl = "http://localhost:8860/v1/uploadDownload/uploadImage";
    // var uploadUrl = "http://192.168.9.123:8860/v1/uploadDownload/uploadImage";

    var downUrl = "localhost:8080/img/"

    var pic = $('#' + htmlId + '')[0].files[0];
    var fd = new FormData();
    //fd.append('uploadFile', pic);
    fd.append('file', pic);

    var upload_image_path = "";
    // 判断有没有取到图像
    if (pic == null) {
        return "undefine.jpg";
    }
    else {
        $.ajax({
            url: "upload/image",
            type: "post",
            // Form数据
            data: fd,
            cache: false,
            contentType: false,
            processData: false,
            async: false,
            success: function (data) {
                console.log(data);
                if (data.code == 0) {
                    alert("图片上传失败");
                    // var img = $("<img />")
                    // img.attr("src", downUrl + "?imageName=" + data.data);
                    // img.width("160px");
                    // img.height("160px");
                    // $("#imgDiv").append(img);
                }
                console.log(data);
                upload_image_path = data.obj;
            }
        });
        return String(upload_image_path);
    }

}

正常传

function deleteHist(historyId) {
    $.ajax({
        url: "brow_hist/deleteItem?historyId=" + historyId,
        contentType: "application/json",
        type: "post",
        async: false,
        success: function (data) {
            console.log(data);
            if (data.code == 0) {
                alert(data.msg);
                return;
            }
            alert(data.msg);
            location.replace(document.referrer);
        }
    });
}

function insertHist() {
    var data = {
        "userId": $("#userId").val(),
        "goodId": $("#goodId").val()
    }
    console.log(data);
    if (data.userId == "") {
        alert("用户id空缺");
        return;
    } else if (data.goodId == "") {
        alert("商品id空缺");
        return;
    }
    var adata = JSON.stringify(data);
    console.log("insertHist" + adata);
    $.ajax({
        url: "brow_hist/increaseItem",
        contentType: "application/x-www-form-urlencoded",
        type: "post",
        data: data,
        async: false,
        success: function (data) {
            console.log(data);
            if (data.code == 0) {
                alert(data.msg);
                return;
            }
            // TODO:网页刷新
            alert(data.msg);
            location.replace(document.referrer);
        }
    });
}