无法进行 AJAX 调用答案

【问题标题】：Unable to make a AJAX call无法进行 AJAX 调用
【发布时间】：2015-02-22 14:57:19
【问题描述】：

我正在尝试使用 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>

我在哪里做错了？

【问题讨论】：

$xhr.open("GET","insert","true"); 你检查那部分了吗？第二个参数是 url，第三个参数是布尔变量，对于非 true 的异步调用应该是 true。还要检查您的网址。
还有一件事..你应该在外面调用 open() 和 send()，准备状态更改回调只是为了对收到的响应采取行动
@Arkantos Control 没有到达那里。它不会进入 if 或 else 块。（使用 chrome）
试试window.XMLHttpRequest（不带“s”）
所以你的原始代码中没有错字？

标签： javascript jquery ajax servlets

【解决方案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

【讨论】：