发送ajax请求

Question

Hello i have such code

<button onclick="sbt()" name="step1[save]" type="submit" class="btn-type5 next-btn-form pie" value="Далее">Send</button>
function sbt(){
var phone = document.getElementById('fld1').value;
        var xmlhttp;
        if (window.XMLHttpRequest)
        {
                xmlhttp=new XMLHttpRequest();
        }
        else
        {
                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }}
        xmlhttp.open("GET","host.com/send.php?phone="+phone+"&t="+Date.now(),true);
        xmlhttp.send();
}

I want to send this request async, but when i use xmlhttp.open(...,...,true) this request doens't even go to server, i watch it in google chrome console, but if i run sbt() function from console request goes ok, and if i use xmlhttp.open(...,...,false) it works fine, can someone help me? Thank you.

Answer 1

The submit button will immediately submit the form it is in, and the browser will leave the page (and the JavaScript execution environment from which the Ajax request is being made).

Cancel the default behaviour of the form submission when you want to use JavaScript instead.

onclick="sbt(); return false;"

(I'd look at using a modern approach to event binding instead of onclick attributes though).

Answer 2

is this your entire page code?

Have you checked the jscript load order ?

please take a look at this---> fiddle (this has a 3 sec response delay )

<h2>AJAX async demo</h2>

<button type="button" onclick="callAjax()">Request data</button>
<div id="testDiv"></div>

<script>
function callAjax() {

    var xmlhttp;
    if (window.XMLHttpRequest) {
        // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp = new XMLHttpRequest();
    } else { // code for IE6, IE5
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange = function () {

        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            document.getElementById("testDiv").innerHTML = xmlhttp.responseText;
        }
    };

    xmlhttp.open("POST", "/echo/html/", true);
    var params = "html=test&delay=3"
    xmlhttp.send(params);
}
</script>