Ajax核心与JSON

作用

进行局部刷新

原理

介绍

传统方式与Ajax

使用

导入JQuery库，注意创建js文件夹，将js文件放入

<script src="js/jquery.min.js"></script>
<script type="text/javascript">
	$(function(){
		//用get的形式发送ajax请求（异步请求）
		$.get("TestJSON",function(data){
			console.log(data);
		});
	})
</script>

Json

JSON作用

JSON使用

1、导入jar包和Util工具

2.在Servlet里面写代码

response.setContentType("application/json;charset=UTF-8");//json的防止乱码
List<User> list=new ArrayList<User>();
list.add(new User("白宇","123"));
list.add(new User("黑宇","23"));
String json=JsonUtils.objectToJson(list);
PrintWriter pw=response.getWriter();
pw.write(json);
pw.flush();
pw.close();

效果：

msc小项目

利用ajax和json动态实现注册以及显示

dao

package dao;

import java.sql.ResultSet;
import java.util.ArrayList;
import java.util.List;

import pojo.News;
import util.JDBCUtil;

public class NewsDao {
	public List<News> selectAll() {
		List<News> l=new ArrayList<News>();
		String sql="select * from cms";
		ResultSet res=JDBCUtil.search(sql);
		try {
			while(res.next()) {
				int id=res.getInt("id");
				String title=res.getString("title");
				String desc=res.getString("desc");
				String content=res.getString("content");
				l.add(new News(id, title, desc, content));
			}
		} catch (Exception e) {
		}
		return l;
	}
	public int insertNews(News n) {
		String sql="insert into cms values('"+n.getId()+"','"+n.getTitle()+"','"+n.getDesc()+"','"+n.getContent()+"')";
		System.out.println(n.getDesc());
		int i=JDBCUtil.executeSQL(sql);
		return i;
	}
}

service

package service.serviceImp;

import java.util.List;

import dao.NewsDao;
import pojo.HttpResult;
import pojo.News;
import service.NewsService;
import util.JsonUtils;

public class NewsServiceImp implements NewsService{
	
	private NewsDao dao=new NewsDao();

	@Override
	public String getAll() {
		List<News> l=dao.selectAll();
		return JsonUtils.objectToJson(l);
	}

	@Override
	public String save(News news) {
		HttpResult hr=null;
		int i=dao.insertNews(news);
		if(i>0) {
			hr=new HttpResult(HttpResult.STATE_SUCCESS,"添加新闻成功");
		}
		else {
			hr=new HttpResult(HttpResult.STATE_FAILED,"添加新闻失败");
		}
		return JsonUtils.objectToJson(hr);
	}

}

pojo

package pojo;

public class HttpResult {
	public  final static int STATE_SUCCESS=200;//请求成功状态码；
	public  final static int STATE_FAILED=500;//请求成功状态码；
	
	private int code;//状态码
	private String msg;//响应信息
	public int getCode() {
		return code;
	}
	public void setCode(int code) {
		this.code = code;
	}
	public String getMsg() {
		return msg;
	}
	public void setMsg(String msg) {
		this.msg = msg;
	}
	public HttpResult(int code, String msg) {
		super();
		this.code = code;
		this.msg = msg;
	}
	public HttpResult() {
		super();
	}
	
}

package pojo;

public class News {
	private int id;
	private String title;
	private String desc;
	private String content;
	public News() {
	}
	public News(int id, String title, String desc, String content) {
		super();
		this.id = id;
		this.title = title;
		this.desc = desc;
		this.content = content;
	}
	public int getId() {
		return id;
	}
	public void setId(int id) {
		this.id = id;
	}
	public String getTitle() {
		return title;
	}
	public void setTitle(String title) {
		this.title = title;
	}
	public String getDesc() {
		return desc;
	}
	public void setDesc(String desc) {
		this.desc = desc;
	}
	public String getContent() {
		return content;
	}
	public void setContent(String content) {
		this.content = content;
	}

}

Controller

package controller;

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;

import pojo.News;
import service.NewsService;
import service.serviceImp.NewsServiceImp;

/**
 * Servlet implementation class AddController
 */
@WebServlet("/AddController")
public class AddController extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public AddController() {
        super();
        // TODO Auto-generated constructor stub
    }

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		response.setContentType("application/json;charset:UTF-8");
		PrintWriter pw=response.getWriter();
		String title=request.getParameter("title");
		String desc=request.getParameter("desc");
		NewsService ser=new NewsServiceImp();
		String s=ser.save(new News(0,title,desc,null));
		pw.print(s);
		pw.flush();
		pw.close();
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		doGet(request, response);
	}

}

package controller;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
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 pojo.News;
import pojo.User;
import service.serviceImp.NewsServiceImp;
import util.JsonUtils;

/**
 * Servlet implementation class LoginServlet
 */
@WebServlet("/LoginServlet")
public class SelectAll extends HttpServlet {
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public SelectAll() {
        super();
    }

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		response.setContentType("application/json;charset=UTF-8");
		NewsServiceImp ser=new NewsServiceImp();
		
		
		PrintWriter pw=response.getWriter();
		pw.write(ser.getAll());
		pw.flush();
		pw.close();
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		doGet(request, response);
	}

}

html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-3.6.0.js">
</script>
<script type="text/javascript">
$(function(){
	show=function(){
		$.get('LoginServlet',function(data){
			str="";
			for(i=0;i<data.length;i++){
				str+="<tr>";
				str+="<td>"+data[i].id+"</td>";
				str+="<td>"+data[i].title+"</td>";
				str+="<td>"+data[i].desc+"</td>";
				str+="</tr>";
			}
			$("#news").append(str);
		})
	}
	
	add=function(){
		titleParam=$("#title").val();
		descParam=$("#desc").val();
		$.post('AddController',
				{
					title : titleParam,
					desc:descParam
				},
				function(data){
					if(data.code=='200'){
						$(news).empty();
						show();
					}
					else{
						alert(data.msg);
					}
				}
		)
		
	}
	
	show();
});
</script>

</head>
<body>
	标题：<input type="text" id="title" onblur="doCheck()" name="title"><br><span id="msg" ></span><br>
	描述：<input type="text" id="desc"><br>
	<input type="button" value="注册" onclick="add()">
	<table id="news">
		<tr>
			<td>id</td>
			<td>标题</td>
			<td>描述</td>
		</tr>
	</table>
</body>
</html>