Javascript實現Ajax請求

原創

2020-02-21 04:19

前端代碼：

<!DOCTYPE html>
<html>
  <head>
    <title>index.html</title>
	
    <meta name="keywords" content="keyword1,keyword2,keyword3">
    <meta name="description" content="this is my page">
    <meta charset=UTF-8>
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

  </head>
  
  <body>
  	
    <h1>測試下Ajax在Java後臺中實現</h1>
   
 	   請輸入要查詢的id：<input name="id" id="key" />
	<button id="search">查詢</button>
	<p id="searchResult">查詢結果：</p>
	<hr/>
	<h3>新增學生表單</h3>
	學生 id   ：
	<input type="text" id="idlala" /><br/>
	學生姓名：<input type="text" id="name" /><br/>
	學生學號：<input type="text" id="rollno" /><br/>
	學生性別：<input type="text" id="gender" /><br/>
	<button id="add">確認</button><br/>
	<p id="addResult">更新結果：</p>
	<script>
		document.getElementById("search").onclick = function(){
			var request = new XMLHttpRequest();
			request.open("get","servlet/SearchServlet?id="+document.getElementById("key").value);
			request.send();
			request.onreadystatechange = function(){
				if( request.readyState === 4 && request.status === 200 ){
					//var data = JSON.parse(request.responseText);
					//alert(data)
					document.getElementById("searchResult").innerHTML ="查詢結果：" +request.responseText;
				}else{
					document.getElementById("searchResult").innerHTML =request.readyState +"error"+request.status;
				}
			}
			
		}
		document.getElementById("add").onclick = function(){
			var request = new XMLHttpRequest();
			request.open("post","servlet/AddServlet");
			request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
			var data ="idlala="+document.getElementById("idlala").value
			+ "&name="+document.getElementById("name").value
			+ "&rollno="+document.getElementById("rollno").value
			+ "&gender="+document.getElementById("gender").value;
			alert(data);
			request.send(data);
			request.onreadystatechange = function(){
				if(request.status === 200 && request.readyState === 4){
					document.getElementById("addResult").innerHTML = request.responseText;
				}else{
					document.getElementById("addResult").innerHTML = "更新失敗！"+request.status;
				}
			}
		}
	</script>
  </body>
</html>

後臺代碼(Servlet 實現)：

package com.etoak.servlet;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.HashMap;
import java.util.Map;

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

import net.sf.json.JSONArray;
import net.sf.json.JSONObject;

import com.etoak.dao.StudentDao;
import com.etoak.pojo.Student;

public class SearchServlet extends HttpServlet {

	/**
	 * The doGet method of the servlet. <br>
	 *
	 * This method is called when a form has its tag value method equals to get.
	 * 
	 * @param request the request send by the client to the server
	 * @param response the response send by the server to the client
	 * @throws ServletException if an error occurred
	 * @throws IOException if an error occurred
	 */
	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {

		response.setContentType("text/javascript;charset=utf-8");
		PrintWriter out = response.getWriter();
		int id  = Integer.parseInt(request.getParameter("id"));
		Student s = StudentDao.queryById(id);
		// 轉化成json發送出去
		//JSONObject jsonobj = new JSONObject();
		//jsonobj.put("id", s.getId());
		//jsonobj.put("name", s.getName());
		//jsonobj.put("gender",s.getGender());
		//jsonobj.put("rollno",s.getNumber());
		//System.out.println(jsonobj);
		out.println(s);
	}

}

package com.etoak.servlet;

import java.io.IOException;
import java.io.PrintWriter;

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

import com.etoak.dao.StudentDao;
import com.etoak.pojo.Student;

public class AddServlet extends HttpServlet {

	/**
	 * The doPost method of the servlet. <br>
	 *
	 * This method is called when a form has its tag value method equals to post.
	 * 
	 * @param request the request send by the client to the server
	 * @param response the response send by the server to the client
	 * @throws ServletException if an error occurred
	 * @throws IOException if an error occurred
	 */
	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {

		response.setContentType("text/plain;charset=utf-8");
		PrintWriter out = response.getWriter();
		String name = request.getParameter("name");
		String rollno = request.getParameter("rollno");
		System.out.println(request.getParameter("idlala"));
		Integer id = Integer.parseInt(request.getParameter("idlala"));
		char gender = request.getParameter("gender").charAt(0);
		Student s = new Student(id,name,rollno,gender);
		boolean flag = StudentDao.addStudent(s);
		if(flag)
			out.println("添加成功"+s);
	}

}