Ajax练习二（原生JS异步请求）

最新推荐文章于 2024-04-22 12:12:03 发布

lyanjun

最新推荐文章于 2024-04-22 12:12:03 发布

阅读量2.7k

点赞数

分类专栏：前端练习文章标签： ajax

本文链接：https://blog.csdn.net/baidu_32377671/article/details/78009810

版权

前端练习专栏收录该内容

11 篇文章 0 订阅

订阅专栏

(二)JS异步请求

这里我使用的编译器是WebStorm（不管用哪个编译器我们的最终结果都是一样的就是要请求后台的数据，随后将后台返回的结果展示在界面中），后台的配置请参考Ajax练习一（配置Java后台）。
这里用可能会遇到跨域的问题。解决方式只需要在后台设置即可。因为我后台用的是SpringMvc，所以只需要在Controller中加上@CrossOrigin注解即可！添加方式如下图所示：
这里写图片描述

Get请求

1.设置界面的布局：

这里先简单的设置一些界面效果（因为我不会Html - -！，写这些纯属三分钟热血）。布局如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /* 这里给P标签设置点样式
           为了显眼一些
        */
        #result{
            background-color: skyblue;
            font-size: 30px;
            color: white;
        }
    </style>
</head>
<body>
<!-- 用来显示请求的结果 -->
<p id="result">用于展示结果</p>
<!-- 按钮用来请求后台的数据 -->
<button id="request">点我请求后台的数据</button>
<!-- 设置一些操作 -->
<script>
    //点击按钮后向后台发起请求
    document.getElementById("request").onclick = function () {
        var getRequest = new XMLHttpRequest();//创建请求对象
        getRequest.open("GET", "http://192.168.1.101:8080/MineTest/first.do", true);//链接服务器
        getRequest.send();//发送请求
        getRequest.onreadystatechange = function () {
            if (getRequest.readyState === 4) {//请求已完成，且响应已就绪
                if (getRequest.status === 200) {//请求成功
                    var resultStr = getRequest.responseText//获取结果
                    var resultObj = JSON.parse(resultStr);//解析数据
                    //将返回的结果展示到P标签中
                    document.getElementById("result").innerHTML =
                        "名称 : " + resultObj.name + "</br>" +
                        "年龄 : " + resultObj.age + "</br>" +
                        "性别 : " + resultObj.sex;
                }
                else {
                    alert("错误码 : " + getRequest.status);
                }
            }
        }
    }
</script>
</body>
</html>

2.运行界面查看结果：

首先打开网页查看一下效果，效果如下图所示：
界面的效果
点击按钮，请求后台，请求成功后的效果如下图所示：
请求到的数据

Post请求

1.设置界面的布局：

这里同样的简单的设置一个界面。提交两个数字，让后台把两数相加的结果返回。布局如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!-- 输入提交的内容 -->
<label>请输入数字1 : </label>
<input type="number" id="num1">
</br>
<label>请输入数字2 : </label>
<input type="number" id="num2">
</br>
<!-- 按钮用来请求后台的数据 -->
<button id="request">点我请求后台的数据</button>
<!-- 设置一些操作 -->
<script>
    //点击按钮后向后台发起请求
    document.getElementById("request").onclick = function () {
        var getRequest = new XMLHttpRequest();//创建请求对象
        getRequest.open("POST", "http://192.168.1.101:8080/MineTest/sum.do", true);//链接服务器
        var postStr = "num1=" + document.getElementById("num1").value +
            "&num2=" + document.getElementById("num2").value;
        getRequest.setRequestHeader("contentType", "text/html;charset=uft-8");//设置编码格式
        getRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;");//表单类型
        getRequest.send(postStr);//发送请求
        getRequest.onreadystatechange = function () {
            if (getRequest.readyState === 4) {//请求已完成，且响应已就绪
                if (getRequest.status === 200) {//请求成功
                    var resultStr = getRequest.responseText//获取结果
                    alert("返回结果 : " + resultStr);
                }
                else {
                    alert("错误码 : " + getRequest.status);
                }
            }
        }
    }
</script>
</body>
</html>

在后台的TestController类中添加一个方法，用来接收参数和返回结果,代码如下：

	/**
	 * 求和并返回
	 * @param request
	 * @param response
	 * @throws IOException
	 */
	@RequestMapping(value = "/sum" , method = RequestMethod.POST)
	public void sum(HttpServletRequest request,HttpServletResponse response) throws IOException{
		response.setCharacterEncoding("UTF-8");
		int num1 = Integer.parseInt(request.getParameter("num1"));
		int num2 = Integer.parseInt(request.getParameter("num2"));
		response.getWriter().write(num1 + " + " + num2 + " = " + (num1 + num2));
	}

2.运行界面查看结果：

打开网页查看一下效果，效果如下图所示：
这里写图片描述
输入数字后点击按钮，请求后台，请求成功后的效果如下图所示：

这样一个使用Ajax实现前后台交互小例子就完成了！接下来将使用JQuery来实现简单的get、post请求。

lyanjun

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Ajax练习二（原生JS异步请求）

JS异步请求　　这里我使用的编译器是WebStorm（不管用哪个编译器我们的最终结果都是一样的就是要请求后台的数据，随后将后台返回的结果展示在界面中），后台的配置请参考Ajax练习一（配置Java后台）。　　这里用可能会遇到跨域的问题。解决方式只需要在后台设置即可。因为我后台用的是SpringMvc，所以只需要在Controller中加上@CrossOrigin注解即可！
复制链接

扫一扫