jQuery框架的ajax函数——$(get)$(post)

2020-10-21 10:57发布

jQuery框架的ajax函数——( g e t ) (get)(get)(post)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rw3ZjWHk-1600399755294)(在这里插入图片描述
)]

##$.get请求-原理

  • get函数

    $.get(url, [data], [callback], [type])

    • url:表示服务器的访问路径,如:“s1”

    • data:表示向服务器发送的参数, 格式: 1: “username=wzx&password=123” 2:json串

    • callback:匿名函数,表示接收服务器发送过来的响应,这个函数自动执行

    • type :表示浏览器期望服务器发送过来的数据类型,格式:“text” “json”

  • get请求原理

在这里插入图片描述

在这里插入图片描述

##jquery_ajax.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script src="js/jquery-3.3.1.js"></script>

    <script type="application/javascript">
        $(function () {
            $("#btn").on("click", function () {
                $.get(
                    "s2",
                    "username=lbl&password=admin123",
                    function (data) { //这个data就是服务器返回的字符串
                        //处理数据
                        alert(data);
                    },
                    "text"
                );

            })
        })
    </script>
</head>
<body>

<!--设计一个按钮,一点击这个按钮,就向服务器发出异步请求-->
<input type="button" value="点我,发出异步请求s2" id="btn"/>
</body>
</html>

运行效果:

在这里插入图片描述

##AjaxServlet2:

package com.lbl.servlet;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

@WebServlet("/s2")
public class AjaxServlet2 extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doGet(request, response);
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        System.out.println("收到了异步请求....s2");
        response.getWriter().write("helloworld...s2");
        String username = request.getParameter("username");
        String password = request.getParameter("password");
        System.out.println(username);
        System.out.println(password);
    }
}

运行效果:

在这里插入图片描述

在这里插入图片描述
Post同理

jquery_ajax_post.html完整代码:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script src="js/jquery-3.3.1.js"></script>

    <script type="application/javascript">
        $(function () {
            $("#btn").on("click", function () {
                $.get(
                    "s2",
                    "username=lbl&password=admin123",
                    function (data) { //这个data就是服务器返回的字符串
                        //处理数据
                        alert(data);
                    },
                    "text"
                );
                $.post(
                    "s2",
                    "username=lft&password=123",
                    function(data){ //这个data就是服务器返回的字符串  var data = []
                        //处理数据
                    },
                    "json"
                );

                var url = "s2";
                var param =  "username=lft&password=123";
                var func = function(data){

                };
                var type = "json";
                $.post(url,param,func,type);

            })
        })
    </script>
</head>
<body>

<!--设计一个按钮,一点击这个按钮,就向服务器发出异步请求-->
<input type="button" value="点我,发出异步请求s2" id="btn"/>
</body>
</html>


作者:水巷石子

链接:https://blog.csdn.net/qq_37924905/article/details/108662013

来源:CSDN
著作权归作者所有,转载请联系作者获得授权,切勿私自转载。