jQuery封装的Ajax的使用

最新推荐文章于 2024-05-21 10:41:09 发布

云端之子

最新推荐文章于 2024-05-21 10:41:09 发布

阅读量174

点赞数 2

文章标签： jquery ajax okhttp

本文链接：https://blog.csdn.net/m0_72128887/article/details/133322461

版权

1.第一种：

$.ajax({ 参数1，参数2···})

$.ajax({
    type:“请求方式”,
    url:“请求地址”，
    data:“请求参数”，
    dataType:"服务器返回的数据类型"
    success:fundction(data){ //成功且完整响应自动调用的函数
        
        },
    error: function(){ //出现错误自动调用的函数
      
    }
})

dataType：用来指定服务器返回来的数据类型，可选值有如下：

xml：表示服务器返回的是xml内容
html：表示服务器返回的是html文本内容
script：表示服务器返回的是script文本内容
json：表示服务器返回的是json内容（重点）
jsonp：表示使用jsonp形式调用函数，早期我们用它来解决跨域问题
text：表示服务器返回的是纯文本字符串

2.第二种：

$.get(“请求地址”，“请求参数”，回调函数, 返回的数据类型)

（请求参数以形式js对象形式传入，可以避免不必要的字符拼接形式传入数据的麻烦）

<head>
<script>
function f1(fid) {
            if(confirm("是否删除？")){
              $.get("DeleteServlet",{id:fid},function (data) {
                  console.log(data);
                  if ("ok"=== data){
                      $("#suc").slideUp(3000);
                      setTimeout(function () {
                        $("#suc").slideDown(2000);
                      },2000);
                      setTimeout(function () {
                          location.href="show.html";
                      },7000);

                  }else{
                      alert("删除失败")
                  }
              },"text")

            }

        }

</script>
</head>
<body>
<!--    让a标签失去跳转功能，点击触发事件f1（fid）里面并传入参数        -->
<a href=\"javascript:void(0)\" onclick='f1("+e.fid+")'>删除</a>
</body>

$.post(“请求地址”，“请求参数”，回调函数, 返回的数据类型)

1.若不涉及文件上传，要拿表单中的数据可以直接将表单序列化

<head>
    <meta charset="UTF-8">
    <title>登录页面</title>
    <!--
        要求：
            1.登录成功跳转展示所有数据页面
            2.登录失败显示登录失败信息
    -->
    <script src="jquery.js"></script>
    <script>

        function f() {
            var formS = $("form").serialize();
            // console.log(formS);

            $.ajax({
                type:"post",
                url:"LoginServlet",
                data:formS ,
                dataType:"text",
                success:function (data) {
                    console.log(data);
                    if ("ok"==data){
                        location.href="show.html";
                    }else{
                        $("#sp").text("登录失败");
                    }
                },
                error:function (e) {
                    console.log(e);
                }
            })


        }



    </script>
</head>
<body>
<h3 align="center">登录页面</h3>
<hr>
<form>
    <table align="center">
        <tr>
            <td>用户名</td>
            <td><input type="text" name="uname"></td>
        </tr>
        <tr>
            <td>密码</td>
            <td><input type="password" name="pwd"></td>
        </tr>
        <tr>
            <td colspan="2" style="text-align: center"><span id="sp"></span></td>
        </tr>
        <tr align="center">
            <td colspan="2"><input type="button" value="登录" onclick="f()"></td>
        </tr>
    </table>
</form>
</body>

2.涉及文件上传的form表单，必须发post请求；后端还是要@MultipartConfig，且需要做如下操作：

将表单数据化（里面要一个DOM对象）
将 contentType:false，processData:false,

<head>
<script src=juqery.js></script>
<script>
      
    function alter() {
            var formData = new FormData($("form")[0]);
            $.ajax({
                type:"post",
                url:"AlterServlet",
                data:formData,
                contentType:false,
                processData:false,
                dataType:"text",
                success:function (data) {
                    console.log(data);
                    if ("ok" === data){
                        location.href="show.html";
                    }else {
                        alert("修改失败");
                    }
                }
            })
        }


    </script>
