JSON表單提交（ajax異步刷新）

時間 2019-11-12

標籤 json 表單提交 ajax 異步刷新欄目 JavaScript 简体版

原文原文鏈接

JSON簡介：

JSON: JavaScript Object Notation(JavaScript 對象表示法)javascript

JSON 是存儲和交換文本信息的語法。相似 XML。css

JSON 比 XML 更小、更快，更易解析。html

JSON 文本格式在語法上與建立 JavaScript 對象的代碼相同。java

因爲這種類似性，無需解析器，JavaScript 程序可以使用內建的 eval() 函數，用 JSON 數據來生成原生的 JavaScript 對象。sql

1.新建一個實體類（student）.

public class Student {
	private int number;
	private String name;
	private String address;
	public Student(){}
	public Student(int number, String name, String address) {
		this.number = number;
		this.name = name;
		this.address = address;
	}
	public int getNumber() {
		return number;
	}
	public void setNumber(int number) {
		this.number = number;
	}
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	public String getAddress() {
		return address;
	}
	public void setAddress(String address) {
		this.address = address;
	};
	
	
}

2.新建Dao接口，給出兩個方法（向數據庫添加數據和取出數據）。

import java.util.List;

import org.json.JSONObject;



public interface Dao {
	public boolean insertDate(Student stu);
	public List<JSONObject> selectAll();
}

3.實現兩個方法

import java.sql.Connection;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import org.json.JSONObject;


import cn.com.yong.Dao.Dao;
import cn.com.yong.Util.DBConnection;

public class Student implements Dao {

	@Override
	public boolean insertDate(cn.com.yong.pro.Student stu) {
		Connection con=DBConnection.getDBConnectionInstance().getDBConnection();
		String sql="insert into student (number,name,address) value(?,?,?)";
		try {
			java.sql.PreparedStatement ps=con.prepareStatement(sql);
			ps.setInt(1, stu.getNumber());
			ps.setString(2, stu.getName());
			ps.setString(3, stu.getAddress());
			int i=ps.executeUpdate();
			if(i>0){
				return true;
			}
		} catch (SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		return false;
	}

	@Override
	public List<JSONObject> selectAll() {
		Connection con=DBConnection.getDBConnectionInstance().getDBConnection();
		List<JSONObject> list=new ArrayList<JSONObject>();
		String sql="select number,name,address from student";
		try {
			ResultSet rs=con.createStatement().executeQuery(sql);
			while(rs.next()){
				Map<String, Object> map=new HashMap<String, Object>();
				map.put("number", rs.getInt(1));
				map.put("name",rs.getString(2));
				map.put("address", rs.getString(3));
				list.add(new JSONObject(map));
				
			}
		} catch (SQLException e) {
			e.printStackTrace();
		}
		return list;
	}

}

4.新建用於表單提交的html文件（爲方便提交和獲取放在一塊）。

<!DOCTYPE html>
<html>
  <head>
    <title>show3.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
	<script type="text/javascript" src="js/student3.js"></script>
  </head>
  
  <body>
  	<!-- json表單註冊 -->>
  <form action="" method="post"></form>
  	編號：<input type="text" name="number" id="number"/><br>
  	姓名：<input type="text" name="name" id="name"/><br>
  	住址：<input type="text" name="address" id="address"/><br>
  	<input type="button" value="提交" onclick="insertStu()"/>
  </form>
  	
  	<!-- 讀取數據 -->
    <input type="button" onclick="insertStu()" value="獲取信息">
    <table border="1px" width="100%" align="center">
    	<thead><tr>
    		<th>學號</th>
    		<th>姓名</th>
    		<th>住址</th>
    	</tr></thead>
    	<tbody id="main" align="center">
    	
