jQuery中的Ajax实现

最新推荐文章于 2023-07-02 21:35:40 发布
最新推荐文章于 2023-07-02 21:35:40 发布
阅读量286 收藏
点赞数
分类专栏： Web启示录 [基础篇] 文章标签： Ajax js 互联网 jQuery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_29025139/article/details/46795871
版权 




   
   

    
    

     
     <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    
    

    
    

     
     <html>
    
    

    
    

     
         <head>
    
    

    
    

     
             <title>ddd</title>
    
    

    
    

     
             <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    

    
    

     
             <script language="JavaScript" src="../js/jquery-1.4.2.js">
    
    

    
    

     
             </script>
    
    

    
    

     
             <style type="text/css">
    
    

    
    

     
                 div, span {
    
    

    
    

     
                     width: 140px;
    
    

    
    

     
                     height: 140px;
    
    

    
    

     
                     margin: 20px;
    
    

    
    

     
                     background: #9999CC;
    
    

    
    

     
                     border: #000 1px solid;
    
    

    
    

     
                     float: left;
    
    

    
    

     
                     font-size: 17px;
    
    

    
    

     
                     font-family: Roman;
    
    

    
    

     
                 }
    
    

    
    

     
                 
    
    

    
    

     
                 div.mini {
    
    

    
    

     
                     width: 30px;
    
    

    
    

     
                     height: 30px;
    
    

    
    

     
                     background: #CC66FF;
    
    

    
    

     
                     border: #000 1px solid;
    
    

    
    

     
                     font-size: 12px;
    
    

    
    

     
                     font-family: Roman;
    
    

    
    

     
                 }
    
    

    
    

     
                 
    
    

    
    

     
                 div.visible {
    
    

    
    

     
                     display: none;
    
    

    
    

     
                 }
    
    

    
    

     
             </style>
    
    

    
    

     
             <!--引入jquery的js库-->
    
    

    
    

     
         </head>
    
    

    
    

     
         <body>
    
    

    
    

     
             <form action="" name="form1" id="form1">
    
    

    
    

     
                 <input type="text" name="username" id="username" value="zhang">
    
    

    
    

     
                 <br>
    
    

    
    

     
                 <input type="text" name="psw" id="psw" value="99999">
    
    

    
    

     
                 <br>
    
    

    
    

     
                 <input type="button" id="b1" value="登陆">
    
    

    
    

     
             </form>
    
    

    
    

     
             <div id="one">
    
    

    
    

     
             </div>
    
    

    
    

     
     		<h1></h1>
    
    

    
    

     
         </body>
    
    

    
    

     
         <script language="JavaScript">
    
    

    
    

     
           	$().ready(function(){
    
    

    
    

     
     			/*
    
    

    
    

     
     			 * load(url,[data],[callback]);
    
    

    
    

     
     			 * 	url:请求的服务器的资源地址
    
    

    
    

     
     			 *  data:向服务器端发送数据，JSON串格式.如果有此参数，就以POST方式提交数据，没有就是get方式提交数据
    
    

    
    

     
     			 *  callback:function(data,textStatus,xhr){}
    
    

    
    

     
     			 *  		data:服务器端返回的数据
    
    

    
    

     
     			 *  		textStatus:状态。succuss, error, notmodify, timeout
    
    

    
    

     
     			 *  		xhr：XmlHttpRequest对象本身
    
    

    
    

     
     			 */
    
    

    
    

     
     			/*$("#b1").click(function(){
    
    

    
    

     
     				$("#one").load("1.jsp",{username:'gfy'},function(data,textStatus,xhr){
    
    

    
    

     
     					//alert(data);
    
    

    
    

     
     					//alert(textStatus);
    
    

    
    

     
     					//alert(xhr);
    
    

    
    

     
     				});
    
    

    
    

     
     			});*/
    
    

    
    

     
     			$("#b1").click(function(){
    
    

    
    

     
     					//1.jsp h1,h2 只获取1.jsp返回的h1、h2标记的内容
    
    

    
    

     
     				$("#one").load("1.jsp h1,h2",{username:'gfy'},function(data,textStatus,xhr){
    
    

    
    

     
     					$(":header").html(data);
    
    

    
    

     
     				});
    
    

    
    

     
     			});
    
    

    
    

     
     		});
    
    

    
    

     
         </script>
    
    

    
    

     
     </html>



