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调用

1 个答案: