无法拨打 AJAX 电话

Question

我正在尝试使用 AJAX 将数据插入数据库。 ajax 调用转到 servlet，这意味着将数据插入数据库。但是我认为我在初始化 ajax 对象的某个地方犯了一个错误。当我点击提交按钮时，数据没有提交到数据库。

HTML:

<form class='form-inline'>
                    <div class='form-group'>
                        <label for='nameField'>Name</label>
                        <input type='text' class='form-control' id='nameField'name='nameField' placeholder='David'>
                    </div>
                    <div class='form-group'> 
                        <label for='goalField'>Goals Scored</label>
                                                    <input type='text' class='form-control' id='goalField' name="goalField" placeholder='0'>
                    </div>
                    <div class='form-group'>
                        <label for='passField'>Passes Made</label>
                                                    <input type='text' class='form-control' id='passField' name="passField" placeholder='0'>
                    </div>
                                    <button type='submit' class='btn btn-primary' id='submitdata'>Submit to database</button>
</form>

JQuery :

<script>

        $(document).ready(function() {
            $('#submitdata').click(function(event) {
                event.preventDefault();
                alert('clicked');
                if(window.XMLHttpRequest) {                        
                    $xhr = new XMLHttpRequest();
                    $xhr.onreadystatechange = function() {
                        if($xhr.readyState === 4 && $xhr.status === 200) {
                            $xhr.open("GET","insert","true");
                            $xhr.send();
                        }
                    }
                } else {alert('else statement');}
            });
        });     

</script>

我哪里弄错了？

Answer 1

您应该在就绪状态更改侦听器之外调用 open() 和 send()，而不是在回调中调用 :)

    $('#submitdata').click(function(event) {
            event.preventDefault();
            alert('clicked'); // DOESN'T GO BEYOND THIS
            if(window.XMLHttpRequest) {                        
                $xhr = new XMLHttpRequest();
                // bind the readystage change listener first
                $xhr.onreadystatechange = function() {
                    if($xhr.readyState === 4 && $xhr.status === 200) {
                        alert('response received');
                    }
                }
                // call open passing request type, url, async
                $xhr.open("GET","/context-root/insert.do",true);
                $xhr.send();

            } else {
               alert('else statement');
            } // DOESN'T EVEN REACH HERE
      });

也可以使用load事件来处理响应

使用jQuery，你可以做这样的事情

 $('#submitdata').click(function(event) {
        event.preventDefault();
        $.ajax({
          'url' : '/ctxRoot/insert',
          'type': 'GET' // default is GET
        })
        .done(function(data){
            console.log('Ajax response - '+data);
        });
  });

更多细节请查看官方文档here

无法拨打 AJAX 电话

Unable to make a AJAX call

javascript

ajax

jquery

servlets