    	</tbody>
    </table>
  </body>
</html>

5.新建js文件

//瀏覽器協議
var xmlHttp;
function creatXMLHttpRequest(){
	if(window.XMLHttpRequest){
		xmlHttp=new XMLHttpRequest();
	}else if(window.ActiveXObject){
		
		xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
	}
}
//觸發函數
function insertStu(){
	//向瀏覽器發出異步請求
	creatXMLHttpRequest();
	//獲取表單數據
	var number=document.getElementById("number").value;
	var name=document.getElementById("name").value;
	var address=document.getElementById("address").value;
	
	//若將多個表單數據轉換成json格式，前提先把這些數據存儲到js的對象中
	var jsObject=new fromObject(number,name,address);
	
	//將對象轉換成JSON格式的數據
	json=JSON.stringify(jsObject);
	alert(json);
	//開啓對服務器端的鏈接
	var url="insertServlet";
	
	xmlHttp.open("post", url, true);
	//向服務器發送請求，將json格式的數據傳輸到servlet中
	xmlHttp.send(json);
	//回調匿名函數,接受服務器傳來的數據
	xmlHttp.onreadystatechange=function (){
		//判斷服務器響應狀態和請求狀態 200表示響應ok 4表示請求完成
		alert("1");
		if(xmlHttp.status==200 && xmlHttp.readyState==4){
			var msg=xmlHttp.responseText;
			//javascript可以使用內置的eval()函數生成javascript對象
			var stus=eval("("+msg+")");
			
			tbody=document.getElementById("main");
			for ( var i = 0; i < stus.length; i++) {
				var stu = stus[i];
				alert(stu.name);
				var tr=document.createElement("tr");
				
				var td1=document.createElement("td");
				td1.innerHTML=stu.number;
				//td1.appendChild(document.createTextNode(stu.number));
				tr.appendChild(td1);
				
				var td2=document.createElement("td");
				//td2.appendChild(document.createTextNode(stu.name));
				td2.innerHTML=stu.name;
				tr.appendChild(td2);
				
				var td3=document.createElement("td");
				//td3.appendChild(document.createTextNode(stu.address));
				td3.innerHTML=stu.address;
				tr.appendChild(td3);
				
				tbody.appendChild(tr);
			}
		}
	};
}
//至關於咱們的實體類，轉化js對象時調用
function fromObject(number,name,address){
	this.number=number;
	this.name=name;
	this.address=address;
}

6.Servlet

import java.io.BufferedReader;
import java.io.IOException;
import java.io.PrintWriter;
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 org.json.JSONArray;
import org.json.JSONException;
import org.json.JSONObject;

import cn.com.yong.ImplementDao.Student;
@WebServlet("/insertServlet")
public class insertServlet extends HttpServlet {

	private static final long serialVersionUID = 1L;

	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		doPost(request, response);
	}

	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		System.out.println("-----------");
		request.setCharacterEncoding("UTF-8");
		//建立帶有緩衝區的字符串對象jsn，用來存儲讀取到的json
		StringBuffer jsn=new StringBuffer();
		//用io流的方式讀取js頁面傳過來的對象json
		BufferedReader br=request.getReader();
		String line=null;
		while((line=br.readLine())!=null){
			jsn.append(line);
			
		}
		//拆分json表單中的數據
		try {
			JSONObject jo=new JSONObject(jsn.toString());
			int number=jo.getInt("number");
			String name=jo.getString("name");
			String address=jo.getString("address");
			System.out.println(number+name+address);
			cn.com.yong.pro.Student st=new cn.com.yong.pro.Student(number, name, address);
			Student stu=new Student();
			stu.insertDate(st);
		} catch (JSONException e) {
			e.printStackTrace();
		}
		System.out.println("-------------------------------------------------------");
		Student stu=new Student();
		
		List<JSONObject> list=stu.selectAll();
		//轉換成jeson格式
		JSONArray ja=new JSONArray(list);
		
		System.out.println(ja.toString());
		response.setCharacterEncoding("UTF-8");
		response.setContentType("text/html;charset=UTF-8");
		
		//以io流的方式返回
		PrintWriter pw=response.getWriter();
		pw.write(ja.toString());
		pw.flush();
		pw.close();
	}

}