$.ajax()方法进行网页间传值示例

下面进行详细讲解“$.ajax()方法进行网页间传值示例”的完整攻略。

什么是$.ajax()方法

$.ajax() 方法是 jQuery 库里的一种简单易用的方法，用于执行AJAX（异步 JavaScript 和 XML）请求。$.ajax() 方法可以对 Web 应用程序进行异步 HTTP（Ajax）请求，支持跨域。可以发送POST、GET等类型的请求，并可以处理服务器返回的数据。

传值方法

一般传值有两种方式：Get和Post。Get方式通过URL提交，相当于在Web页面中增加了一些参数信息，而Post方式是通过HTTP发送数据，它不会像Get那样把数据暴露出来。

Get方法传值

$.ajax的Get方法传值时，可以把参数信息放在url后面，也可以把参数封装在data参数内传入，后端收到后可以直接获取，具体实现如下：

$.ajax({
    url: 'url地址',
    type: 'GET',
    data: {username: 'zhangsan', password: '123456'},
    success: function (data) {
        console.log(data)
    }
});

POST方法传值

同样也有两种方式可以传值。第一种既可以用data参数封装，也可以直接传递json格式的字符串。第二种方式要设置data类型为JSON，并在headers中设置contentType属性为application/json;charset=utf-8。

1、用data参数封装

$.ajax({
    url: 'url地址',
    type: 'POST',
    data: {username: 'zhangsan', password: '123456'},
    success: function (data) {
        console.log(data)
    }
});

2、直接传递json格式的字符串

$.ajax({
    url: 'url地址',
    type: 'POST',
    data: JSON.stringify({username: 'zhangsan', password: '123456'}),
    dataType: 'json',
    success: function (data) {
        console.log(data)
    },
    contentType: 'application/json;charset=utf-8',
    headers: {
        'Content-Type': 'application/json;charset=utf-8',
        'Accept': 'application/json;charset=utf-8'
    }
});

示例说明

下面给出两个示例说明：

示例一

在一个页面向另一个页面发送Get请求，请求数据并把数据显示在页面上。

接收请求的页面代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>接收请求的页面</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<p>接收到请求，数据如下：</p>
<ul id="msg"></ul>
<script>
    $(function () {
        var username = getData('username');
        var password = getData('password');
        var msgList = '';
        msgList += '<li>username: ' + username + '</li>';
        msgList += '<li>password: ' + password + '</li>';
        $('#msg').html(msgList);
    });

    function getData(name) {
        var queryStr = window.location.search.substring(1);
        var arr = queryStr.split("&");
        for (var i = 0; i < arr.length; i++) {
            var sIndex = arr[i].indexOf(name + "=");
            if (sIndex !== -1) {
                var value = arr[i].substring(sIndex + name.length + 1);
                return value;
            }
        }
        return "";
    }
</script>
</body>
</html>

请求页面代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>请求页面</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<button id="send">发送请求</button>
<script>
    $(function () {
        $('#send').click(function () {
            $.ajax({
                url: '接收请求的页面地址',
                type: 'GET',
                data: {username: 'zhangsan', password: '123456'},
                success: function (data) {
                    console.log(data)
                }
            });
        });
    });
</script>
</body>
</html>

示例二

在一个页面向另一个页面发送Post请求，请求数据并把数据显示在页面上。