首页 > 其他分享 >AJAX实现JQuery

AJAX实现JQuery

时间:2022-08-20 15:01:02浏览次数:60  
标签:JQuery username 请求 实现 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,请求,实现,ajax,AJAX,post,data
From: https://www.cnblogs.com/pengtianyang/p/16607715.html

相关文章

  • AJAX的概念以及原生JS方式
    AJAX的概念概念:ASynchronousJavaScriptAndXML异步的JavaScript和XML1.异步和同步:客户端和服务器端相互通信的基础上客户端必须等待服务器端的响......
  • MybatisPlus——实现多数据源操作
    多数据源适用:一般工作时候会有多个数据库,每个库对应不同的业务数据。程序如果每次数据都访问同一个数据库,该数据库压力很大访问会很慢。官方文档:https://baomidou.com/......
  • Vue3 + Socket.io + Knex + TypeScript 实现可以私聊的聊天室
    前言下文只在介绍实现的核心代码,没有涉及到具体的实现细节,如果感兴趣可以往下看,在文章最后贴上了仓库地址。项目采用前后端模式,前端使用Vite+Vue3+TS;后端使用Knex+......
  • AJAX概念和AJAX实现原生JS方式
    AJAX概念概念:ASynchronous JavaScript And XML 异步的JavaScript 和 XML1.异步和同步:客户端和服务器端相互通信的基础上同步:客户端必须等待服务器端......
  • JQuery案例和插件机制
    案例—广告显示和隐藏需求:1、当页面加载完,3秒后。自动显示广告2、广告显示5秒后,自动消失分析:1、使用定时器来完成,setTimeout(执行一次定时器)2、分析......
  • Jquery插件机制
    插件:增强JQuery的功能实现方式:$.fn.extend(object)增强通过JQuery获取的对象的功能$("#id")$.extend(object)增强JQuery对象自身的功能$/JQuery<!DOCTY......
  • JQuery案例_广告显示和隐藏&JQuery案例_抽奖
    JQuery案例_广告显示和隐藏需求:当页面加载完,3秒后自动显示广告广告显示5秒后,自动消失分析:使用定时器来完成。setTimeout(执行一次定时器)分析发现JQuery的显示......
  • 用自定义属性实现复合主键的思路
    使用efcore的时候,使用复合主键来表示实体,很多官网推荐[Key("",Order)]这种方式来实现,但是很大程度上会报错。“theentitytype''hasmultiplepropertieswiththe[......
  • JQuery_案例
    JQuery_案例隔行换色HTML代码<!DOCTYPEhtml><html><head><metacharset="utf-8"><title></title><scriptsrc="../js/jquery-3.3.1......
  • docker save与docker export实现docker镜像与容器的备份
    本来想写一篇关于dockersave/export/commit/load/import之间的关系的文章,后来看了看,已经有很多人写过了,我就不做重复工作了。参见:dockersave与dockerexport的区别Do......