ajax-jQuery

最新推荐文章于 2024-04-09 10:00:00 发布
最新推荐文章于 2024-04-09 10:00:00 发布
阅读量53 收藏
点赞数
原文链接：https://my.oschina.net/mickeymouse/blog/518735
版权
jQuery 对 Ajax 操作进行了封装:
第一层是在 jQuery 中最底层的方法时 $.ajax()
第二层是 load(), $.get() 和 $.post()
第三层是 $.getScript() 和 $.getJSON()

load()

load(url, [data], [callback])载入远程 HTML 文件代码并插入至 DOM 中
url:待装入 HTML 网页网址。
data:发送至服务器的 key/value 数据。在jQuery 1.3中也可以接受一个字符串了。
callback:载入成功时回调函数。函数有三个参数: 
data:返回内容
textStatus: 代表请求状态的 
                              其值可能为: succuss, error, notmodify, timeout 4 种)
                         XMLHttpRequest 对象
默认使用 GET 方式 - 传递附加参数时自动转换为 POST 方式

可以指定选择符，来筛选载入的 HTML 文档，DOM 中将仅插入筛选出的 HTML 代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd" >
<html>
<head>
<meta http-equiv= "Content-Type" content= "text/html; charset=UTF-8" >
<title>Insert title here</title>
     <script type= "text/javascript" src= "../js/jquery-1.8.3.js" ></script>
//===================================================================  
       <script type= "text/javascript" >
         $( function (){
             $( "#ajaxbutton" ).click( function (){
                 var url = "/jQuery2/Demo" ; 
                 var parme = { "username" : "张三" , "password" : "1234" };
                 $( this ).load(url,parme, function (data){
                 alert(data);
                     var dataparme = eval( "(" +data+ ")" );
                     alert(dataparme.message);
                 });            
             });
         });
      </script>
//==========================================================================   
</head>
<body>
     <input id= "ajaxbutton" type= "button" value= "发送ajax" />
</body>
</html>

Servlet

1
2
3
4
5
6
7
8
9
10
11
12
13
14
public void doGet(HttpServletRequest request, HttpServletResponse response)
             throws ServletException, IOException {
         String username = request.getParameter( "username" );
         String password = request.getParameter( "password" );
         System.out.println(username+ ":" +password);
         //>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
         //处理数据
         response.setContentType( "text/html;charset=UTF-8" );
         // 发送相应数据，JSON数据 ,
         ///* 注意： jQuery 不支持畸形的json格式，key必须使用双引号，否则畸形
         //String json = "{'message':''}";  //此数据位畸形json格式
         String json = "{\"message\":\"操作成功\"}" ;
         response.getWriter().print(json);
     }

$.get()

jQuery.get(url, [data], [callback], [type]) 通过远程 HTTP GET 请求载入信息。
url:待载入页面的URL地址
data:待发送 Key/value 参数。
callback:载入成功时回调函数。
type:返回内容格式 : xml, html, script, json, text, _default。

如果传递参数有中文,需要在服务器端接收时进行乱码处理

1
2
3
4
5
6
7
8
9
10
11
<script type= "text/javascript" >
     $( function (){
         $( "#ajaxbutton" ).click( function (){
             var url = "/jQuery2/Demo" ; 
             var parme = { "username" : "张三" , "password" : "1234" };
             $.get(url,parme, function (data){
                 alert(data.message);
             }, "json" );     
         });
     });
</script>

Servlet

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
public void doGet(HttpServletRequest request, HttpServletResponse response)
         throws ServletException, IOException {
     String username = request.getParameter( "username" );
     String password = request.getParameter( "password" );
     //get获取参数时需要处理中文乱码
     String string = new String(username.getBytes( "iso-8859-1" ), "utf-8" );
     
     System.out.println(string+ ":" +password);
     //>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
     //处理数据
     response.setContentType( "text/html;charset=UTF-8" );
     // 发送相应数据，JSON数据 ,
     ///* 注意： jQuery 不支持畸形的json格式，key必须使用双引号，否则畸形
     //String json = "{'message':''}";  //此数据位畸形json格式
     String json = "{\"message\":\"操作成功\"}" ;
     response.getWriter().print(json);
}

$.post()

jQuery.post(url, [data], [callback], [type]),通过远程 HTTP POST 请求载入信息。
url:发送请求地址。
data:待发送 Key/value 参数。
callback:发送成功时回调函数。
type:返回内容格式，xml, html, script, json, text, _default。
1
2
3
4
5
6
7
8
9
10
11
12
<script type= "text/javascript" >
         $( function (){
             $( "#ajaxbutton" ).click( function (){
                 var url = "/jQuery2/Demo" ; 
                 var parme = { "username" : "张三" , "password" : "1234" };
                 
                 $.post(url,parme, function (data){
                     alert(data.message);
                 }, "json" );
             });
         });
     </script>

