jQuery ajax 问题答案

【问题标题】：jQuery ajax problemjQuery ajax 问题
【发布时间】：2009-05-29 10:55:02
【问题描述】：

我对 jQuery 的 ajax 函数没有任何经验。我正在尝试进行简单的调用，例如：

$.get ("ajaxsupport/login");

我有一个带有 url 模式（“ajaxsupport/login”）的 servlet。

当我在浏览器的地址字段中输入“http://localhost:9090/ajaxsupport/login”时，我看到了一些结果。但是 $.get (..) 甚至不打电话。

有什么问题？

我使用 jquery 1.3.1

【问题讨论】：

您是否发现任何异常？你能过去使用 $.get 的整个代码吗？
那个字符串就是整个代码。没有异常发生。

标签： jquery ajax get

【解决方案1】：

$.get 默认情况下是一个异步方法调用，这意味着调用者仍处于控制之中。这就是为什么当请求被执行时，必须发生一些事情。您可以通过定义回调来指定。

jQuery.get( url, [data], [callback], [type] )

在您的情况下（请注意前面的“/”，但可能没有必要，具体取决于脚本位置）：

<script type="text/javascript" charset="utf-8">
$(document).ready(function(){

    $.get("/ajaxsupport/login", 
        function(data, textStatus){ 
            // just prompt the response and the status message
            alert(data + "\n" + textStatus); 
        } 
    );

});
</script>

【讨论】：

我试过带和不带斜线。功能永远不会被执行。没有调用servlet，不知道为什么。
也许您可以编辑您的问题以包含更多代码（例如 $(document).ready ... 封闭和导入）？

【解决方案2】：

尝试找出是否有结果：

$(document).ready(function(){
 $.ajax
 ({
    type: "GET",
    url:"/ajaxsupport/login",
    success: function(result)
    {
        alert("I'm a success");
    }
});

});

您也可以将firebug 用于请求和返回的内容。

【讨论】：

【解决方案3】：

获取类似fiddler 的工具。观察请求是如何通过网络的。它会去你认为它要去的地方吗？你得到回应了吗？您可以在 Web 服务调用上设置断点吗？

【讨论】：

【解决方案4】：

**两个变量异步发送到服务器 [Raw JavaScript || jQuery ]] **

var demo = document.querySelector('#demo');
var x = 0;
var y = 0;


//pure
demo.innerHTML = x;
demo.addEventListener('click',()=> {
    x=5;
    demo.innerHTML = x;
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function () {
        if (this.readyState == 4 && this.status == 200) {
            console.log(xhttp.responseText);
        }
    };
    xhttp.open("POST", 'http://localhost/target/index.php', true);
    xhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    xhttp.send('data='+[x,y]);
});

//framework
$('#demo2').html(y);
$('#demo2').click(()=>{
    y=5;
    $.ajax({
        type: 'post',
        url: 'http://localhost/target/index.php',
        data: {
            'y': y,
            'x' : x
        },
        success: function (response) {
            console.log(response);
        },
        error: function () {
            console.log("error");
        }
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #demo,#demo2{
            height: 100px;
            width: 100px;
            background-color: #f12100;
        }
        #demo2{
            background-color: #20c997;
        }
    </style>
</head>
<body>
<div id="demo"></div>
<br>
<div id="demo2"></div>
<script
        src="https://code.jquery.com/jquery-3.4.1.min.js"
        integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
        crossorigin="anonymous"></script>
<script type="text/javascript" src="script.js"></script>
</body>
</html>

【讨论】：

这似乎并没有为提问者同意是一种类型的 10 岁问题添加任何内容。
点评来源：您好，请不要只用源代码回答。尝试对您的解决方案如何工作提供一个很好的描述。请参阅：How do I write a good answer?。谢谢