//jsp文件： 

   
   

    
    

     
     <%@ page language="java" contentType="text/html; charset=UTF-8"
    
    

    
    

     
         pageEncoding="UTF-8"%>
    
    

    
    

     
     <%
    
    

    
    

     
     System.out.println(request.getMethod());
    
    

    
    

     
     System.out.println(request.getParameter("username"));
    
    

    
    

     
     out.write("ok");
    
    

    
    

     
     %>



//第二种：get 

   
   

    
    

     
     <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    
    

    
    

     
     <html>
    
    

    
    

     
         <head>
    
    

    
    

     
             <title>ddd</title>
    
    

    
    

     
             <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    

    
    

     
              <script language="JavaScript" src="../js/jquery-1.4.2.js"></script>
    
    

    
    

     
             </script>
    
    

    
    

     
             <style type="text/css">
    
    

    
    

     
                 div, span {
    
    

    
    

     
                     width: 140px;
    
    

    
    

     
                     height: 140px;
    
    

    
    

     
                     margin: 20px;
    
    

    
    

     
                     background: #9999CC;
    
    

    
    

     
                     border: #000 1px solid;
    
    

    
    

     
                     float: left;
    
    

    
    

     
                     font-size: 17px;
    
    

    
    

     
                     font-family: Roman;
    
    

    
    

     
                 }
    
    

    
    

     
                 
    
    

    
    

     
                 div.mini {
    
    

    
    

     
                     width: 30px;
    
    

    
    

     
                     height: 30px;
    
    

    
    

     
                     background: #CC66FF;
    
    

    
    

     
                     border: #000 1px solid;
    
    

    
    

     
                     font-size: 12px;
    
    

    
    

     
                     font-family: Roman;
    
    

    
    

     
                 }
    
    

    
    

     
                 
    
    

    
    

     
                 div.visible {
    
    

    
    

     
                     display: none;
    
    

    
    

     
                 }
    
    

    
    

     
             </style>
    
    

    
    

     
             <!--引入jquery的js库-->
    
    

    
    

     
         </head>
    
    

    
    

     
         <body>
    
    

    
    

     
             <form action="" name="form1" id="form1">
    
    

    
    

     
                 <input type="text" name="username" id="username" value="zhang">
    
    

    
    

     
                 <br>
    
    

    
    

     
                 <input type="text" name="psw" id="psw" value="99999">
    
    

    
    

     
                 <br>
    
    

    
    

     
                 <input type="button" id="b1" value="登陆">
    
    

    
    

     
             </form>
    
    

    
    

     
             <div id="one">
    
    

    
    

     
             </div>
    
    

    
    

     
         </body>
    
    

    
    

     
         <script language="JavaScript">
    
    

    
    

     
         	$().ready(function(){
    
    

    
    

     
     			$("#b1").click(function(){
    
    

    
    

     
     				/*
    
    

    
    

     
     				 * $.get(url,data,callback)
    
    

    
    

     
     				 */
    
    

    
    

     
     				/*$.post("1.jsp",{username:'gfy',psw:'123'},function(data,textStatus){
    
    

    
    

     
     					$("#one").text(data);
    
    

    
    

     
     				});*/
    
    

    
    

     
     				$.post("1.jsp",$("#form1").serialize(),function(data,textStatus){
    
    

    
    

     
     					$("#one").text(data);
    
    

    
    

     
     				});
    
    

    
    

     
     			});
    
    

    
    

     
     			
    
    

    
    

     
     		});
    
    

    
    

     
         </script>
    
    

    
    

     
     </html>
    
    

    
    

     
     

    
    

   
   


    
    

     
     

      
      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
     
     

     
     

      
      <html>
     
     

     
     

      
          <head>
     
     

     
     

      
              <title>ddd</title>
     
     

     
     

      
              <meta http-equiv="content-type" content="text/html; charset=UTF-8">
     
     

     
     

      
              <script language="JavaScript" src="../js/jquery-1.4.2.js">
     
     

     
     

      
              </script>
     
     

     
     

      
              <style type="text/css">
     
     

     
     

      
                  div, span {
     
     

     
     

      
                      width: 140px;
     
     

     
     

      
                      height: 140px;
     
     

     
     

      
                      margin: 20px;
     
     

     
     

      
                      background: #9999CC;
     
     

     
     

      
                      border: #000 1px solid;
     
     

     
     

      
                      float: left;
     
     

     
     

      
                      font-size: 17px;
     
     

     
     

      
                      font-family: Roman;
     
     

     
     

      
                  }
     
     

     
     

      
                  
     
     

     
     

      
                  div.mini {
     
     

     
     

      
                      width: 30px;
     
     

     
     

      
                      height: 30px;
     
     

     
     

      
                      background: #CC66FF;
     
     

     
     

      
                      border: #000 1px solid;
     
     

     
     

      
                      font-size: 12px;
     
     

     
     

      
                      font-family: Roman;
     
     

     
     

      
                  }
     
     

     
     

      
                  
     
     

     
     

      
                  div.visible {
     
     

     
     

      
                      display: none;
     
     

     
     

      
                  }
     
     

     
     

      
              </style>
     
     

     
     

      
              <!--引入jquery的js库-->
     
     

     
     

      
          </head>
     
     

     
     

      
          <body>
     
     

     
     

      
              <form action="" name="form1" id="form1">
     
     

     
     

      
                  <input type="text" name="username" id="username" value="zhang">
     
     

     
     

      
                  <br>
     
     

     
     

      
                  <input type="text" name="psw" id="psw" value="99999">
     
     

     
     

      
                  <br>
     
     

     
     

      
                  <input type="button" id="b1" value="登陆">
     
     

     
     

      
              </form>
     
     

     
     

      
              <div id="one">
     
     

     
     

      
              </div>
     
     

     
     

      
      		<h1></h1>
     
     

     
     

      
          </body>
     
     

     
     

      
          <script language="JavaScript">
     
     

     
     

      
            	$().ready(function(){
     
     

     
     

      
      			/*
     
     

     
     

      
      			 * load(url,[data],[callback]);
     
     

     
     

      
      			 * 	url:请求的服务器的资源地址
     
     

     
     

      
      			 *  data:向服务器端发送数据，JSON串格式.如果有此参数，就以POST方式提交数据，没有就是get方式提交数据
     
     

     
     

      
      			 *  callback:function(data,textStatus,xhr){}
     
     

     
     

      
      			 *  		data:服务器端返回的数据
     
     

     
     

      
      			 *  		textStatus:状态。succuss, error, notmodify, timeout
     
     

     
     

      
      			 *  		xhr：XmlHttpRequest对象本身
     
     

     
     

      
      			 */
     
     

     
     

      
      			/*$("#b1").click(function(){
     
     

     
     

      
      				$("#one").load("1.jsp",{username:'gfy'},function(data,textStatus,xhr){
     
     

     
     

      
      					//alert(data);
     
     

     
     

      
      					//alert(textStatus);
     
     

     
     

      
      					//alert(xhr);
     
     

     
     

      
      				});
     
     

     
     

      
      			});*/
     
     

     
     

      
      			$("#b1").click(function(){
     
     

     
     

      
      					//1.jsp h1,h2 只获取1.jsp返回的h1、h2标记的内容
     
     

     
     

      
      				$("#one").load("1.jsp h1,h2",{username:'gfy'},function(data,textStatus,xhr){
     
     

     
     

      
      					$(":header").html(data);
     
     

     
     

      
      				});
     
     

     
     

      
      			});
     
     

     
     

      
      		});
     
     

     
     

      
          </script>
     
     

     
     

      
      </html>



//jsp文件： 

    
    

     
     

      
      <%@ page language="java" contentType="text/html; charset=UTF-8"
     
     

     
     

      
          pageEncoding="UTF-8"%>
     
     

     
     

      
      <%
     
     

     
     

      
      System.out.println(request.getMethod());
     
     

     
     

      
      System.out.println(request.getParameter("username"));
     
     

     
     

      
      out.write("ok");
     
     

     
     

      
      %>



//第二种：get 

    
    

     
     

      
      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
     
     

     
     

      
      <html>
     
     

     
     

      
          <head>
     
     

     
     

      
              <title>ddd</title>
     
     

     
     

      
              <meta http-equiv="content-type" content="text/html; charset=UTF-8">
     
     

     
     

      
               <script language="JavaScript" src="../js/jquery-1.4.2.js"></script>
     
     

     
     

      
              </script>
     
     

     
     

      
              <style type="text/css">
     
     

     
     

      
                  div, span {
     
     

     
     

      
                      width: 140px;
     
     

     
     

      
                      height: 140px;
     
     

     
     

      
                      margin: 20px;
     
     

     
     

      
                      background: #9999CC;
     
     

     
     

      
                      border: #000 1px solid;
     
     

     
     

      
                      float: left;
     
     

     
     

      
                      font-size: 17px;
     
     

     
     

      
                      font-family: Roman;
     
     

     
     

      
                  }
     
     

     
     

      
                  
     
     

     
     

      
                  div.mini {
     
     

     
     

      
                      width: 30px;
     
     

     
     

      
                      height: 30px;
     
     

     
     

      
                      background: #CC66FF;
     
     

     
     

      
                      border: #000 1px solid;
     
     

     
     

      
                      font-size: 12px;
     
     

     
     

      
                      font-family: Roman;
     
     

     
     

      
                  }
     
     

     
     

      
                  
     
     

     
     

      
                  div.visible {
     
     

     
     

      
                      display: none;
     
     

     
     

      
                  }
     
     

     
     

      
              </style>
     
     

     
     

      
              <!--引入jquery的js库-->
     
     

     
     

      
          </head>
     
     

     
     

      
          <body>
     
     

     
     

      
              <form action="" name="form1" id="form1">
     
     

     
     

      
                  <input type="text" name="username" id="username" value="zhang">
     
     

     
     

      
                  <br>
     
     

     
     

      
                  <input type="text" name="psw" id="psw" value="99999">
     
     

     
     

      
                  <br>
     
     

     
     

      
                  <input type="button" id="b1" value="登陆">
     
     

     
     

      
              </form>
     
     

     
     

      
              <div id="one">
     
     

     
     

      
              </div>
     
     

     
     

      
          </body>
     
     

     
     

      
          <script language="JavaScript">
     
     

     
     

      
          	$().ready(function(){
     
     

     
     

      
      			$("#b1").click(function(){
     
     

     
     

      
      				/*
     
     

     
     

      
      				 * $.get(url,data,callback)
     
     

     
     

      
      				 */
     
     

     
     

      
      				/*$.post("1.jsp",{username:'gfy',psw:'123'},function(data,textStatus){
     
     

     
     

      
      					$("#one").text(data);
     
     

     
     

      
      				});*/
     
     

     
     

      
      				$.post("1.jsp",$("#form1").serialize(),function(data,textStatus){
     
     

     
     

      
      					$("#one").text(data);
     
     

     
     

      
      				});
     
     

     
     

      
      			});
     
     

     
     

      
      			
     
     

     
     

      
      		});
     
     

     
     

      
          </script>
     
     

     
     

      
      </html>
