jquery ajax servlet
来源：互联网 发布：淘宝怎么解封永久封号 编辑：程序博客网 时间：2024/06/01 10:09
假设：1、你的页面在Web-Root下，内容为： <div id="showMsg"></div><input type="text" id="userName" />，所用编码为utf-82、你的servlet为： HelloWorldServlet.java 映射路径为 servlet/helloWorldServlet步骤：1、引入jquery-1.6.4.min.js2、编写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-82、请求路径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>
- jquery ajax servlet交互
- jquery ajax servlet
- servlet+jquery实现ajax
- jquery+Ajax+Servlet+json
- AJAX JQuery+Servlet
- JQuery Ajax Jsp Servlet组合
- servlet+jquery+ajax+json 例子
- jQuery+Ajax+servlet简单demo
- Jquery Ajax（jsp Servlet）
- servlet+jquery+ajax+json 例子
- servlet+jquery+ajax+json 例子
- Jsp servlet+jquery+ajax实现
- jquery ajax 提交给servlet乱码解决方案
- jquery ajax 无法接受servlet 数据原因
- Jquery ajax 访问Servlet 处理 Json 数据
- jquery.ajax和http servlet响应
- jQuery+ajax+servlet实现4级联动
- JQuery、JSON、Ajax在Servlet中的应用
- UVA12510 Collecting Coins
- 【HTML】Canvas(4)-进阶
- Linux软连接和硬链接
- get和post的区别与联系
- java API中提供的HashMap的常用方法
- jquery ajax servlet
- hibernate 4.O 注解 one-to-one 异常
- 编程实现恩格玛加密机(C++)
- poj 1836 Alignment (DP LIS)
- 深入理解磁盘文件系统之inode
- Google Hack技巧——不用暴力也可以取得密码
- Kali_linux_x64安装Compiz
- 在Fragment中使用百度地图
- hive 启动问题记录 及解决方法
