Question

当我在表单中上传图片时，图片会上传，但页面会刷新。我不希望刷新该页面以上传图像。这是图像保存按钮代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Example</title>
    <link rel="stylesheet" type="text/css" media="screen" href="./test.css" />
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
    <div class="col-container">
        <div class="row-container">
            <div class="scheme" id="first">
                Choice1
            </div>
            <div class="scheme" id="second">
                Choice2
            </div>
            <div class="scheme" id="third">
                Choice3
            </div>
            <div class="scheme" id="custom">
                Custom
            </div>
        </div>

        <div class="row-container" id="custom-opt">
            <button class="btn elem">Choose xyz</button>
            <button class="btn elem">Choose abc</button>
        </div>

        <div class="sep"></div>
		
        <div class="row-container">
            <btn class="small-btn">cancel</btn>
            <div class="sep"></div>
            <btn class="small-btn">prev</btn>
            <btn class="small-btn">next</btn>
        </div>
    </div>
	<script>
	var scheme = "";
	$("#custom-opt").hide();
	$(".scheme").click(function () {
		if (scheme!= "") {
			if (scheme==$(this).attr("id")) {return;}
			if (scheme=="custom") {$("#custom-opt").hide();}
			$("#"+scheme).removeClass("selected");
		}
		scheme = $(this).attr("id");
		$(this).addClass("selected");
		if (scheme == "custom") {
			$("#custom-opt").show();
		}
	});
	</script>
</body>
</html>

Answer 1

如果您不想刷新页面（即提交表单），则需要阻止表单执行此操作：

// Inject the event ---------------v
$('#app-icon-btn').click(function (e) {
    // Prevent the event from doing what it normally does
    e.preventDefault();
    //...continue with script

这将允许您的ajax接管并提交表单。

在没有点击提交表单的情况下上传图片后页面是否刷新？

1 个答案: