jQuery的ajax方法

最新推荐文章于 2024-05-16 02:23:50 发布
最新推荐文章于 2024-05-16 02:23:50 发布
阅读量520 收藏
点赞数
分类专栏： JavaWeb 文章标签： ajax jquery html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45702658/article/details/120542100
版权

jQuery的ajax方法

ajxa方法
url 表示请求的地址
type 表示请求的类型
data 表示发送服务器的数据
格式有两种：
一、name=value&name=value
二、{key:value}
success 请求成功，响应的回调函数
dataType 响应的数据 常用的数据类型有text 表示纯文本、xml 表示xml数据、json 表示json数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta  http-equiv="content-type" content="text/html;charset=UTF-8">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-cache">
    <meta http-equiv="Expires" content="0">
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
    <script type="text/javascript">
      $(function (){
          // ajax请求
          $("#ajaxBtn").click(function(){
              $.ajax({
                  url:"http://localhost:8080/JavaWEB/ajax",
                  //data:"action=jqueryAjax",
                  data:{action:jqueryAjax},
                  type:"GET",
                  success:function (data){
                    //alert("服务器返回的数据类型："+data);
                    //var jsonObj=JSON.parse(data);

                    $("#msg").html("姓名："+data.name+",年龄："+data.age+",性别："+data.sex);
                  },
                  dataType:"json"
              });
          });
      });
    </script>
    <title>Title</title>
</head>
<body>
<div>
    <button id="ajaxBtn">$.ajax请求</button>
    <button id="getBtn">$.get请求</button>
    <button id="postBtn">$.post请求</button>
    <button id="getJsonBtn">$.getJson请求</button>
</div>
<div id="msg">

</div>
</body>
</html>

这里引入js包是通过

 <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>

$.get方法

$.post方法

url 带载入页面的url地址
data 待发送key/value参数
callback 载入成功回调函数
type 返回内容格式，xml，html，script，json，text_default

<!DOCTYPE html>
<html lang="en">
<head>
    <meta  http-equiv="content-type" content="text/html;charset=UTF-8">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-cache">
    <meta http-equiv="Expires" content="0">
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
    <script type="text/javascript">
      $(function (){
          // ajax请求
          $("#ajaxBtn").click(function(){
              $.ajax({
                  url:"http://localhost:8080/JavaWEB/ajax",
                  //data:"action=jqueryAjax",
                  data:{action:jqueryAjax},
                  type:"GET",
                  success:function (data){
                    //alert("服务器返回的数据类型："+data);
                    //var jsonObj=JSON.parse(data);

                    $("#msg").html("姓名："+data.name+",年龄："+data.age+",性别："+data.sex);
                  },
                  dataType:"json"
              });
          });
          $("#getBtn").click(function (){
              $.get({
                  url:"http://localhost:8080/JavaWEB/ajax",
                  data:"action=jqueryGet",
                  success:function(data){
                      $("#msg").html("get 姓名："+data.name+",年龄："+data.age+",性别："+data.sex);
                  },
                  dataType: "json"
              });
          });

          $("#postBtn").click(function (){
              $.post({
                  url:"http://localhost:8080/JavaWEB/ajax",
                  data:"action=jqueryPost",
                  success:function(data){
                      $("#msg").html("post 姓名："+data.name+",年龄："+data.age+",性别："+data.sex);
                  },
                  dataType: "json"
              });
          });
      });
    </script>
    <title>Title</title>
</head>
<body>
<div>
    <button id="ajaxBtn">$.ajax请求</button>
    <button id="getBtn">$.get请求</button>
    <button id="postBtn">$.post请求</button>
    <button id="getJsonBtn">$.getJson请求</button>
</div>
<div id="msg">

</div>
</body>
</html>

ajax——jquery 的getJSON方法

概述：通过HTTP GET请求载入JSON数据。
url 请求的url地址
data 发送给服务器的数据
callback 成功的回调函数

 $("#getJsonBtn").click(function (){
              $.getJSON("http://localhost:8080/JavaWEB/ajax","action=jqueryGetJSON",function (data){
                  $("#msg").html("getJSON 姓名："+data.name+",年龄："+data.age+",性别："+data.sex)
              });
          });

