Ajax练习三（使用JQuery实现异步请求）

发布时间：2020-12-16 03:18:53 所属栏目：百科来源：网络整理

导读：(三)使用JQuery异步请求之前的练习笔记Ajax练习二（原生JS异步请求）,是使用原生JS来实现Ajax，这里将使用JQuery来实现Ajax。（趁着三分钟热血还没过去，就先记录下来）。后台的配置没变还是这个Ajax练习一（配置Java后台）。 Get请求同样这里还是设置一个

(三)使用JQuery异步请求

　　之前的练习笔记Ajax练习二（原生JS异步请求）,是使用原生JS来实现Ajax，这里将使用JQuery来实现Ajax。（趁着三分钟热血还没过去，就先记录下来）。后台的配置没变还是这个Ajax练习一（配置Java后台）。

Get请求

　　同样这里还是设置一个页面，这里我就放一个按钮。到时候运行结果，直接看控制台。(我也懒得下JQuery.js，我直接使用CDN加速)页面布局代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<!-- 按钮用来请求后台的数据 -->
<button id="request">点我请求后台的数据</button>
<!-- 设置一些操作 -->
<script> $("#request").click(function () { $.ajax({ type: "get",url: "http://192.168.1.101:8080/MineTest/first.do",success: function (data) { console.log(data) },error: function (jqObj) { console.log(jqObj.status) } }); }); </script>
</body>
</html>

　　打开网页，点击按钮发送一个get请求，控制台输出的结果如下（data就是JSON解析后的对象，也就是JSON数据JQuery已经帮我们处理了）：

Post请求

　　这个布局跟上个笔记的基本差不多，同样是传两个数字给后台，然后后台返回两个数相加的结果，布局代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
</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> //点击按钮后向后台发起请求 $("#request").click(function () { $.ajax({ type: "post",url: "http://192.168.1.101:8080/MineTest/sum.do",data: {//上传参数 num1: $("#num1").val(),num2: $("#num2").val() },dataType: "text",//数据格式 success: function (data) { console.log(data) },error: function (jqObj) { console.log(jqObj.status) } }); }); </script>
</body>
</html>

　　打开网页后输入两个数字，随后向后台发送请求，结果如下图所示：

　　终于完成练习了，估计下周我就忘了- -！

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!