Servlet

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
public void doGet(HttpServletRequest request, HttpServletResponse response)
         throws ServletException, IOException {
     String username = request.getParameter( "username" );
     String password = request.getParameter( "password" );
     
     System.out.println(username+ ":" +password);
     //>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
     //处理数据
     response.setContentType( "text/html;charset=UTF-8" );
     // 发送相应数据，JSON数据 ,
     ///* 注意： jQuery 不支持畸形的json格式，key必须使用双引号，否则畸形
     //String json = "{'message':''}";  //此数据位畸形json格式
     String json = "{\"message\":\"操作成功\"}" ;
     response.getWriter().print(json);
}

$.ajax()


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<script type= "text/javascript" >
         $( function (){
             $( "#ajaxbutton" ).click( function (){
                 var url = "/jQuery2/Demo" ; 
                 var parme = { "username" : "张三" , "password" : "1234" };
                 /* 2.4 $.ajax 底层ajax请求
                  * $.ajax(url,[settings])
                  * 一般使用格式：$.ajax(settings)
                  *      url ：请求路径
                  *      data ：请求参数
                  *      type ：请求方式，get、post。默认: GET
                  *      success ：成功后回调函数
                  *      error ：异常时回调函数
                  *      dataType ：务器返回的数据类型。例如：json、html、xml 等
                  *          "xml": 返回 XML 文档，可用 jQuery 处理。
                  *          "html": 返回纯文本 HTML 信息；包含的script标签会在插入dom时执行。
                  *          "script": 返回纯文本 JavaScript 代码。不会自动缓存结果。除非设置了"cache"参数。'''注意：'''在远程请求时(不在同一个域下)，所有POST请求都将转为GET请求。(因为将使用DOM的script标签来加载)
                  *          "json": 返回 JSON 数据 。
                  *          "jsonp": JSONP 格式。使用 JSONP 形式调用函数时，如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。
                  *          "text": 返回纯文本字符串
                  */
                 $.ajax({
                     "url" :url,
                     "data" :params,
                     "type" : "post" ,
                     "success" : function (data){
                         alert(data);
                     },
                     "error" : function (){
                         alert( "服务器异常" );
                     },
                     "dataType" : "json"
                 });
             });
         });
     </script>







转载于:https://my.oschina.net/mickeymouse/blog/518735

