Jquery和JS用外部变量获取Ajax返回的参数值的方法实例(超简单)

下面我将详细讲解“Jquery和JS用外部变量获取Ajax返回的参数值的方法实例(超简单)”。

1. JQuery获取Ajax返回值的方法

Jquery是一个非常流行的JavaScript库，它可以很方便地操作HTML文档和处理事件，同时通过JQuery也可以轻松地实现Ajax请求，获取返回值。下面就是一段JQuery获取Ajax返回值的示例代码：

$.ajax({
    type: 'POST',
    url: 'test.php',
    data: {
        id: 1
    },
    success: function(data) {
        console.log(data);
    }
});

上面的代码通过Ajax请求发送一个POST请求到test.php页面，同时传递了一个参数id=1，当请求成功后会在控制台输出返回的data数据。在这个过程中，data变量就是Ajax返回的数据，可以把它赋值给一个外部变量，以备后续使用。示例代码如下：

var result; // 定义一个外部变量用来存储Ajax返回值
$.ajax({
    type: 'POST',
    url: 'test.php',
    data: {
        id: 1
    },
    success: function(data) {
        result = data;
    }
});
console.log(result); // 输出result变量

2. JavaScript获取Ajax返回值的方法

除了使用JQuery，也可以使用原生JavaScript来获取Ajax返回值。下面是一个使用XMLHttpRequest对象来实现Ajax请求的示例代码：

var result; // 定义一个外部变量用来存储Ajax返回值
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status == 200) {
        result = xhr.responseText;
    }
};
xhr.open('POST', 'test.php', true);
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
xhr.send('id=1');
console.log(result); // 输出result变量

和JQuery一样，这段代码同样定义了一个外部变量result来存储返回的数据，经过Ajax请求后，将返回的数据赋值给result变量。需要注意的是，在JS中，Ajax请求是异步的，所以在console.log(result)这句代码执行时，Ajax请求可能还没有返回数据，result变量并没有被赋值。

因此，如果需要在请求成功后使用Ajax返回的数据，可以在xhr.onreadystatechange回调函数中处理数据。如下所示：

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status == 200) {
        var result = xhr.responseText;
        console.log(result); // 输出result变量
    }
};
xhr.open('POST', 'test.php', true);
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
xhr.send('id=1');

在xhr.onreadystatechange回调函数中，如果Ajax请求成功后，就可以直接处理请求返回的数据。以上就是使用JavaScript获取Ajax返回值的方法，非常简单易懂。

希望以上两条示例说明能够帮到你。