ajax异步刷新完整的案例---JQuery实现

最新推荐文章于 2024-07-24 17:36:46 发布

grilla1024

最新推荐文章于 2024-07-24 17:36:46 发布

阅读量375

点赞数 1

分类专栏： javaWeb 文章标签： ajax servlet html java js

本文链接：https://blog.youkuaiyun.com/xingxing_LM/article/details/119748402

版权

javaWeb 专栏收录该内容

11 篇文章

订阅专栏

本文通过一个实例展示了如何使用AJAX实现无刷新页面加载和内容替换。用户点击编辑新闻或编辑主题按钮，页面会动态加载新闻列表或主题列表，同时提供了添加新闻和编辑主题的功能。所有操作都在不刷新页面的情况下完成，提高了用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一.演示效果

首先看一下实例
1.进入首页是空白的并没有信息显示。
在这里插入图片描述
2.点击编辑新闻，在不刷新不跳转的情况下加载信息到页面

3.点击编辑主题，同样是在不刷新，不跳转页面的情况下，实现内容的替换

二.代码实现

页面

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
	div{
		width: 55rem;
		margin: 0rem auto;
		border: 1px red solid;
	}
	#opreation{
		width: 70px;
		border: 1px red solid;
		float: left;
	}
	ul a{
		text-decoration: none;
		float: right;
	}
</style>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
	$(function(){
	//为编辑新闻链接添加一个单机事件
		$('#editorNews').click(function () {
			$('ul').empty();
			$.ajax({
				url:'newsIndexServlet',
				data:{
					opr:'editorNews'
				},
				success:function(rs){
					$.each(rs,function(index,news){
						var $li = $('<li></li>')
								.append($('<span></span>').html(news.title))
								.append($('<span></span>').html('&nbsp;&nbsp;&nbsp;&nbsp;'+'作者：'+ news.author))
								.append($('<span></span>').html('<a href="">修改</a>'))
								.append($('<span></span>').html('<a href="">删除|</a>'));
						$('ul').append($li);
					});
				}
			});
		});
		//为编辑主题添加一个单机事件
		$('#editorTopic').click(function () {
			$('ul').empty();
			$.ajax({
				url:'topicServlet',
				success:function(rs){
					$.each(rs,function(index,topic){
						var $li = $('<li></li>')
								.append($('<span></span>').html(topic.tname))
								.append($('<span></span>').html('<a href="">修改</a>'))
								.append($('<span></span>').html('<a href="">删除|</a>'));
						$('ul').append($li);
					});
				}
			});
		});

		$('#addNews').click(function () {
			$('ul').empty();
			var $form =$('<form action="newsIndexServlet?opr=addNews"></form>')
			var $li1 = $('<li></li>').html('标题：'+'<input type="text" name="title"/>');
			var $li2 = $('<li></li>').html('作者：'+'<input type="text" name="author"/>');
			var $li3 = $('<li></li>').html('<input type="submit" value="提交">')
			$form.append($li1,$li2,$li3);
			$('ul').append($form);

		})

	})
</script>
</head>
<body>
<div id="opreation">
<p><a href="javascript:void(0)" id="addNews">添加新闻</a></p>
<p><a href="javascript:void(0)" id="editorNews">编辑新闻</a></p>
<p><a href="javascript:void(0)" id="addTopic">添加主题</a></p>
<p><a href="javascript:void(0)" id="editorTopic">编辑主题</a></p>
</div>

<!--所加载的内容都在这个div中替换，来实现内容的更换-->
<div>
		<ul></ul>
	</div>
</body>
</html>

servlet内容响应
编辑新闻的响应，这是以json格式来信息传递的

package com.work.web.servlet;

import java.io.IOException;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.work.pojo.News;
import com.work.service.NewsService;
import com.work.service.impl.NewsServiceImpl;

@WebServlet("/newsIndexServlet")
public class NewsIndexServlet extends HttpServlet {

	private NewsService newsService = new NewsServiceImpl();
       
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		this.doPost(request, response);
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		String opr = null;
		opr = request.getParameter("opr");
		System.out.println(opr);
		if (opr.equals("editorNews")) {
			List<News> newsList = newsService.queryAll();
			StringBuffer sb = new StringBuffer();
			sb.append("[");
			int i = 0;
			for (News news : newsList) {
				sb.append("{");
				sb.append("\"title\":\"" + news.getNtitle() + "\",");
				sb.append("\"author\":\"" + news.getNauthor() + "\"");
				sb.append("}");
				i++;
				if (i != newsList.size()) {
					sb.append(",");
				}
			}
			sb.append("]");


			response.setContentType("application/json");
			response.setCharacterEncoding("UTF-8");
			response.getWriter().write(sb.toString());
			response.getWriter().flush();
			response.getWriter().close();
		}else if (opr.equals("addNews")){
			System.out.println(123);
		}
	}

}

编辑主题页面响应

package com.work.web.servlet;

import com.work.pojo.News;
import com.work.pojo.Topic;
import com.work.service.TopicService;
import com.work.service.impl.TopicServiceImpl;

import javax.servlet.*;
import javax.servlet.http.*;
import javax.servlet.annotation.*;
import java.io.IOException;
import java.util.List;

@WebServlet("/topicServlet")
public class TopicServlet extends HttpServlet {
    private TopicService topicService= new TopicServiceImpl();
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doPost(request,response);
    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        List<Topic> topicList = topicService.queryAllTopic();

        StringBuffer sb = new StringBuffer();
        sb.append("[");
        int i=0;
        for(Topic topic : topicList) {
            sb.append("{");
            sb.append("\"tname\":\""+topic.getTname()+"\"");
            sb.append("}");
            i++;
            if(i!=topicList.size()) {
                sb.append(",");
            }
        }
        sb.append("]");


        response.setContentType("application/json");
        response.setCharacterEncoding("UTF-8");
        response.getWriter().write(sb.toString());
        response.getWriter().flush();
        response.getWriter().close();
    }

    }