表单序列化serialize()

serialize()可以把表单中所有表单项的内容都获取到，并以name=value&name=value的形式进行拼接

<!DOCTYPE html>
<html lang="en">
<head>
    <meta  http-equiv="content-type" content="text/html;charset=UTF-8">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-cache">
    <meta http-equiv="Expires" content="0">
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
    <script type="text/javascript">
      $(function (){
          // ajax请求
          $("#ajaxBtn").click(function(){
              $.ajax({
                  url:"http://localhost:8080/JavaWEB/ajax",
                  //data:"action=jqueryAjax",
                  data:{action:jqueryAjax},
                  type:"GET",
                  success:function (data){
                    //alert("服务器返回的数据类型："+data);
                    //var jsonObj=JSON.parse(data);

                    $("#msg").html("姓名："+data.name+",年龄："+data.age+",性别："+data.sex);
                  },
                  dataType:"json"
              });
          });
          $("#getBtn").click(function (){
              $.get({
                  url:"http://localhost:8080/JavaWEB/ajax",
                  data:"action=jqueryGet",
                  success:function(data){
                      $("#msg").html("get 姓名："+data.name+",年龄："+data.age+",性别："+data.sex);
                  },
                  dataType: "json"
              });
          });

          $("#postBtn").click(function (){
              $.post({
                  url:"http://localhost:8080/JavaWEB/ajax",
                  data:"action=jqueryPost",
                  success:function(data){
                      $("#msg").html("post 姓名："+data.name+",年龄："+data.age+",性别："+data.sex);
                  },
                  dataType: "json"
              });
          });

          $("#getJsonBtn").click(function (){
              $.getJSON("http://localhost:8080/JavaWEB/ajax","action=jqueryGetJSON",function (data){
                  $("#msg").html("getJSON 姓名："+data.name+",年龄："+data.age+",性别："+data.sex)
              });
          });

          $("#submit").click(function (){
              //把参数序列化
              alert($("#form01").serialize());
              $.getJSON("http://localhost:8080/JavaWEB/ajax","action=jquerySerialize&"+$("#form01").serialize(),function (data){
                  $("#msg").html("jquerySerialize 姓名:"+data.name+",年龄:"+data.age+",性别："+data.sex)
              });
          });

      });
    </script>
    <title>Title</title>
</head>
<body>
<div>
    <button id="ajaxBtn">$.ajax请求</button>
    <button id="getBtn">$.get请求</button>
    <button id="postBtn">$.post请求</button>
    <button id="getJsonBtn">$.getJson请求</button>
</div>
<div id="msg">

</div>


<br><br>

<form id="form01">
    用户名：<input type="text" name="username"><br>
    密码：<input type="password" name="password"> <br>
    下拉单选：
    <select name="single">
        <option value="single1">single1</option>
        <option value="single2">single2</option>
    </select>
    <br>
    下拉多选：
    <select name="multiple" multiple="multiple">
        <option value="Multiple1" selected="selected">Multiple1</option>
        <option value="Multiple2">Multiple2</option>
        <option value="Multiple3" selected="selected">Multiple3</option>
    </select>
    <br>
    复选：
    <input type="checkbox" name="check" value="check1">check1
    <input type="checkbox" name="check" value="check2" checked="checked">check2 <br>
    单选：
    <input type="radio" name="radio" value="radio1" checked="checked">radio1
    <input type="radio" name="radio" value="radio2">radio2 <br>

</form>
<button id="submit">提交-seriliaze</button>

</body>
</html>

