ajax怎么调用WEBAPI

初步学习AJAX调用WEBAPI功能，目前有自己写的一个测试webapi，路径为http://jxrcfw.top:8080/HQXL。
请求给一个能实现的源代码，接口为GET接口，返回的是一个JSON
另外不要再发网上直接搜到的内容了，因为测试发现报错所以才来提问的。
请各位获取到数据后再发代码谢谢！

GET http://jxrcfw.top:8080/HQXL 500 (Internal Server Error) 你的接口报错了


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button onclick="ajax()">ajax</button>
    <script>
        function ajax() {
            fetch('http://jxrcfw.top:8080/HQXL').then(res => res.json()).then(res => {
                console.log(res, '===')
            })
        }

    </script>
</body>

</html>

https://pics2.baidu.com/feed/b7003af33a87e9509c8a9eadb6fae445f9f2b49f.jpeg@f_auto?token=518e7699a846f383b5ea36a16bc7e3f7 @f_auto?token=518e7699a846f383b5ea36a16bc7e3f7

具体讲解 https://baijiahao.baidu.com/s?id=1667656772839811090&wfr=spider&for=pc

希望对您有所帮助

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <button id="tijiao"></button>
</head>
<body>
</body>
<script>
    $("#tijiao").on("click", function () {
        //定义你的请求数据
        var data = {

        };
        var URI = "";//定义你的后台接口访问路径
        $.ajax({
            url: URI,
            dataType: 'json',
            data: data,
            type: 'get',
            'Content-Type': 'application/json',
            success: function (response) {
                console.log(response)//输出你的后端返回结果
            }
        });
    })
</script>
</html>

两个文档，多看看就可以解决你的问题。第一个话1个小时看看，然后动手写，不动的地方就查第二个文档

jQuery – AJAX get() 和 post() 方法 | 菜鸟教程 jQuery - AJAX get() 和 post() 方法 jQuery get() 和 post() 方法用于通过 HTTP GET 或 POST 请求从服务器请求数据。 HTTP 请求：GET vs POST 两种在客户端和服务器端进行请求-响应的常用方法是：GET 和 POST。 GET - 从指定的资源请求数据 POST - 向指定的资源提交要处理的数据 GET 基本上用于从服务器获得（取回）数据。注释：..

https://www.runoob.com/jquery/jquery-ajax-get-post.html

jQuery API Documentation

https://api.jquery.com/


$.ajax({
  url: "http://jxrcfw.top:8080/HQXL", // 请求地址url
  type: "GET", //请求方法
  //成功的回调
  success: function (res) {
    console.log(res);
  },
});

参考示例：

<!--
 * @Descripttion: 
 * @Author: baiyf
 * @Date: 2022-12-05 13:25:31
 * @LastEditTime: 2022-12-08 10:15:00
-->
<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <title>请求接口</title>
    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"></script>
</head>

<body>
    <button id="submit">请求接口</button>
</body>
<script>
    $("#submit").on("click", () => {
        $.ajax({
            url: 'http://jxrcfw.top:8080/HQXL', //请求地址
            data: { //请求参数
                key1: value,
                ket2: value
            },
            type: 'get',    //请求方式
            success: function (response) {
                console.log(response)//后端返回结果
            }
        });
    })
</script>

</html>

没啥难度，网上复制过来改参数用就行了，这东西不用咋学

<script>
        //参数
        var data = {
        };
        $.ajax({
            url: "http://jxrcfw.top:8080/HQXL",
            dataType: 'json',
            data: data, //有请求参数就写这一项，没有就删掉
            type: 'get',
            success: function (resp) {
                console.log(resp)//返回结果resp，做其他处理
            }
        });
    })
</script>