chuoyuan3350
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JQuery jQuey Ajax- POST请求
norang的博客
07-19 4550
这里写目录标题6.2.3 POST请求参考目录 6.2.3 POST请求        POST 请求方式与 GET 请求方式截然不同。 POST 请求支持发送任意格式 、 任意长度的数据 ， 而不仅仅限于名／值对字符串 。 传递二进制的文件、 大容量信息、 安全信息或 XML 格式数据时 ， 使用POST方式比较高效。        一般来说，POST 请求用千在表单
jQuery-Ajax 详解
m0_48982503的博客
12-14 1万+
一、什么是Ajax Ajax的全称是Asynchronous JavaScript And XML（异步JavaScript和XML）我们可以理解为：在网页中利用XMLHttpRequest对象和服务器进行数据交互的方式就是Ajax，它可以帮助我们轻松实现网页与服务器之间的数据交互。 二，jQuery中的Ajax 在jQuery中，$.Ajax()方法属于最底层的方法，第2层是load()，$.get()，和$.post()，第3层是$.getScript()和$.getJSON()方法。 ...
Ajax学习笔记（二）：jQuery 中的 AJAX、axios发送AJAX请求、AJAX-jQuery通用方法发送AJAX请求、fetch发送AJAX请求、同源策略、JSONP、CORS
weixin_62764364的博客
04-09 1262
type:设置返回内容格式，xml, html, script, json, text, _default。实现用户校验，服务端响应体是一个函数，先声明handle函数，然后创建script标签，利用src属性请求数据。type:设置返回内容格式，xml, html, script, json, text, _default。AJAX默认遵循同源策略。这是一个跨原的一个请求的设置，匿名的意思，加上这个请求时将不会写在当前域名的。案，它的特点是不需要在客户端做任何特殊的操作，完全在服务器中进行处理，支持。
jQuery-Ajax（详解）
热门推荐
sunshao904
05-30 2万+
安装Web环境 Ajax方法需要与Web服务器端进行交互，需要有环境才可正常使用，安装环境的工具包有很多，可以选择自行下载。 jQuery中的Ajax 在jQuery中，$.Ajax()方法属于最底层的方法，第2层是load()，$.get()，和$.post()，第3层是$.getScript()和$.getJSON()方法。 一、 load( ) 方法 结构load( url , [data] , [callback] ) 参数解释 捕获.PNG 1.1 应用 1.1.1首先构建一
JQuery jQuey Ajax- GET请求
norang的博客
07-19 2547
这里写目录标题6.2.2 GET请求参考目录 6.2.2 GET请求        get(）方法就是通过查询字符串的方式来传递请求信息。GET请求的参数通过问号（？）前缀附加在URL的末尾， 参数是以连字符(&)连接的一个或多个名／值对。 每个名称和值都必须在编码后才能用在URL中，可以在JavaScript中使用 encodeURIComponent()方法进行编码， 服务器端在接收这些数据时也必须使用decodeURICom
「jQuery系列」jQuery中Ajax的运用
日常笔记/总结/系列知识梳理
03-13 2411
jQuery Ajax 是 jQuery 提供的一个功能强大的异步通信方法，它允许网页与服务器之间进行数据交换，而无需重新加载整个页面。通过使用 Ajax，开发者可以实现更加流畅和响应式的用户体验，减少不必要的网络传输和页面加载时间。jQuery Ajax 的核心方法是$.ajax()，它提供了丰富的选项和回调函数，用于配置和执行 Ajax 请求。下面是一个基本的$.ajax()$.ajax({url: 'https://api.example.com/data', // 请求的 URL。
ajax尚硅谷笔记——跨域请求、axios发送ajax请求、jquery发送ajax请求
weixin_53317758的博客
11-21 2060
script标签作为函数被服务调用，其中加上该函数的参数作为用户需要看到的数据内容
JQuery发送AJAX请求
gcsyzy的博客
04-01 1473
JQuery发送AJAX请求的三种方式：$get()，$post()，$ajax()
jquery ajax content type,JQuery ajax的contentType
weixin_39681486的博客
08-05 1102
原理说明Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用javascript来操作DOM而更新页面。XMLHttpRequest是ajax的核心机制,其原理此文不做阐述。通过对XMLHttpRequest对象的属性和方法的设置，与服务端之间进行基于http请求的消息传送。例如，XMLHttpRequest对象的setRequestHeader...
Ajax-GET请求
廖若星辰-LTY
09-01 6523
Ajax的意思是：异步JavaScript和XML。 通俗的理解：在网页中利用XMLHttpRequest对象和服务器进行数据交互的方式，就是Ajax。 Ajax能让我们轻松实现网页与服务器之间的数据交互。 Ajax的底层实现主要是用到浏览器中提供的XMLHttpRequest对象用法比较复杂，所以jQuery对XMLHttpRequest进行了封装提供了一系列Ajax相关的函数，极大降低了Ajax的使用难度。 使用XMLHttpRequest发起GET请求 使用XMLHttpRequest（简称
Ajax-jquery-ajax-cache.zip
09-17
Ajax-jquery-ajax-cache.zip,jquery插件，用于用“localstorage”或“sessionstorage”缓存ajax。,ajax代表异步javascript和xml。它是多种web技术的集合，包括html、css、json、xml和javascript。它用于创建动态网页...
Ajax-JQuery
08-28
**Ajax与jQuery** Ajax（Asynchronous JavaScript and XML）是一种在无需刷新整个网页的情况下，能够更新部分网页的技术。它通过在后台与服务器进行少量数据交换，使网页实现异步更新。这种方式可以让网页保持交互...
Ajax-jquery-ajax-progress.zip
09-17
Ajax-jquery-ajax-progress.zip,使用xhr.onprogress事件调用“progress”回调的jquery的一个简单补丁,ajax代表异步javascript和xml。它是多种web技术的集合，包括html、css、json、xml和javascript。它用于创建动态...
Ajax-JQuery-Ajax-POST-in-Codeigniter.zip
09-17
Ajax-JQuery-Ajax-POST-in-Codeigniter.zip,如何将带有数据的ajax post请求发送到codeigniter控制器，而不刷新页面并将数据返回到视图。,ajax代表异步javascript和xml。它是多种web技术的集合，包括html、css、json...
Ajax-jQuery-Ajax-Dynamic-Select.zip
09-17
Ajax-jQuery-Ajax-Dynamic-Select.zip,从数据库中获取筛选记录的简单应用程序,ajax代表异步javascript和xml。它是多种web技术的集合，包括html、css、json、xml和javascript。它用于创建动态网页，其中网页的小部分...
全国计算机三级（网络技术）做题技巧
07-22
全国计算机三级（网络技术）做题技巧
记录 cocos 开发问题 ，微信 wx.xxx函数 报找不到名称“wx”
最新发布
07-22
wx api 文件
20231108-173536 时间箭贴板
07-22
时间粘贴小工具 启动后点击回车 可以得到时间字符串 直接粘贴可用
毕业设计javajsp西饼点心店收费系统(ssh)-qrp源码含文档工具包
07-22
毕业设计javajsp西饼点心店收费系统(ssh)-qrp源码含文档工具包 后台是ssh框架，页面是jsp，数据库mysql，jdk1.8，开发工具用ecplise、myecplise、sts、idea都可以 点心店管理系统是针对点心店内部而设计的，应用于点心店的局域网，这样可以使得点心店内部管理更有效的联系起来。系统的主要功能包括：供货商信息管理、点心信息管理、采购申请管理与物品采购管理。 包含：源码、数据库脚本、论文、开题报告、环境工具包、相同框架项目的安装教程（在说明文档中）
jQuery表单操作与Ajax技巧详解
在实际应用中，jQuery的安装通常通过下载压缩版（如`jquery-1.3.2.min.js`）或包含完整代码、文档和示例的release包来进行。将jQuery库添加到HTML页面的部分，使用`<script>`标签引入。而jQuery的核心方法`$()`则是...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值