ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

AJAX实现JQuery

2022-08-20 15:01:29  阅读:131  来源: 互联网

标签:JQuery username 请求 实现 function ajax AJAX post data


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>

 

 

搜索

复制

标签:JQuery,username,请求,实现,function,ajax,AJAX,post,data
来源: https://www.cnblogs.com/pengtianyang/p/16607715.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有