chitry_
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
用jQuery实现Ajax
m0_53698336的博客
11-01 6565
Ajax 全称“Asynchronous JavaScript and XML”，译为“异步 JavaScript 和 XML”，程序员们习惯称之为“阿贾克斯”，它并不是一种技术，而是多种技术的综合体，其中包括 JavaScript、XML、JSON、DOM、CSS、HTML 以及最重要的 XMLHttpRequest 对象。通过 Ajax 可以异步从服务器请求数据并将数据更新到网页中，整个过程不需要重载（刷新）整个网页，可以将网页的内容更快的呈现给用户。 这里的异步是指，当程序执行到 Ajax 代码时，将
JQuery发送AJAX请求
gcsyzy的博客
04-01 1383
JQuery发送AJAX请求的三种方式：$get()，$post()，$ajax()
jQuery实现AJAX和AJAX跨域问题
最新发布
qq_37035987的博客
07-02 2911
1、跨域是指从一个域名的网页去请求另一个域名的资源，AJAX存在跨域问题，比如下面从服务器a发送AJAX请求到服务器b。2、同源策略是指一段脚本只能读取来自同一来源的资源，同源就是协议、域名、端口都相同。后台响应需要获取AJAX请求时穿过来的函数名，默认为callback，可以通过。3、在被访问中设置响应头来解决AJAX跨域问题。dataType : "jsonp"(这里一定要写jsop)4、用jsopn解决AJAX跨域问题。二、用AJAX实现一个省市联动动态展示功能。一、AJAX跨域问题。
用jquery实现ajax请求,用jQuery实现Ajax
weixin_42554162的博客
08-05 797
前置知识：ajax原理，json字符串进行信息传递。Ajax主要的功能是实现了浏览器端 异步 访问服务器：通过浏览器的XMLHttpRequest对象发出小部分数据，与服务端进行交互，服务端返回小部分数据，然后更新客户端的部分页面。json是Ajax发送小部分数据的一种轻量级数据格式，可以简单易懂的给服务器或者浏览器交互数据，包括json对象，json数组对象。一、jquery.ajax()jqu...
jQuery中的Ajax
weixin_45375510的博客
10-11 4445
jQuery×Ajax jquery提供多个与ajax有关的方法，通过jquery ajax方法，能够使用HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML或JSON，同时能够把接收的数据更新到DOM对象。代替XMLHttpRequest，但其实jquery还是封装的异步对象。 (1)$.ajax() $.ajax()是jquery中ajax请求的核心方法，所有的其他方法都是在内部使用此方法。 语法： $.ajax({key: value, key: value, ...})
Jquery实现AJAX异步通信
qq_53009955的博客
07-22 791
Ajax（AsynchronousJavaScriptandXML），直译为“异步的JavaScript与”，是一种创建交互式网页应用的网页开发技术，用于创建快速动态网页，由杰西·詹姆士·贾瑞特所提出。与传统的Web应用相比，Ajax通过浏览器与服务器进行少量的数据交换就可以实现网页的异步更新，在不重新加载整个网页的情况下，即可对网页进行更新。......
浅谈使用Jquery实现ajax请求
三冬暖
05-17 2995
使用jQuery实现ajax请求 一、以前Ajax请求 Ajax请求的实现分为五个步骤： 创建请求对象 设置与服务器端的连接信息 向服务器发送数据 设置回调函数 接收服务器的响应数据 每次都写这五个步骤显得比较麻烦，所以使用jQuery的方法实现则较为简洁。 二、使用jQuery实现 语法 $.ajax([settings]) settings为配置ajax请求的一系列键值对，具体参数说明如下表（参数来源菜鸟教程） 名称 值/描述 async 布尔值，表示请求是否异步处理。默
jquery中ajax中的参数,jquery中的ajax参数
weixin_42109598的博客
08-05 2554
jquery中将ajax封装成了函数，我们使用起来非常方便，jquery会自动根据内容选择post还是get方式提交数据，并且会自动编码，但是要想完全掌握jquery中的ajax，我们必须将它的各个参数记住：1、url strng 发送请求的地址2、type string 请求方式(post或get，默认get)，其他http请求方法，比如：put和delete也可以使用，但只有部...
jquery与ajax实现增删改查
qq_45030966的博客
09-14 6156
jquery与ajax实现增删改查 对于本项目，jquery与ajax实现当前页面的增删改查 jquery获取当前页面的数据，ajax与后台接口进行连接，将后台数据返回到前端，将前端数据送回后台 准备操作： 1.将项目上传到云服务器上，并且通过 java -jar xxx.jar命令行运行当前jar包。运行成功后，打开http://ip:端口号/swagger-ui.html页面查看接口。 2.连接云服务器数据库 新建数据库，xxtx,将sql文件导入进来。导入成功之后，给当前云服务器的数据库创建用户名
jQuery.ajax异步请求实现方式
qq_56930747的博客
06-13 619
Ajax是一种异步的、局部刷新的技术。同步和异步？同步：同步请求就是必须等待请求返回结果后我们才能继续往下操作。异步：请求发送后，无论是否返回了结果，我们都继续往下工作。jQuery中Ajax的格式：例如：...
JQuery中Ajax实现
10-28
JQuery 中 AJax 在页面、Servlet中实现实例
jQuery+ajax实现用户登录验证
10-14
主要为大家详细介绍了jQuery+ajax实现用户登录验证，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Jquery_ajax实现搜索
10-24
Jquery_ajax实现搜索
jQuery+Ajax实现无刷新操作
10-23
主要介绍了jQuery+Ajax实现无刷新操作，分享了采用Ashx+jQuery Ajax实现“无刷新登录”的例子，感兴趣的小伙伴们可以参考一下
PHP+jquery+ajax实现分页
12-28
本文实例为大家分享了jquery ajax实现分页的具体代码，供大家参考，具体内容如下 HTML <ul></ul> <div id=pagecount></div> CSS #list{width:680px; height:530px; margin:2px auto; position:relative} #...
控制html、css、js等静态资源的缓存时间的过滤器
轻云流火 chitry
07-07 1260
2014年9月8日 16:13:13 静态资源（Html、Css、Js等资源）：静态资源的缓存可以减轻服务器的负担，浏览器一般会默认缓存，为防止用户禁用缓存，在程序代码中进行对静态资源缓存的控制(包括缓存时间的空控制)。 //控制html、css、js等静态资源的缓存时间的过滤器    package cn.itcast.f
MVC + jQuery 三级联动
轻云流火 chitry
07-07 1232
​数据库： -- MySQL dump 10.10---- Host: localhost Database: test-- -------------------------------------------------------- Server version 5.0.18-nt /*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHAR
Ajax如何实现注册登陆验证
轻云流火 chitry
07-07 1160
jsp页面部分：通过JS进行客户端的表单验证，主要验证表单的格式、输入是否正确，使用这种方式可以避免在提交之后才返回一个简单的输入错误，在网速较慢的情况下更能提高效率。 page language="java" import="java.util.*" pageEncoding="UTF-8"%>@page language="java" contentType="text/html;
Servlet3.0的新规范
轻云流火 chitry
07-07 1056
Servlet3.0的新规范 与Servlet2.5的区别：是否具有web.xml配置文件 1、要求： jdk6.0+ Tomcat7.0+ 2、利用注解替代了web.xml配置文件 @WebServlet：配置Servlet的 @WebInitParam:配置Servlet、Filter的初始化参数 @WebFilter：配置过滤器
jQuery.Ajax 实现下载文件
05-30
通过 jQuery.Ajax 实现下载文件需要以下步骤： 1. 创建一个隐藏的 iframe 元素。 2. 将 iframe 的 src 属性设置为下载文件的链接。 3. 在 Ajax 的 success 回调函数中，将 iframe 的 src 属性设置为空字符串。 ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值