jQuery AJAX

最新推荐文章于 2023-05-24 11:09:38 发布
最新推荐文章于 2023-05-24 11:09:38 发布
阅读量336 收藏
点赞数
分类专栏： Java 文章标签： ajax jquery js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43715360/article/details/113762293
版权
这篇博客介绍了jQuery中的AJAX技术，包括GET和POST请求的使用方法。通过示例代码展示了如何使用$.get()、$.post()及$.ajax()进行异步数据交互，以及服务器端的响应处理。示例中，点击按钮触发AJAX请求，更新页面显示的时间和服务器返回的数据。
摘要由CSDN通过智能技术生成
1、jQuery AJAX简介

在这里插入图片描述

2、get和post请求

在这里插入图片描述

3、$.ajax()

在这里插入图片描述

4、示例代码
get.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style type="text/css">
        #time,#res{
            width: 300px;
            height: 100px;
            border: 1px solid #ff0;
        }
    </style>

</head>
<body>
    <script src="jquery-3.4.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            var time=new Date();
            $("#time").html(time.getHours()+":"+time.getMinutes()+":"+time.getSeconds());

            $("#btn").click(function () {
                $.get("get",function (data) {
                    $("#res").html(data);
                });
            });
        });
    </script>

    <button id="btn">get请求</button>
    <div id="time"></div>
    <div id="res"></div>

</body>
</html>
post.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style type="text/css">
        #time,#res{
            width: 300px;
            height: 100px;
            border: 1px solid #ff0;
        }
    </style>

</head>
<body>
    <script src="jquery-3.4.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            var time=new Date();
            $("#time").html(time.getHours()+":"+time.getMinutes()+":"+time.getSeconds());

            $("#btn").click(function () {
                $.post("post",{name:'zs',age:25},function (data) {
                    $("#res").html(data);
                });
            });
        });
    </script>

    <button id="btn">post请求</button>
    <div id="time"></div>
    <div id="res"></div>

</body>
</html>
ajax.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style type="text/css">
        #time,#res{
            width: 300px;
            height: 100px;
            border: 1px solid #ff0;
        }
    </style>

</head>
<body>
    <script src="jquery-3.4.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            var time=new Date();
            $("#time").html(time.getHours()+":"+time.getMinutes()+":"+time.getSeconds());

            $("#btn").click(function () {
                $.ajax(
                    {
                        url:"post",
                        data:{name:'lisi',age:'30'},
                        type:'post',
                        success:function (data) {
                            $("#res").html(data.res);
                        },
                        dataType:'json'
                    }
                )
            });
        });
    </script>

    <button id="btn">ajax请求</button>
    <div id="time"></div>
    <div id="res"></div>

</body>
</html>
GetTest.java
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;
import java.io.PrintWriter;

public class GetTest {
    @WebServlet(value = "/get")
    public class PostTest extends HttpServlet {
        @Override
        protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
            PrintWriter printWriter=resp.getWriter();
            printWriter.write("hello ajax!!");
        }
    }

}
PostTest.java
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;
import java.io.PrintWriter;

