jquery ajax servlet

最新推荐文章于 2023-05-29 14:56:58 发布
最新推荐文章于 2023-05-29 14:56:58 发布
阅读量466 收藏
点赞数
文章标签： java jquery jquery ajax 
假设：
1、你的页面在Web-Root下，内容为：  <div id="showMsg"></div><input type="text" id="userName" />，所用编码为utf-8
2、你的servlet为：  HelloWorldServlet.java  映射路径为   servlet/helloWorldServlet
步骤：
1、引入jquery-1.6.4.min.js
2、编写id为userName的输入框的点击触发函数：
      $("#userName").keyup(function(){
            $.ajax({
                  type: "post",
                  url: "servlet/helloWorldServlet?userName="+$(this).val(),
                  dataType: "json",
                  success: function(data){
                        $("#showMsg").html(data.msg);//修改id为showMsg标签的html
                  }, error: function(){
                        alert("请求出错");
                  }
            })
      })
3、后台处理接收到的内容：
      request.setCharactorEncoding("utf-8");
      String userName = request.getParameter("userName");
      response.setCharactorEncoding("utf-8");
      PringWriter out = response.getWriter();
      out.print("{\"msg\":\"你好~~"+userName+"!\"}");

注意事项：
1、这里的编码统一为utf-8
2、请求路径servlet/helloWorldServlet为相对路径，因此你的页面必须在项目的Web-Root下（也就是默认的web文件夹下，名字可能因项目配置不同而改变）

网上的 Jquery ajax Demo 大多都是基于php 
很少 有java的 今天就把自己的Demo贴出来 和大家共同学习 
现在就  Jquery ajax 的 $.ajax(),$.post(),$.get(); 

首先是  服务端的Servlet 演示这三个函数的用法对都是用的同一个 服务端 

 package com.june.servlet;   
  
import javax.servlet.http.HttpServlet;   
import javax.servlet.http.HttpServletResponse;   
import javax.servlet.http.HttpServletRequest;   
import java.io.IOException;   
import java.io.PrintWriter;   
import javax.servlet.ServletException;   
  
public class jqueryAjaxServer extends HttpServlet {   
     public jqueryAjaxServer(){   
         super();   
     }   
     public void doGet(HttpServletRequest request,HttpServletResponse response)   
     throws IOException ,ServletException {   
         response.setContentType("text/html;charset=utf-8");   
         PrintWriter out=response.getWriter();   
         String account=request.getParameter("account");   
         if("iamcrzay".equals(account)){   
             out.print("Sorry,the user is exist");   
         }   
         else{   
             out.print("Congratulation,this accont you can use!!!!");   
         }   
         out.close();   
     }   
     public void doPost(HttpServletRequest request,HttpServletResponse response)   
     throws IOException ,ServletException {   
         this.doGet(request, response);   
     }   
}  

下面是WEB.XML 
Xml代码  
<?xml version="1.0" encoding="UTF-8"?>  
<web-app version="2.5"    
    xmlns="http://java.sun.com/xml/ns/javaee"    
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"    
    xsi:schemaLocation="http://java.sun.com/xml/ns/javaee    
    http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">  
    <servlet>  
       <servlet-name>jqueryAjaxServer</servlet-name>  
       <servlet-class>com.june.servlet.jqueryAjaxServer</servlet-class>  
    </servlet>  
        <servlet-mapping>  
       <servlet-name>jqueryAjaxServer</servlet-name>  
       <url-pattern>/jqueryAjax</url-pattern>  
    </servlet-mapping>  
  <welcome-file-list>  
    <welcome-file>index.jsp</welcome-file>  
  </welcome-file-list>  
</web-app>  
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5" 
 xmlns="http://java.sun.com/xml/ns/javaee" 
 xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
 xsi:schemaLocation="http://java.sun.com/xml/ns/javaee 
 http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
 <servlet>
    <servlet-name>jqueryAjaxServer</servlet-name>
    <servlet-class>com.june.servlet.jqueryAjaxServer</servlet-class>
 </servlet>
        <servlet-mapping>
    <servlet-name>jqueryAjaxServer</servlet-name>
    <url-pattern>/jqueryAjax</url-pattern>
 </servlet-mapping>
  <welcome-file-list>
    <welcome-file>index.jsp</welcome-file>
  </welcome-file-list>
</web-app>
 
下面是Jsp页面 
第一个是 jqueryAjax.jsp  本页使用的是$.ajax() 
Html代码  
<%@ page language="java"  pageEncoding="utf-8"%>  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
<html>  
  <head>     
    <title>jquery ajax</title>    
    <meta http-equiv="pragma" content="no-cache">  
    <meta http-equiv="cache-control" content="no-cache">  
    <meta http-equiv="expires" content="0">       
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">  
    <meta http-equiv="description" content="This is my page">  
    <script src="js/jquery-1.2.6.js" type="text/javascript"></script>  
    <script language="javascript">  
         $(function(){   
               $('.sumbit').click(function(){   
               if($('#account').val().length==0){   
                   $('.hint').text("用户名不能位空").css({"background-color":"green"});    
               }   
               else{   
               $.ajax({   
                 url:'jqueryAjax',   
                 data:{account:$('#account').val()},   
                 error:function(){   
                 alert("error occured!!!");   
                 },   
                 success:function(data){   
                  $('body').append("<div>"+data+"</div>").css("color","red");   
         
                 }   
                    
               });}   
               });   
               });   
                    
          
              
    </script>  
  </head>  
     
  <body>  
                <h3 align="center">jquery AjaX</h3>  
                <hr>  
                <label>请输入用户名 ：</label>  
                <input id="account" name="account" type="text">  
                <input class="sumbit" type="button" value="检测">  
                <div class="hint">  
                </div>  
  </body>  
</html>  
<%@ page language="java"  pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>  
    <title>jquery ajax</title> 
 <meta http-equiv="pragma" content="no-cache">
 <meta http-equiv="cache-control" content="no-cache">
 <meta http-equiv="expires" content="0">    
 <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
 <meta http-equiv="description" content="This is my page">
 <script src="js/jquery-1.2.6.js" type="text/javascript"></script>
 <script language="javascript">
      $(function(){
            $('.sumbit').click(function(){
            if($('#account').val().length==0){
                $('.hint').text("用户名不能位空").css({"background-color":"green"}); 
            }
            else{
            $.ajax({
              url:'jqueryAjax',
              data:{account:$('#account').val()},
              error:function(){
              alert("error occured!!!");
              },
              success:function(data){
               $('body').append("<div>"+data+"</div>").css("color","red");
   
              }
              
            });}
            });
            });
                 
    
        
 </script>
  </head>
  
  <body>
                <h3 align="center">jquery AjaX</h3>
                <hr>
                <label>请输入用户名 ：</label>
                <input id="account" name="account" type="text">
                <input class="sumbit" type="button" value="检测">
                <div class="hint">
                </div>
  </body>
</html>
 
第二个用的是  $.post() 
Html代码  
<%@ page language="java"  pageEncoding="utf-8"%>  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
<html>  
  <head>     
    <title>jquery ajax</title>    
    <meta http-equiv="pragma" content="no-cache">  
    <meta http-equiv="cache-control" content="no-cache">  
    <meta http-equiv="expires" content="0">       
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">  
    <meta http-equiv="description" content="This is my page">  
    <script src="js/jquery-1.2.6.js" type="text/javascript"></script>  
    <script language="javascript">  
         $(function(){   
             $('.sumbit').click(   
              function(){   
                if($('#account').val().length==0){   
                    $('.hint').text("The account is cant't be null").css({"color":"red","background-color":"yellow"});   
                }   
                else{   
                $.post("jqueryAjax","account="+$('#account').val(),function(data){   
                   $('.hint').text(data).css({"color":"red","background-color":"yellow"});   
                })   
                }   
             });   
         });              
    </script>  
  </head>  
     
  <body>  
                <h3 align="center">jquery Ajax</h3>  
                <hr>  
                <label>请输入用户名 ：</label>  
                <input id="account" name="account" type="text">  
                <input class="sumbit" type="button" value="检测">  
                <div class="hint">  
                </div>  
  </body>  
</html>  
<%@ page language="java"  pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>  
    <title>jquery ajax</title> 
 <meta http-equiv="pragma" content="no-cache">
 <meta http-equiv="cache-control" content="no-cache">
 <meta http-equiv="expires" content="0">    
 <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
 <meta http-equiv="description" content="This is my page">
 <script src="js/jquery-1.2.6.js" type="text/javascript"></script>
 <script language="javascript">
      $(function(){
          $('.sumbit').click(
           function(){
             if($('#account').val().length==0){
                 $('.hint').text("The account is cant't be null").css({"color":"red","background-color":"yellow"});
             }
             else{
             $.post("jqueryAjax","account="+$('#account').val(),function(data){
                $('.hint').text(data).css({"color":"red","background-color":"yellow"});
             })
             }
          });
      });        
 </script>
  </head>
  
  <body>
                <h3 align="center">jquery Ajax</h3>
                <hr>
                <label>请输入用户名 ：</label>
                <input id="account" name="account" type="text">
                <input class="sumbit" type="button" value="检测">
                <div class="hint">
                </div>
  </body>
</html>
 
第三个是用的$.get() 
Html代码  
<%@ page  pageEncoding="utf-8"%>  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
<html>  
  <head>      
    <title>jquery get</title>  
       
    <meta http-equiv="pragma" content="no-cache">  
    <meta http-equiv="cache-control" content="no-cache">  
    <meta http-equiv="expires" content="0">       
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">  
    <meta http-equiv="description" content="This is my page">  
    <script src="js/jquery-1.2.6.js" type="text/javascript"></script>  
    <script type="text/javascript">  
         $(function(){   
                $('.sumbit').click(function(){   
                      if($('#account').val().length==0){   
                         $('.hint').html("用户名不能位空！！！").css({"color":"#ffoo11","background":"blue"});   
                      }   
                      else{   
                          $.get("jqueryAjax","account="+$('#account').val(),   
                               function(data){   
                                $('.hint').html(data).css({"color":"#ffoo11","background":"green"});   
                          });   
                      }   
                });   
         });   
    </script>  
  
  </head>  
     
  <body>  
        <h3 align="center">jquery AjaX</h3>  
                <hr>  
                <label>请输入用户名 ：</label>  
                <input id="account" name="account" type="text">  
                <input class="sumbit" type="button" value="检测">  
                <div class="hint">  
                </div>  
  </body>  
</html>  
<%@ page  pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>   
    <title>jquery get</title>
    
 <meta http-equiv="pragma" content="no-cache">
 <meta http-equiv="cache-control" content="no-cache">
 <meta http-equiv="expires" content="0">    
 <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
 <meta http-equiv="description" content="This is my page">
 <script src="js/jquery-1.2.6.js" type="text/javascript"></script>
 <script type="text/javascript">
      $(function(){
             $('.sumbit').click(function(){
                   if($('#account').val().length==0){
                      $('.hint').html("用户名不能位空！！！").css({"color":"#ffoo11","background":"blue"});
                   }
                   else{
                       $.get("jqueryAjax","account="+$('#account').val(),
                            function(data){
                             $('.hint').html(data).css({"color":"#ffoo11","background":"green"});
                       });
                   }
             });
      });
 </script>
  </head>
  
  <body>
        <h3 align="center">jquery AjaX</h3>
                <hr>
                <label>请输入用户名 ：</label>
                <input id="account" name="account" type="text">
                <input class="sumbit" type="button" value="检测">
                <div class="hint">
                </div>
  </body>