服务端servlet程序接收：

   protected void jquerySerialize(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        System.out.println("jquerySerialize  请求过来了");

        String username = req.getParameter("username");
        String password = req.getParameter("password");
        System.out.println("用户名："+username);
        System.out.println("密码："+password);
        Student student = new Student("张三", 25, "男");

        Gson gson = new Gson();

        String s = gson.toJson(student);

        resp.getWriter().write(s);

    }
    ```
想成为大牛的渣渣
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
jQuery ajax方法传递中文时出现中文乱码的解决方法
11-29
在使用jQuery的AJAX方法进行数据交互时，有时会遇到中文字符乱码的问题。这是因为浏览器、服务器和前端之间编码不一致导致的。本文将详细解释这个问题，并提供有效的解决方案。 首先，我们要理解AJAX（Asynchronous...
再谈Jquery Ajax方法传递到action(补充)
10-25
之前写过一篇文章Jquery Ajax方法传值到action，本文是对该文的补充
Ajax基础（应用场景｜jquery实现Ajax｜注意事项｜Ajax发送json数据｜Ajax携带文件数据）
Mchen的博客
11-20 5331
AJAX翻译成中文就是“异步Javascript和XML”。即使用Javascript语言与服务器进行异步交互也是用XML进行数据传输（当然，传输的数据不只是XML，目前更多的使用Json数据）。（XML应用于Web开发的许多方面，常用于简化数据的存储和共享）AJAX不是什么新的编程语言，而是一种使用现有标准的新方法AJAX最大的优点就是不需要重新加载整个页面的情况下，可以与服务器交换数据并更新网页内容（简单来说就是，在网页前端刚输入完数据，后端其实已经验证完数据了，不需要等点击提交了）
jQuery 与 Ajax
Wzc0720的博客
10-28 3766
可以在不重新加载整个网页的情况下，对网页的某部分进行更新。可以在不重新加载整个网页的情况下，对网页的某部分进行更新。简单说是需要连接数据库的地方，但是连接数据库传输的信息量很少，用不着刷新整个页面，这。简单说是需要连接数据库的地方，但是连接数据库传输的信息量很少，用不着刷新整个页面，这。减轻服务器的负担，按需取数，可以最大程度的减少冗余请求和响应对服务造成的负担。减轻服务器的负担，按需取数，可以最大程度的减少冗余请求和响应对服务造成的负担。种类型的适合用 ajax，避免了属性整个页面带来的资源浪费。
【速成之路】网页编程必会的Ajax——jQuery实现Ajax（一）
最新发布
2401_84093443的博客
05-16 718
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
jQuery AJAX 方法
weixin_30780649的博客
06-03 162
jQuery AJAX 方法 AJAX 是一种与服务器交换数据的技术，可以在补充在整个页面的情况下更新网页的一部分。 下面的表格列出了所有的 jQuery AJAX 方法： 方法描述 $.ajax() 执行异步 AJAX 请求 $.ajaxPrefilter() 在每个请求发送之前且被 $.ajax() 处理之前，处理自定义 Ajax 选项或修改已存在选项 ...
Ajax的概念及jQuery中的Ajax的3种方法，模仿jQuery封装自己的Ajax函数
背心的博客
10-20 1070
Ajax的概念及jQuery中的Ajax的3种方法，模仿jQuery封装自己的Ajax函数
jQuery中ajax的使用（最详细）
热门推荐
小屁鸿的博客
08-02 3万+
jQuery中ajax的使用1.jQuery中ajax的基本使用2.jQuery中ajax的回调事件3.jQuery中ajax中的高度封装函数4.jQuery中ajax的全局事件 1.jQuery中ajax的基本使用 2.jQuery中ajax的回调事件 3.jQuery中ajax中的高度封装函数 4.jQuery中ajax的全局事件 ...
jQuery AJAX 方法success()后台传来的4种数据详解
10-18
今天小编就为大家分享一篇jQuery AJAX 方法success()后台传来的4种数据详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
基于JQuery的Ajax方法使用详解
11-30
如下所示： $.ajax的主要参数： url: '_请求的地址', type: 请求类型 get & post data: '请求的参数, success：回调函数 $.ajax({ ... type: 'get', data: 'name=' + $('input...jQuery的一些属性： $('xx').find
基于jQuery的ajax方法封装
10-21
AJAX 是一种用于创建快速动态网页的技术。这篇文章主要介绍了基于jQuery的ajax方法封装的相关资料,需要的朋友可以参考下
jQuery框架：jQuery常用的Ajax方法有哪些?
zy1992As的博客
01-12 281
在表15-12的Ajax操作方法中，$.ajax()是通用方法，通过该方法的setting参数，可以实现与$.get()、$.post()、$.getJSON()和$.getScript()方法同样的功能。在编写$.ajax()方法时，url是$.ajax()方法的必须参数，它既可以在settings参数之前编写，也可以在settings参数中编写。对于开发者而言，编写常规的Ajax代码并不容易，因为不同的浏览器对Ajax的实现并不相同，这也就意味着开发者需要编写额外的代码对浏览器进行测试。
jQuery AJAX的5种实现方式
我的博客新地址： http://www.n-pei.com
03-14 6541
What is AJAXThis section is for those who have no idea what AJAX is. If you don’t fall into this category, feel free to skip to the next section.AJAX stands for asynchronous JavaScript and XML
jQuery ajax()方法
anhuang2806的博客
07-25 142
$.ajax()方法： 　　 * 发送data主要有3种方式 * 1.json 数组(推荐1) * 2.url拼接 * 3.表单的序列化serialize(推荐2) (1)json 数组(推荐1) $(function(){ var myClick = function(){ var userName = $().val(); ...
Jquery和Ajax的使用入门
weixin_67925322的博客
05-27 292
Jquery和AjaxJQuery和Ajax1.JQuery的 入门2.原生Js和Jquery对象的相互转换2.1原生Js标签对象---转换成Jq标签对象2.2 Jq对象转换成原生Js对象3.Jquery的选择器3.1 基本选择器3.2 Jquery层级选择器3.3 Jquery的属性选择器4.Jq的html方法,val()以及,text()方法5.Jquery的文档处理_dom操作6.原生Ajax的使用7.Jquery的ajax使用方式:封装原生Ajax的写法方式1:方式2:$.get(url, [dat
JQuery的ajax方法
Ayangdaye的博客
11-15 831
首先，要了解什么是ajax。 通俗来说，就是前段用来请求后端数据的方式。那么。源生js和jq的方法的不同，通过以下来演示。 先来看普通ajax请求方式： 分为四步，且返回数据类型不可控。 接下来看jq带来的ajax请求方法： 第一步：引入jq 以及编写html及css样式、 第二步：写点击按钮请求ajax 【注意】：dataType: "jsonp"...
jquery中ajax常用的方法,详解如何实现前端jquery中的ajax方法，看这一篇就够了
weixin_32821913的博客
08-05 549
首页 / 前端开发 / Javascript / 详解如何实现前端jquery中的ajax方法，看这一篇就够了详解如何实现前端jquery中的ajax方法，看这一篇就够了2020-4-139520前言这篇文章主要聊一聊如何手写一个jquery的ajax方法，这是前端中的基础知识，也是一道非常经典的前端面试题！一步步手写ajax在web页面中与后端通信的顺序一般都是客户端向服务器发起请求，然...
jquery中ajax的几种方式
weixin_34190136的博客
02-14 915
三种简写： 　　$.get(URL,data,function(data,status,xhr),dataType) 　　$(selector).post(URL,data,function(data,status,xhr),dataType) 　　$(selector).getJSON(url,data,success(data,status,xhr)) 一、$.get(URL,d...
jQuery学习(四) ---------jQuery中AJAX相关方法
在森林里麋了鹿
11-21 646
目录1. $.ajax()2. $.get()3. $.post() jQuery 提供多个与 AJAX 有关的方法。通过 jQuery AJAX 方法，您能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON 同时能够把接收的数据更新到 DOM 对象。 1. $.ajax() $.ajax() 是 jQuery 中 AJAX 请求的核心方法，所有的其他方法都是在内部使用此方法 语法：$.ajax( { name:value, name:value,
jsp中怎么获取 jQuery AJAX 方法发送的 HTTP GET 请求
06-08
1. 在 jQuery AJAX 方法中设置发送 GET 请求的 URL 和数据： ```javascript $.ajax({ url: "get_data.jsp", type: "GET", data: {name: "John", age: 30}, success: function(response) { console.log...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

想成为大牛的渣渣

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值