</head>
<body>
<h2 align="center" style="color: black">修改花的信息</h2>
<hr>
<form>
    <table align="center">
        <tr>
            <td>编号</td>
            <td><input type="text" name="fid" readonly ></td>
        </tr>
        <tr>
            <td>名称</td>
            <td><input type="text" name="fname" ></td>
        </tr>
        <tr>
            <td>价格</td>
            <td><input type="text" name="price" ></td>
        </tr>
        <tr>
            <td>产地</td>
            <td><input type="text" name="made_in" ></td>
        </tr>
        <tr>
            <td>描述</td>
            <td><input type="text" name="describe" ></td>
        </tr>
        <tr>
            <td>图片</td>
            <td><input type="file" name="photo"></td>
        </tr>
        <tr>
            <td colspan="2" style="text-align: center"><input type="button" value="修改" onclick="alter()"></td>

        </tr>
    </table>
</form>
</body>

回调函数主要是用来处理服务器对我们的响应结果。

返回的数据类型这个参数用来设置服务器返回来的数据类型，可以是xml, html, script, json, text。

3.第三种：

$.getJSON("请求地址", "请求参数", "回调函数")

用该方法记得写<thead> <tbody>, i代表循环中对象的索引，e代表循环中拿出的对象，data用于接收后端响应回来的数据

$(function () {
            $.getJSON("QueryServlet",function (data) {
                $(data).each(function (i,e) {
                    console.log(e);
                    var $1 = $("<tr align=\"center\">\n" +
                        "            <td>"+e.fid+"</td>\n" +
                        "            <td>"+e.fname+"</td>\n" +
                        "            <td>"+e.price+"</td>\n" +
                        "            <td>"+e.made_in+"</td>\n" +
                        "            <td>"+e.describe+"</td>\n" +
                        "            <td><img src=\"upload/"+e.photo+"\" alt=\"\"></td>\n" +
                        "            <td>\n" +
                        "                <a href=\"javascript:void(0)\" onclick='f1("+e.fid+")'>删除</a>\n" +
                        "                <a href=\"updata.html?fid="+e.fid+"\">变更</a>\n" +
                        "            </td>\n" +
                        "        </tr>");

                    $("tbody").append($1);
                    $1.mouseover(function () {
                        $(this).css("background-color","palevioletred")
                    });
                    $1.mouseout(function () {
                        $(this).css("background-color","white")
                    })
                });

            });
        });

这种方式要求服务器返回的数据类型得是json格式的。

我们可以将拿到的数据变为json格式

@WebServlet("/QueryByFidServlet")
public class QueryByFidServlet extends HttpServlet {
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        resp.setContentType("application/Json;charset=utf-8");
        String fid = req.getParameter("id");
        FlowerServiceImpl flowerService = new FlowerServiceImpl();
        Flower flower = flowerService.queryByFid(Integer.parseInt(fid));
        Gson gson = new Gson();
        String s = gson.toJson(flower);
        PrintWriter writer = resp.getWriter();
        writer.print(s);
    }
}

4.第四种：

这种方式是发送ajax请求获取一个js文件。

$.getScript("请求地址", "回调函数")

5. 注意

a标签这种跳转的，同时需要把数据传过去的：直接后面拼接数据

<a href="login.html?id=1&password=123">跳转</a>

云端之子

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery封装的Ajax的使用

返回的数据类型这个参数用来设置服务器返回来的数据类型，可以是xml, html, script, json, text。（请求参数以形式js对象形式传入，可以避免不必要的字符拼接形式传入数据的麻烦）$.post(“请求地址”，“请求参数”，回调函数, 返回的数据类型)$.get(“请求地址”，“请求参数”，回调函数, 返回的数据类型)$.getJSON("请求地址", "请求参数", "回调函数")$.getScript("请求地址", "回调函数")这种方式要求服务器返回的数据类型得是json格式的。
复制链接

扫一扫