关键词

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返回值的方法,非常简单易懂。

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

本文链接:http://task.lmcjl.com/news/10992.html

展开阅读全文