JavaScript---解决点击button页面刷新的问题

最新推荐文章于 2024-05-10 02:13:05 发布

maidu_xbd

最新推荐文章于 2024-05-10 02:13:05 发布

阅读量3.1k

点赞数 2

分类专栏： JavaScript

本文链接：https://blog.csdn.net/maidu_xbd/article/details/100652334

版权

JavaScript 专栏收录该内容

65 篇文章 3 订阅

订阅专栏

功能说明：点击【取消】或【提交】按钮，关闭反馈意见框窗口，导致页面刷新问题。

<html>
.....
 <!-- **********反馈意见框*********** -->
        <div id="feedback" class="feedback" hidden="true">
            <div class="feedback-header">
                <p>反馈问题框</p>
            </div>
            <form>
                <div class="feedback-input">
                    <p>问题：<input id="feedbackQuestion" type="text" name="" placeholder="请输入您想要反馈的问题？"></p>
                    <p>答案：<input id="feedbackAnswer" type="text" name="" placeholder="请输入答案？"></p>
                    <p>姓名：<input id="username" type="text" name="111" placeholder="请输入姓名？"></p>
                </div>
                <div class="feedback-btn">
                    <button type="" onclick="closeFeedback()">取消</button>
                    <button type="" onclick="submitFeedback()">提交</button>
                </div>
            </form>
        </div>
</html>

js代码:

// 点击按钮，收集反馈意见
function openFeedbackBox() {
    $("#feedback").show()
}

// 点击取消按钮，关闭反馈问题框
function closeFeedback() {
    $("#feedback").hide()
}
//点击提交按钮，向后台发送反馈问题
function submitFeedback() {
    var feedbackQuestion = $("#feedbackQuestion").val()
    var feedbackAnswer = $("#feedbackAnswer").val()
    var username = $("#username").val()
    var args = {
        type: "get",
        url: "/qa_feedback",
        data: { "question": feedbackQuestion, "answer": feedbackAnswer, "name": username },
        success: function(redata) {
            // console.log("后台返回数据：", redata)

        }
    }
    ajax(args);
}

解决方法：导致页面刷新的原因是button缺少type类型，在<button>标签中加上【type=“button”】即可。