@WebServlet(value = "/post")
public class PostTest extends HttpServlet {
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String name=req.getParameter("name");
        String age=req.getParameter("age");
        String json="{\"res\":\"success\"}";
        PrintWriter printWriter=resp.getWriter();
        printWriter.write(json);

    }
}
一个很懒的人
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
python获取select选中的值_jquery操作select(取值，设置选中）
weixin_39857211的博客
12-11 1298
转自：http://www.cnblogs.com/mitang/p/3687353.htmljquery操作select(增加，删除，清空)jQuery获取Select选择的Text和Value:jQuery添加/删除Select的Option项：内容清空：每一次操作select的时候，总是要出来翻一下资料，不如自己总结一下，以后就翻这里了。比如1、设置value为pxx的项选中$(".sele...
JQuery及ajax简单运用
钰团的博客
06-08 381
JQuery及ajax简单运用 首先简单的介绍一下JQuery它是一个轻量级的javascript类库， 我们只需要知道他们的功能，就能调用 我们写好就一个类“jQuery”，简写“”它的优点：1总是面向集合2多行操作集于一行我们先将jquery.min.jsjar包导入到自定位置并引用‘‘‘&lt;scripttype=&quot;text/javascript&quot...
jQuery中的Ajax
凉茶铺的博客
01-02 752
介绍了如何借助于jQuery发送Ajax请求
jquery 实现ajax
思想的苇草
01-21 288
<br /><%@ WebHandler Language="C#" Class="Handler" %>   using System;  using System.Web;  using System.Web.Script.Serialization;  using System.Collections.Generic;  public class Handler : IHttpHandler {            public void ProcessRequest (HttpContext co
jQuery - AJAX 简介
unber的博客
05-24 179
AJAX = 异步 JavaScript 和 XML（Asynchronous JavaScript and XML）。简短地说，在不重载整个网页的情况下，AJAX 通过后台加载数据，并在网页上进行显示。使用 AJAX 的应用程序案例：谷歌地图、腾讯微博、优酷视频、人人网等等。您可以在我们的jQuery Ajax 参考手册学会 jQuery Ajax 的具体应用。您可以在我们的AJAX 教程中学到更多有关 AJAX 的知识。
jQuery AJAX应用实例总结
01-19
本文实例总结了jQuery AJAX应用。分享给大家供大家参考，具体如下： AJAX 是指一种创建交互式网页应用的网页开发技术。 AJAX=异步JavaScript和XML（标准通用标记语言的子集）。 AJAX是一种用于创建快速动态网页的...
Jquery Ajax 前后台数据传输
10-30
**jQuery AJAX 前后台数据传输详解** 在Web开发中，AJAX（Asynchronous JavaScript and XML）技术被广泛用于实现在不刷新整个页面的情况下与服务器交换数据并更新部分网页内容。jQuery库为开发者提供了简单易用的...
原生Ajax 和jQuery Ajax的区别示例分析
10-25
原生Ajax和jQuery Ajax都是前端开发中用于与服务器进行异步数据交换的技术，但它们在实现方式和使用便利性上存在明显差异。以下是对这两者区别的详细分析： ### 原生Ajax基础 原生Ajax是通过使用浏览器提供的...
jQuery Ajax 全解析
10-30
### jQuery Ajax 全解析知识点详细说明 #### jQuery 简介 jQuery 是一个非常流行的JavaScript库，由John Resig在2006年发布。它主要用于简化JavaScript的编程，让开发者能够使用较少的代码实现强大的动态功能。...
Juqyer：$.ajax()方法详解
abc8359852的博客
10-17 135
Jquery中的ajax方法参数总是记不住，这里记录一下。 最常用的属性是：url、data 1.url:要求为String类型的参数，（默认为当前页地址）发送请求的地址。 2.type:要求为String类型的参数，请求方式（post或get）默认为get。注意其他http请求方法，例如put和delete也可以使用，但仅部分浏览器支持。 3.timeout:要求为N...
A jquery使用
weixin_44145887的博客
01-18 1229
1.基本概念： js的函数库 ---- jquery jquery文件要放在所有引入的js文件的第一位。 如果需要用css文件，南无所有css文件的引入要先于js文件 在使用jquery时，首先要引入<script type="text/javascript" src="../js/jquery-1.9.1.min.js"></script> //css文件的引入 <link rel="stylesheet" type="text/css" href="" /> //j
利用JQuery的ajax请求实现文件上传
热门推荐
林老师带你学编程
11-03 1万+
今天给大家介绍一下如何利用JQuery的ajax请求实现文件上传功能。主要需要引入一个js文件，然后调用js文件中的ajaxFileUpload请求就可以实现异步文件上传机制了。第一步：引入js文件名称为：ajaxfileupload.js 下载地址：点击打开链接第二步：编写&lt;input type="file" name="file" id="file"/&gt;点击上传文件。第三步：编写a...
jQuery与Ajax 面试题库（长期更新中...）
weixin_34273479的博客
03-12 1万+
jQuery 部分：　　JavaScript 是客户端脚本的标准语言，而 jQuery 使得编写 JavaScript 更加简单。你可以只用写几行的jQuery 代码就能实现更多的东西. 它是最长被用到的 JavaScript 库之一，并且现在已经很少有不用jQuery 而使用原生 JavaScript 的新项目了。这对于作为一个 Java web 开发者的你而言意味着你会在一场Java web开...
用JQuery实现Ajax
qq_43713303的博客
01-23 549
用JQuery实现Ajax 发送Ajax请求 基本语法如下： $.ajax({ type: 'get/post', // 请求方式，默认get url: '请求路径/网址', async: true/false, // 异步/同步，默认true data: { 发送给服务器的数据 }, dataType: 'json/jsonp/xml/text/javascript', // 返回数据类型或解决跨域(jsonp)，默认json s
Response 实现重定向
一个很懒的人
02-02 6230
1.重定向： 重定向作用在客户端，客户端将请求发送给服务器后，服务器响应给客户端一个新的请求地址，客户端重新发送新请求。 重定向数据传递： 重定向特点： 重定向是客户端行为。 重定向是浏览器做了至少两次的访问请求。 重定向浏览器地址改变。 重定向两次跳转之间传输的信息会丢失(request范围)。 重定向可以指向任何的资源，包括当前应用程序中的其他资源、同一个站点上的其他应用程序中的资源、其他站点的资源。 重定向特点： 当两个Servlet需要传递数据在同一个站点上的其他应用程序中的资源时.
Feign及熔断注解、配置熔断时间
一个很懒的人
05-30 3245
1.描述 Feign接口调用注册中心服务，一般默认超时时间为：1秒，超过一秒钟会超时报错 2. 更改默认超时时间（开启Feign熔断） 更改配置文件：application.yml 添加注解 配置代码： feign: hystrix: enabled: true #开启Feign的熔断功能 client: config: default: connectTimeout: 5000 #连接超时时间2秒 readTimeout: 50.
Service层控制事务
一个很懒的人
01-31 2937
1.Service业务逻辑层： 1.业务概述： 代表用户完成的一个业务功能，可以由一个或多个DAO的调用组成。(软件所提供的一个功能都叫业务) 2.Service开发流程 2.事务： 在JDBC中，在Service层实现事务需要以下几个步骤： 获得Connection对象开始事务–提交或回滚–关闭连接。其事务策略是 获得Connection对象开始事务: connection.setAutoCommit(false);//true等价于1,false等价于0，将自动提交事务改为手动提交事务 .
Request 详解
一个很懒的人
02-01 2258
1.Request对象： 在Servlet中用来处理客户端请求需要用doGet或doPost方法的request对象 2.get和post请求区别： get请求 get提交的数据会放在URL之后，以?分割URL和传输数据，参数之间以&相连 get方式明文传递，数据量小,不安全 效率高,浏览器默认请求方式为GET请求 对应的Servlet的方法是doGet post请求 post方法是把提交的数据放在HTTP包的Body中 密文传递数据,数据量大,安全 效率相对没有GET高 对应的S.
jqueryajax
最新发布
08-28
jQuery Ajax是一种用于在Web应用程序中进行异步请求的JavaScript库。它提供了一种简单的方法来向服务器发送HTTP请求并获取响应，而无需重新加载整个页面。使用jQuery Ajax，您可以执行各种操作，如获取数据、发送数据、更新页面等。 要使用jQuery Ajax，您需要引入jQuery库，并使用$.ajax()或$.get()或$.post()等函数来发送请求。您可以指定请求的URL、数据、请求类型、响应的数据类型等。 下面是一个使用jQuery Ajax发送GET请求并处理响应的示例代码： ```javascript $.ajax({ url: "your-url", type: "GET", success: function(response) { // 处理成功响应 console.log(response); }, error: function(xhr, status, error) { // 处理错误 console.log(error); } }); ``` 这只是一个简单的示例，您可以根据您的需要进行更复杂的操作。jQuery Ajax提供了丰富的选项和回调函数来满足不同的需求。您可以查阅jQuery官方文档以获取更详细的信息和示例代码。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值