简体   繁体   中英

jQuery AJAX POST executes twice

My AJAX call always executes twice. I'm using normal Javascript Event Handlers and the <input type="button"> . I'm not quite sure where I'm going wrong, the server returns a JSON array which AJAX can receive successfully and parse. I'm quite sure it is my AJAX because when I ran the code the alert popped up twice. alert("ran") . The server does not return any redirect headers.

HTML

<form action="/" onsubmit="return false">
    <b>Enter your announcement here</b>
    <span class="dropdown"><img src="/index/img/p/help" style="width: 20px; height: 20px;"/>
        <span class='dropdown-content'>
            <b>tip:</b> try to make your announcement less than 100 words. Choose what you say wisely.
        </span>
    </span>
    <textarea class='form-control' id='announcetxtbox' style='resize: vertical'></textarea>
    <select id="announce-type">
        <option value="general">General</option>
        <option value="social">Social</option>
        <option value="world">World</option>
        <option value="maint">Site Maintenence</option>

    </select>
    <input type="button" id="announce-submit" class="btn btn-primary" value="Submit">

    <script>
        CKEDITOR.replace("announcetxtbox");
        CKEDITOR.config.toolbar = [
            {name: 'basicstyles', items: ['Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'RemoveFormat']},
        ];
    </script>

</form>

JAVASCRIPT

function _(str) {
    return d.getElementById(str);
}
function get_announcement_data(ele) {

    var type, answer = _("announce-msg");
    switch (ele) {
        case "general":
            type = "G";
            break;
        case "social":
            type = "S";
            break;
        case "world":
            type = "W";
            break;
        case "maint":
            type = "M";
            break;
        default:
            type = "G";
            break;
    }

    $.ajax({
        url: "/profile_scripts/announcements.php?u=get",
        type: "POST",
        data: {type: type, CSRF_TOKEN: _("CSRF_TOKEN_VALUE").value},
        success: function (data) {
            data = JSON.parse(data);
            answer.innerHTML = "";
            for (var i = 0; i < data.length; i++) {
                if (data[i].response == 1) {
                    answer.innerHTML += data[i].msg + "<small> Written By: " + data[i].author + " on " + data[i].date + "</small>"
                } else {
                    answer.innerHTML = data[i].msg;
                }
            }

        }
    })

}
function add_announcement() { //THIS FUNCTION RUNS TWICE!

    var announcement = CKEDITOR.instances.announcetxtbox.getData();
    var type = _("announce-type").value;
    var code;
    switch (type) {
        case "general":
            code = "G";
            break;
        case "social":
            code = "S";
            break;
        case "world":
            code = "W";
            break;
        case "maint":
            code = "M";
            break;
        default:
            code = "G";
            break;
    }

    $.ajax({
        url: "/profile_scripts/announcements.php?u=post",
        type: "POST",
        data: {type: code, CSRF_TOKEN: _("CSRF_TOKEN_VALUE").value, msg: announcement},
        success: function (data) {
            data = JSON.parse(data);
            if (data.response == 1) {
                alert("ran");
                get_announcement_data(type);

            } else {

                alert("Something went wrong!");

            }

        }
    });

}
d.addEventListener("DOMContentLoaded", function () {

    _("quick-actions-go").addEventListener("click", quick_action_search)

    _("manual-data-pull").addEventListener("click", pull_data);


    _("announce-submit").addEventListener("click", function (e) {

        add_announcement(); <--- Event Listener
        e.preventDefault();
        e.stopPropagation();
    });

    var tab_elements = d.querySelectorAll("[id=ann-tab]");

    for (var i = 0; i < tab_elements.length; i++) {
        tab_elements[i].addEventListener("click", function (e) {
            e.preventDefault();
            get_announcement_data(this.dataset.modeval)
        });
    }


});

When submitting form. The both ajax will call. You first get method and post method that makes the problem

Here your form is submitting twice. You ca 1. Pass 'e' when you are calling fun add_announcement. Aad add line

e.preventDefault();

as first line in fun add_announcement(e).

  1. Also, unbind submit actiom from form

     $('form').unbind('submit').submit(); 

Hope it helps.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM