JQuery Ajax局部刷新功能

直接通过一个案例来说明一下Ajax和JQuery的基本用法吧，用户注册时，判断当前用户名是否可用，通过弹窗的形式来通知用户，如果用户起的名字为skh则不允许注册，否则可以，就不加数据库来测试了，太麻烦.....

Servlet：

package cn.skh.servlet;import java.io.IOException;
import java.io.PrintWriter;import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;/*** Servlet implementation class AjaxServlet*/
@WebServlet("/AjaxServlet")
public class AjaxServlet extends HttpServlet {private static final long serialVersionUID = 1L;/*** @see HttpServlet#HttpServlet()*/public AjaxServlet() {super();// TODO Auto-generated constructor stub}/*** @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)*/protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {String test = request.getParameter("test");PrintWriter out = response.getWriter();if("skh".equals(test) ) {out.print("false");}else {out.print("true");}}/*** @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)*/protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {// TODO Auto-generated method stubdoGet(request, response);}}

前端JSP：

tips：需要注意的就是$.ajax的格式，以及所需要的参数。

<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="scripts/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){//给账号文本框绑定失去焦点的事件$("#test").blur(function(){var test=$("#test").val();var msg1={"test":test,};$.ajax({url:"AjaxServlet",//设置服务器地址，即为servlet配置的url-patterntype:"post",//提交的方式data:msg1,//提交到服务器的数据，多个值以逗号分割开datatype:"text",success:function(msg){//回调函数，msg是返回的数据if(msg=="false"){ alert("flase");}else{ alert("true");}}}); });
});
</script>
</head>
<body>用户名：<input id="test" type="text" maxlength="20"><br>密码：<input type="text">
</body>
</html>

结果是没问题的，感兴趣的可以自己去验证一下，这里就不在贴图了。。。。

JQuery Ajax局部刷新功能相关推荐

js ajax局部替换,纯JS实现AJAX局部刷新功能
AJAX即"Asynchronous Javascript And XML"(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术. AJAX = 异步 J ...
struts2 jquery ajax 局部刷新遇到的各种问题
我们的网站一开始都是由前台提交表单到action,每次一个小操作整个页面都会刷新,影响用户体验,这次由我实现部分功能的局部刷新,但是初学ajax遇到不少问题 1.我们在struts.xml外扩展了一个 ...
AJAX局部刷新功能实现
简介 AJAX 是与浏览器与服务器交换数据的技术,它在不重载全部页面的情况下,实现了前后台数据交互,可以选择操作dom对页面进行更新 jQuery 提供多个与 AJAX 有关的方法. 通过 jQuer ...
jQuery ajax局部刷新
1.调用方式 <script type="text/javascript" src="js/jquery-1.7.1.min.js"></sc ...
js 只刷新ajax,JS实现AJAX局部刷新（附代码）
这次给大家带来JS实现AJAX局部刷新(附代码),JS实现AJAX局部刷新的注意事项有哪些,下面就是实战案例,一起来看一下. AJAX即"Asynchronous Javascript An ...
ajax提交成功后局部刷新 jq_JQuery ajax局部刷新实例
在我们开发的时候,我们回时常用到javascript实现页面局部刷新,本文我们就和大家分享JQuery ajax局部刷新,具有一定的参考价值,感兴趣的小伙伴们可以参考一下案例: 描述: 1. 点击登 ...
ajax 局部页面替换innerhtml,ajax jquery 页面局部刷新的不同实现代码
以下示例是学习使用XMLHttpRequest时,实现的页面局部刷新的代码,分享下. 复制代码代码示例: 页面局部刷新功能_www.jbxue.com window.onload = functio ...
asp ajax局部刷新,ASP.Net用jQuery ajax实现页面局部刷新
刚开始的时候使用asp的updatepanel控件实现局部刷新,而且在本地运行正确,但是部署到服务器上就变成整个页面全部刷新了.服务器用的是Windows server2000,本地机子上用的是win ...
ajax ssm 页面跳转_ssm项目实战实现页面的局部刷新功能
好的各位小伙伴继续学习知识了 ajax_json 咱们之前用SSM三大框架整合,实现了用户的增删改查功能.今天主要是将之前实现的用户功能,修改成 ajax 的方式,实现页面的局部刷新功能. 首先来实 ...

JQuery Ajax局部刷新功能

Servlet：

前端JSP：

JQuery Ajax局部刷新功能相关推荐

最新文章

热门文章