微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

AJAX实现JQuery

AJAX实现JQuery实现方式ajax()

语法$.ajax(url,[settings])

记着导入jquery

<!DOCTYPE html>
<html lang="en">
<head>
    <Meta charset="UTF-8">
    <title>1-原生js实现ajax</title>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script>
        //定义方法
        function fun() {
            //使用$.ajax()请求发送异步请求
            $.ajax({
               url:"ajaxServlet",//请求路径
               type:"POST",//请求方式
               //data:"username=jack&age=23",//请求参数
               data:{"username":"jack","age":23},
               success:function (data) {
                    alert(data);
               }//响应成功后的回调函数
            });
        }
    </script>
</head>
<body>
<input type="button" value="发送异步请求" onclick="fun()">
</body>
</html>

AjaxServlet:

@WebServlet("/ajaxServlet")
public class AjaxServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws servletexception, IOException {
        //获取请求参数
        String username = request.getParameter("username");
        //打印username
        System.out.println(username);
        //响应
        response.getWriter().write("hello:"+username);
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws servletexception, IOException {
        this.doPost(request, response);
    }
}

AJAX实现JQuery实现方式ajax()_其他键值

 

AJAX实现JQuery实现方式_get&post

$.get():发送get请求

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

    参数:

      url:请求路径

      data:请求参数

      callback:回调函数

      type:响应结果的类型

$.post():发送post请求

  语法:$.post(url, [data], [callback], [type])

<!DOCTYPE html>
<html lang="en">
<head>
    <Meta charset="UTF-8">
    <title>1-原生js实现ajax</title>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script>
        //定义方法
        function fun() {
            /*$.get("ajaxServlet",{username:"rose"},function (data) {
                alert(data);
            },"text");*/

            $.post("ajaxServlet",{username:"rose"},function (data) {
                alert(data);
            },"text");
        }
    </script>
</head>
<body>
<input type="button" value="发送异步请求" onclick="fun()">
</body>
</html>

 

 

搜索

复制

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