</html>
comil4444
关注
ajax+servlet+jquery+jsp示例
04-06
从后台取出json数据，然后以table的形式展出。包含序号，名字，年龄。如1，张三，22。一共两行数据。
jQuery Ajax传值到Servlet出现乱码问题的解决方法
11-24
在开发Web应用时，我们经常会遇到前端与后端交互的问题，特别是使用jQuery的Ajax与Servlet进行数据通信时，乱码问题是一个常见的困扰。本文将详细解释如何解决jQuery Ajax向Servlet传递参数时出现的乱码问题。 首先...
jquery ajax 与servlet
jhhuang4836的专栏
02-24 182
在servlet里面，定义了ajax要执行的内容，最后返回给ajax的调用处。但是值得注意的是，在servlet里面，定义mime类型的时注意： @Override protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { ...
jquery ajax和servlet,浅谈ajax在jquery中的请求和servlet中的响应
weixin_29543939的博客
08-05 243
在jsp中，首先，你需要导入jquery的架包：获取可返回站点的根路径：String path = request.getContextPath();%>在jquery中写ajax请求：$(function(){$(".B").click(function(){$.ajax({type: "GET",//对应servlet中的方法url: "" + "/queryEvaluateByuser...
jQuery发送Ajax请求Servlet
Huathy的博客
12-16 789
jQuery发送Ajax请求ServletJSP网页代码jQuery发送Ajax请求Servlet接受请求接口接口实现类 JSP网页代码 <div class="line"> <span class="colDark">用户名：</span><input name="username" type="text"> <span class="c...
jquery ajax servlet交互
sunshine901106的专栏
09-19 1598
jquery ajax servlet交互，所需的java包 jackson-all-1.9.2.jar、json-lib-2.4.jar、commons-lang-2.0.jar、ezmorph-1.0.6.jar、commons-beanutils.jar、commons-collections-3.2.1.jar...  两个js    jquery1.4.js、json2.js 如何
jquery ajax servlet json简单demo
03-06
这个简单的demo是一个很好的学习资源，帮助初学者理解如何使用jQuery的AJAX功能与后端Servlet交互，以及如何使用JSON进行数据交换。通过实践这个demo，你可以更深入地了解这些技术的实际应用。同时，它也展示了Web...
jquery请求servlet实现ajax异步请求的示例
10-19
1. $.ajax()方法：这是jquery中最为通用的ajax方法，可以处理所有类型的ajax请求。$.ajax()方法的参数包括url（请求地址）, type（请求类型，如GET或POST）, dataType（预期服务器返回的数据类型）, data（发送到...
jquery Ajax实现Select动态添加数据
01-19
jquery Ajax实现Select动态添加数据，具体内容如下 1.背景  最近在工作中，遇到了一个关于select的问题。一般情况下，select下拉框中的数据都是固定的或者直接在jsp中读取列表值显示。但是，这次要实现select与别的...
jquery ajax 异步servlet
anyincc125的博客
12-11 125
ajax的get方式 $.ajax({ type: "Get", url: "/xiangmu/user/preparPayWeixin/result/"+out_trade_no+".action", contentType: "application/json; charset=utf-8", ...
servlet+jquery实现ajax
光华小丸子
04-25 1071
项目结构： index.html： ajax实例 $(function(){ $("#userName").blur(function(){ var userName = $("#userName").val(); i
jQuery ajax + java servlet踩坑
weixin_39610830的博客
03-25 295
首先，如果一直回调error的方法，可以先看看错误信息 error: function (XMLHttpRequest, textStatus, errorThrown) { // 状态码 console.log(XMLHttpRequest.status); ...
前端jQuery AJAX和后端Servlet技术完成异步登录注册程序
最新发布
qq_54992178的博客
05-29 2941
使用div+css按图2进行布局，点击“注册”按钮发起AJAX提交注册，由于需要上传文件，所以需要，提交之前先做数据验证，确保用户名、密码、确认密码必填， Email如果填写了，要符合Email格式（由于同时要提交图片，此处须使用DataForm进行提交）。（1）创建网页，创建网页文件login.html或使用课堂练习3的login.jsp，对应的servlet接口文件verify.java或使用课堂练习3的verify.java，以及接口消息所使用的消息类message.java，
当使用servlet输出json时，浏览器端jquery的ajax遇到parse error的问题
陈宝峰的专栏
06-02 1962
在使用jquery的ajax进行请求发送并由服务端的servlet返回json格式的数据内容时，如果输出内容没有正确设置，会遇到客户端浏览器报告parse error的问题，这个问题的解决只需要注意以下两点： 第一，在servlet输出json格式的内容是请在response.getWriter()之前执行response.setContentType("application/json");
servlet+ajax+jquery进行数据交互（前后端利用json(jackson)+ajax交互
weixin_43821876的博客
05-19 1221
json json解析器： 现在用的比较多的是jsonlib,gson,fastjson(阿里巴巴)，jackson是springMVC内置的解析器， 今天使用的是jackson的包 1、java对象转换成json 1、导入json的jar包 这是用maven管理的包 <dependency> <groupId>com.fast...
动态wed 简单实现 前端 jquery,ajax 连接 后端 servlet ，没有连 数据库
qq_57381370的博客
03-09 1001
html 和 js : 先引入jquery： <script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script> 有了jQuery，才能用ajax 进行数据的提交。 ----------- 两个输入框，定义 id 选择器 onclick 点击事件执行 <script> 标签中的 get() 方法; 获取...
jquery的ajax请求servlet与响应
www_xue_xi的博客
11-29 1158
jquery的ajax请求servlet与serverlet响应数据类型json格式化
验证码刷新与提交示例（Jsp+Servlet+jquery+ajax）
iamzhuwh
06-20 2059
验证码刷新与提交示例（Jsp+Servlet+jquery+ajax）环境 1、前端jsp 2、服务器tomcat 3、服务端servlet 4、使用tomcat发布项目的相对路径（你写代码的工程目录和发布到tomcat可以访问的目录是不一样的） verify.jsp<%@ page language="java" contentType="text/html; charset=utf-8" pag
jQuery Ajax与Servlet深度整合教程
本文将深入解析jQuery的Ajax功能，特别是通过`$.ajax()`和两个常用封装方法——`load()`和`get()`。 首先，`$.ajax()`方法是jQuery提供的基础Ajax请求函数，它提供了一种灵活的方式来发送HTTP请求。以下是一些关键...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值