ajax+json实现局部刷新和自动补全+局部刷新分页模糊查代码

原创

于 2022-04-29 16:35:01 发布 · 420 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ajax #json

本文介绍了使用Ajax和Json技术进行网页的局部刷新，以提高用户体验和带宽利用率。内容包括搜索自动补全功能的实现以及局部刷新分页模糊查询的代码示例。

什么是局部刷新？

局部刷新就是不刷新整个页面，只刷新局部

局部刷新的好处

只更新部分页面，有效利用带宽，提高用户体验

$.ajax()

$.post()

判断用户名是否可用

<%@ 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="js/jquery-3.3.1.js"></script>

<script type="text/javascript">

$(function() {

//给文本框添加失焦

$("#sname").blur(function(){

//获取文本框的值

var name=$("#sname").val();

//一、$ajax()

/* $.ajax({

url:"vname.do",//请求地址（servlet）

data:{sname:name},//"sname="+name+"&spwd="+spwd,

type:"post",//请求方式

dataType:"text",//预期服务器可能返回的数据类型

success:function(data){//成功的回调函数

//alert(data);//data是服务器返回的响应

$("#aa").html(data);

},

error:function(){//失败的回调函数

alert("有误");

}

}); */

//二、$.post()/$.get() url,data,success[ ,dataType]

$.post("vname.do",{sname:name},function(data){

$("#aa").html(data);

},"text")

});

})



</script>

</head>

<body>

<h2>使用jQuery的ajax即时判断用户名是否可用</h2>

<form>

<input id="sname"><span style="color: red" id="aa"></span>

<hr>

<input>

</form>

</body>

</html>

package com.zking.servlet;

import java.io.IOException;

import java.io.PrintWriter;

import javax.servlet.ServletException;

import javax.servlet.annotatio