純html的Ajax：

阿新 • • 發佈：2018-12-04

使用了SpringMVC框架的純html的Ajax：
增刪改查
使用Ajax的目的就是不想使用jsp的任何東西。至於是不是增刪改查四個全用Ajax，實際上並不重要。純html使用Ajax最重要的地方就在於全查，得到所有資料後會在Ajax的回撥函式中使用JQuery中的each來遍歷，這樣就可以替代在jsp頁面中可以使用標籤遍歷的優勢了。

這是一個html頁面。不是jsp頁面。

在這裡插入程式碼片
<!DOCTYPE html>
<html>
<head>

<meta charset="UTF-8">
 
<script src="/My_SpringMVC-181122/js/jquery-3.2.1.min.js"></script> 
 

<title>SpringMVC框架中的純html的Ajax增刪改查</title>

 
 
</head>
<body>

          <section>
			          <form action="/My_SpringMVC-181122/createAllUser" method="post"   id="form1"> 
			          			<input type="text" name="username"/>姓名
			          			<input type="text" name="userage"/> 年齡
			          			<input type="radio" name="usergender" value="男" checked="checked"/>男
			  					<input type="radio" name="usergender" value="女"/>女
			          <button type="button" id="btn2">新增</button>
			          <button form="form2"   type="submit"  id="btn3">批量刪除</button>
					  </form>
          </section>
         
         
          <section>
    	  			<form id="form2"  method="post"  action="/My_SpringMVC-181122/deleteUsers">
    	  			          <input type="hidden" id="hid01" name="user_id"/>
					          <table border="1">
					                  <thead>
					                  			<tr>
					                  					<th><input type="checkbox"  /></th><th>姓名</th><th>年齡</th><th>性別</th><th>操作</th>
					                  			</tr>
					                  </thead>
					                  <tbody  id="tbodyId">
					                  </tbody>
					          </table>
					</form>
		   </section>
		
		
</body>


<script>
				function update01(oA  ,  user_id){  //直接在當前頁面上 進行修改
					$("#hid01").val(user_id);
					var oTd2 = $(oA).parent().parent().children().eq(1);
					var oTd3 = $(oA).parent().parent().children().eq(2);
					var oTd4 = $(oA).parent().parent().children().eq(3);
					var oTd5 = $(oA).parent().parent().children().eq(4);
					oTd2.html("<input type='text' name='username' class='ipt1' value='"+oTd2.text()+"'/>");
					oTd3.html("<input type='text' name='userage' class='ipt1' value='"+oTd3.text()+"'/>");
					if(oTd4.text() == "男")
						oTd4.html("<input type='radio' name='usergender' value='男' checked='checked'/>男&nbsp;<input type='radio' name='usergender' value='女'/>女");
					else
						oTd4.html("<input type='radio' name='usergender' value='男'/>男&nbsp;<input type='radio' name='usergender' value='女' checked='checked'/>女");
					oTd5.html("<a href='javascript:;' onclick='update02();'>確定</a>");
					
				}
				function update02(){    //配合上面的修改方法一起用的
					var oForm = $("#form2");
					oForm.attr("action","/My_SpringMVC-181122/updateUser");
					oForm.submit();
				}

</script>



<script>
       $(function(){//JQuery形式 的頁面載入函式
    	    	$.ajax({//當這個頁面一載入就會執行這個全查的Ajax
    				url:"/My_SpringMVC-181122/retrieveAllUser",
    				type:"post",
    				success:function(returnValue){//我使用了springMVC框架所支援的json的方式，非常方便
    					    console.log(returnValue);//在瀏覽器的控制檯上輸出。可按下F12檢視
    						$.each(returnValue,function(i,v){
    								var oTbody=$("#tbodyId");
    								var oTd0=$("<td><input type='checkbox' name='ids' id='selected-all' value='"+v.user_id+"'></td>");
 		  							var oTd1=$("<td>"+v.username+"</td>");
 		  							var oTd2=$("<td>"+v.userage+"</td>");
 		  							var oTd3=$("<td>"+v.usergender+"</td>");
 		  							var oTd4=$('<td><a href="javascript:;" onclick="update01(this,'+(v.user_id)+')" >編輯</a></td>');
 		  							var oTr2=$("<tr></tr>");
 		  							oTd0.appendTo(oTr2);   //把各列新增到一行中
 		  							oTd1.appendTo(oTr2);
 		  							oTd2.appendTo(oTr2);
 		  							oTd3.appendTo(oTr2);
 		  							oTd4.appendTo(oTr2);
 		  							oTr2.appendTo(oTbody);
 		  							
    						});
    				}
    	    });
       
    	     
    	    	
       
          $("#btn2").click(function(){    //為新增按鈕掛上事件
        	    $("#form1").submit();
          });
       });

</script>

</html>

在這裡插入圖片描述

下面的是實體類
package com.oracle.pojo;

import java.io.Serializable;

@SuppressWarnings("serial")
public class UserPojo implements Serializable {
	private Integer user_id;
	private String username;
	private Integer  userage;
	private String usergender;
	public Integer getUser_id() {
		return user_id;
	}
	public void setUser_id(Integer user_id) {
		this.user_id = user_id;
	}
	public String getUsername() {
		return username;
	}
	public void setUsername(String username) {
		this.username = username;
	}
	public Integer getUserage() {
		return userage;
	}
	public void setUserage(Integer userage) {
		this.userage = userage;
	}
	public String getUsergender() {
		return usergender;
	}
	public void setUsergender(String usergender) {
		this.usergender = usergender;
	}
	public UserPojo() {
		super();
		// TODO Auto-generated constructor stub
	}
	public UserPojo(Integer user_id, String username, Integer userage, String usergender) {
		super();
		this.user_id = user_id;
		this.username = username;
		this.userage = userage;
		this.usergender = usergender;
	}
	@Override
	public String toString() {
		return "UserPojo [user_id=" + user_id + ", username=" + username + ", userage=" + userage + ", usergender="
				+ usergender + "]";
	}
	 
}

使用SpringMVC的框架所需要配置的配置檔案：（放在資原始檔夾下）
在這裡插入圖片描述

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns:p="http://www.springframework.org/schema/p"
xmlns:context="http://www.springframework.org/schema/context"
xmlns:mvc="http://www.springframework.org/schema/mvc"
xsi:schemaLocation="http://www.springframework.org/schema/beans
http://www.springframework.org/schema/beans/spring-beans-4.0.xsd
http://www.springframework.org/schema/mvc
http://www.springframework.org/schema/mvc/spring-mvc-4.0.xsd
http://www.springframework.org/schema/context
http://www.springframework.org/schema/context/spring-context-4.0.xsd">


                	<!-- 包掃描：讓com.oracle.controller和其子包中的所有被-->
				<!-- @Controller、@Service、@Repository和@Component註解標註的類都被spring管理起來-->
				<!-- 即我們只需要在類上做標記，而不需要為這些類再配置<bean>了-->
				
               <context:component-scan base-package="com.oracle.controller" />
				<context:component-scan base-package="com.oracle.service.impl" />
				<context:component-scan base-package="com.oracle.dao.impl" />




				<!-- 設定註解驅動 -->
				<mvc:annotation-driven  />

			 

				<!-- 檢視解析器負責把handler方法返回值解析為實際的物理檢視-->
				<!-- 檢視解析器使用SpringMVC框架預設的InternalResourceViewResolver-->
				<!-- 這個檢視解析器支援JSP檢視解析 -->
				<bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
										<!-- 配置 邏輯檢視路徑 的字首和字尾，當然也可以不配置 -->
										<!--<property name="prefix" value="/WEB-INF/jsp/" />-->
										<!--<property name="suffix" value=".jsp" />-->
				</bean>
				
 
</beans>

dao層程式碼如下：

package com.oracle.dao.impl;

import java.util.List;
import java.util.Map;

import org.springframework.stereotype.Repository;

import com.joe.jdbc.JDBC;
import com.joe.jdbc.JDBCFactory;
import com.oracle.dao.CRUDDao;
@Repository
public class CRUDDaoImpl implements CRUDDao {

	private JDBC jdbc=JDBCFactory.getJDBC();//這個JDBC類是我自己封裝的jar包中的
	 
	@Override
	public List<Map<String, Object>> retrieveAllUser() {
		String sql = "select  user_id,username,userage,usergender "
				+ "from t_user";
		return jdbc.retrieveAll(sql);
	}
	@Override
	public void createAllUser(String username, Integer userage, String usergender) {
		String sql = "insert into t_user (username,userage,usergender) values (?,?,?)";
		jdbc.doDML(sql,username,userage,usergender);
	}
	@Override
	public void deleteUsers(String[] ids) {
		String sql = "delete from t_user where user_id=?";
		jdbc.doDelete(sql,ids);
	}
	@Override
	public void updateUser(String username, Integer userage, String usergender,
			Integer user_id) {
		String sql ="update t_user set username=? , userage=?,usergender=? where user_id=?";
		jdbc.doDML(sql, username,userage,usergender,user_id);
	}
}

Service層程式碼如下：

package com.oracle.service.impl;

import java.util.List;
import java.util.Map;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import com.oracle.dao.CRUDDao;
import com.oracle.dao.impl.CRUDDaoImpl;
import com.oracle.pojo.UserPojo;
import com.oracle.service.CRUDService;
@Service 
public class CRUDServiceImpl implements CRUDService {

	 @Autowired
	private CRUDDao dao;//=new CRUDDaoImpl(); 
	 
	@Override
	public List<Map<String, Object>> retrieveAllUser() {
		return dao.retrieveAllUser();
	}
	@Override
	public void createAllUser(UserPojo user) {
		String username = user.getUsername();
		String usergender = user.getUsergender();
		Integer userage = user.getUserage();System.out.println("-------"+userage);
		dao.createAllUser(username, userage, usergender);
	}
	@Override
	public void deleteUsers(String[] ids) {
		dao.deleteUsers(ids);
	}
	@Override
	public void updateUser(UserPojo user) {
		Integer user_id = user.getUser_id();
		String username = user.getUsername();
		Integer userage = user.getUserage();
		String usergender = user.getUsergender();
		dao.updateUser(username,userage,usergender,user_id);
	}
}

控制層程式碼如下：（實際上也就是Servlet層。不過因為使用了SpringMVC框架，所以就叫控制層）

package com.oracle.controller;

import java.util.List;
import java.util.Map;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import com.oracle.pojo.FenyePojo;
import com.oracle.pojo.UserPojo;
import com.oracle.service.CRUDService;

@Controller
public class CRUDController {

	@Autowired
	private CRUDService cRUDService;
	
	private FenyePojo fenye;
	
	@ResponseBody
	@RequestMapping(value="/retrieveAllUser")
	public List<Map<String,Object>> retrieve(Integer [] q) {
		if(fenye==null){
			fenye=new FenyePojo();
		}
		List<Map<String,Object>> userList=cRUDService.retrieveAllUser();
		return userList;
	}
	
	@RequestMapping(value="/createAllUser")
	public String  create(UserPojo user) {
	     cRUDService.createAllUser(user);
	     return "/html/Ajax.html";
	}
	
	@RequestMapping(value="/updateUser")
	public String  updateUser(UserPojo user) {
	     cRUDService.updateUser(user);
	     return "/html/Ajax.html";
	}
	
 	
	@RequestMapping(value="/deleteUsers")
	public String delete(String [] ids) {
	     cRUDService.deleteUsers(ids);
	     return "/html/Ajax.html";
	}
	
	
	
	
}

到此為止，就只差一個我自己封裝的JDBC的jar包了。但是這裡不能夠導進來，所以我就直接把該jar包中的四個類以及一個配置檔案寫在這裡：

這是DataSource.java源程式檔案：如下

package com.oracle.jdbc;

import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;
import java.util.ArrayList;
import java.util.List;
import java.util.PropertyResourceBundle;
import java.util.ResourceBundle;
//這個DataSource類只負責獲取連線和關閉連線。
public class DataSource {

	 
	
	
	//連線池：在類載入的時候就提前建立好10個連線，如果需要就從池中拿一個，關閉的時候，再還回來。(相當於從來一個單進一次貨 變為 進一堆貨)
	private static List<Connection > pool=new ArrayList<>(); 
	
	private static String driver=null;    
	private static String url=null;
	private static String username=null;
	private static String password=null;
	private static  int size=0;
	// 靜態塊：只執行一次: static{}：靜態塊中只能訪問靜態屬性和靜態方法
	static{
			// 需要在Java程式碼中繫結資原始檔.properties檔案。(注意：下面的括號裡不需要加.properties檔案字尾名，因為一旦呼叫這個繫結方法，就必定是.properties檔案)
		ResourceBundle bundle=PropertyResourceBundle.getBundle("DataSource");    //而且這個路徑中也不需要寫res這個路徑.(因為res和src一樣都是資原始檔夾)
		// 從資原始檔中獲取，取key
		driver=bundle.getString("driver");
		url=bundle.getString("url");
		username=bundle.getString("username");
		password=bundle.getString("password");
		size=Integer.parseInt(bundle.getString("size"));
		try{
			 
			Class.forName(driver);
			for(int i=0;i<size;i++){
				Connection con =DriverManager.getConnection(url,username,password);
				pool.add(con);
			}
		}
		catch(ClassNotFoundException e){ e.printStackTrace(); } 
		catch (SQLException e) {e.printStackTrace();}
	}
	
	public synchronized Connection getConnection(){
		Connection con=null;
		try{//從池中拿一個返回去
			if(pool.isEmpty()){
				con =DriverManager.getConnection(url,username,password);
			}else{
				//從池中移出一個，並返回給你
				//get從池中拿出給你看一眼
				con=pool.remove(0);
			}
		}
		catch(SQLException e){e.printStackTrace();	}
		return con;
	}

	public void closed(ResultSet resultset, Statement pstm,
			Connection con) {
		 try{
			 if(resultset!=null) resultset.close();
		 }catch(SQLException e){
			 e.printStackTrace();
		 }finally{
			 try{
				 if(pstm!=null) pstm.close();
			 }catch(SQLException e){
				 e.printStackTrace();
			 }finally{
			     try{
			    	 if(con!=null){
						 if(pool.size()<size){  //判斷池有沒有滿
							 pool.add(con);
						 }else{
							 con.close();
						 }
			    	 }
				 }catch(SQLException e){
					 e.printStackTrace();
				 } 
			 }
		 }
	}

	public void closed(Statement stmt, Connection con) { //讓使用者體驗更好
		 closed(null,stmt,con);
	}
	
	
}

這是DataSourceFactory.java源程式檔案：如下

package com.oracle.jdbc;


public class DataSourceFactory {

	public static DataSource getDataSource(){
		return new DataSource();
	}
}

這是JDBC.java源程式檔案：如下

package com.oracle.jdbc;

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

//ＪＤＢＣ這個類負責增刪改查
public class JDBC {
    /**全查詢*/
	public List<Map<String, Object>> retrieveAll(String sql, Object... params) {
		//得到DataSource
		//得到connection
	    //使用connection造船
	    //得到船Statement（PreparedStatement是其子介面）
	    //將sql與船繫結
	    //發船到資料庫,船回來了 帶了一個ResultSet回來
	     
	    DataSource source=DataSourceFactory.getDataSource();
	    Connection con=source.getConnection();
	    List<Map<String,Object>> list=null;
	    PreparedStatement pstm=null;
	    ResultSet resultset=null;
	    try {
			pstm=con.prepareStatement(sql);
			for(int i=0;i<params.length;i++){
				// setObject（p1,p2）;
				// p1：往哪個位置上放(個數)
				// p2：放的是什麼
				pstm.setObject(i+1, params[i]);
			}
			resultset=pstm.executeQuery();
			
			// 一行一行的迴圈
			// 元資料（列名，列數，約束.相當於標題）：從ResultSet中直接取不出來
			// ResultSetMetaData 是結果集中的元資料
			ResultSetMetaData metadata=resultset.getMetaData();
			list=new ArrayList<Map<String,Object>>();
			while(resultset.next()){
				Map<String ,Object > map=new HashMap<>();
				//遍歷每一列
				for(int i=1,j=metadata.getColumnCount();i<=j;i++){    //資料庫中的都是從1開始的
					String key=metadata.getColumnName(i);
					String value=resultset.getString(i);
					map.put(key,value);
				}
				 list.add(map);
			}
		} catch (SQLException e) {
			e.printStackTrace();
		}finally{
			//關閉資源
			//後開的先關 resultSet --> statement  --> connection
			source.closed(resultset,pstm,con);
		}
	return list;
}

	/**單查詢*/
	public Map<String,Object>  retrieveOne(String sql,Object ...params){
		List<Map<String,Object>>  list=retrieveAll(sql,params);
		Map<String,Object> map=null;
		if(list.size()!=0){
			map=list.get(0);
		}
		return map;
	}
	
	
	/**
	 * DQL 資料查詢語言 select
	 * DML 資料操作語言 增刪改 update set/ delete from/ insert into
	 * DCL 資料控制語言 grant revoke
	 * DDL 資料定義語言 alter
	 * */
    public int doDML(String sql,Object... params){  //增刪改
    	DataSource source=DataSourceFactory.getDataSource();
 	    Connection con=source.getConnection();
 	    List<Map<String,Object>> list=null;
 	    PreparedStatement pstm=null;
 	    int result=-1;
 	    try {
 			pstm=con.prepareStatement(sql);
 			for(int i=0;i<params.length;i++){
 				pstm.setObject(i+1, params[i]);
 			}
 			result=pstm.executeUpdate();   //若操作成功，返回受影響行數
 	    }catch(SQLException e){
 	    	e.printStackTrace();
 	    }finally{
 	    	source.closed(pstm, con);
 	    }
    	return result;
    }

    /**
	 * 事務保護
	 * 對於查詢來說不需要保護，對於批量DML操作來說需要進行事物保護
	 * 要麼都成功，要麼都失敗- 保證資料庫操作的原子性
	 * 	我們的操作是：暫時關閉它的自動提交功能。（如果是隻有一條sql語句的話，一寫完他就會自動提交的）
	 * update t_user userage = 0 where username = '謝大腳'
	 * update t_user userage = 18 where username = '趙四'
	 * commit();// 手動提交它
	 * 在catch中 rollback();// 手動回滾它
	 * finally中，把人家的自動提交功能再恢復
	 * 事物操作：提交、回滾
	 * */
    /**
     * 此方法用於不同型別的sql語句進行批量操作
     * */
    public int[] doBatch(List<String> sqls){
    	DataSource source=new DataSource();
    	Connection con=source.getConnection();
    	// PreparedStatement 處理問號的專用船
    	// Statement 不能處理問號
    	Statement stmt=null;
    	int [] result=null;
		try { 
			con.setAutoCommit(false);   //暫時先關閉自動提交功能 
			stmt = con.createStatement();
			//將船與各條sql語句繫結
	    	for(String sql: sqls){
	    		stmt.addBatch(sql);
	    	}
	    	//發動船駛向資料庫
	    	result=stmt.executeBatch();    //因為有多條語句，所以每一條都有一個返回值。就構成陣列
	    	con.commit();    //手動提交
		} catch (SQLException e) {
			e.printStackTrace();
			try {//如果出現異常可以進行回滾
				con.rollback();
			} catch (SQLException e1) {//回滾也可能出現異常，比如斷電
				e1.printStackTrace();
			}
		}finally{
			//關閉資源
			try {
				con.setAutoCommit(true); //把人家的自動提交功能再恢復
			} catch (SQLException e) {
				e.printStackTrace();
			}
			source.closed(stmt, con);
		}
    	return result;
    }
    
    
    /**
     * 此方法用於相同型別的sql語句進行批量操作.(比如都是delete的sql語句)
     * paramList:用來存所有的 引數。每條sql語句的要用到的引數都是分別用一個Object陣列儲存的。把每個陣列都存在集合中
     * */
    public int[] doBatch(String sql,List<Object[]> paramList){
    	DataSource source=DataSourceFactory.getDataSource();
    	Connection con=source.getConnection();
    	int []result=null;
    	PreparedStatement pstm=null;
    	try {
    		 con.setAutoCommit(false);
    		//造船
			 pstm=con.prepareStatement(sql);
			 //將船與各條sql語句繫結
			 for(Object[] params:paramList){
				 for(int i=0,j=params.length;i<j;i++){  //為每一條sql語句都配置上其應用的引數
					 pstm.setObject(i+1, params[i]);
				 }
				 pstm.addBatch();    //讓船與每一條sql語句都繫結
			 }
			 result=pstm.executeBatch();
			 con.commit();
		} catch (SQLException e) {
			e.printStackTrace();
			try {
				con.rollback();
			} catch (SQLException e1) { e1.printStackTrace(); }
		} finally{
			//關閉資源
			source.closed(pstm, con);
			try {
				con.setAutoCommit(true); //把人家的自動提交功能再恢復
			} catch (SQLException e) {
				e.printStackTrace();
			}
		}
    	return result;
    }
    
    
    /**相同型別的sql語句 進行批量刪除操作。並設定了事務保護*/
    public int[] deleteBatch(String sql,String[] params){  //此方法只適用於一條sql語句中只有一個引數的操作
    	List<Object[]> list=new ArrayList<>();
    	for(String param:params){
    		Object [] object={param};
    		list.add(object);
    	}
    	return doBatch(sql,list);
    }
    
}

這是JDBCFactory.java源程式檔案：如下

package com.oracle.jdbc;

public class JDBCFactory  {

	public static JDBC getJDBC(){
		return new JDBC();
	}
}

這個jdbc的jar包中除了這四個類之外，還有一個DataSource.properties配置檔案，用來配置四大引數：

driver=com.mysql.jdbc.Driver
url=jdbc:mysql://127.0.0.1:3306/你的資料庫名稱?characterEncoding=utf8
username=你的mysql登入賬號
password=你的密碼
size=10

有了這五樣東西后，你可以將它們封裝成jdbc的jar包，再將jar包匯入上面的我寫的那個使用了SpringMVC的專案中。注意：當你將它們封裝成jar包後，那個DataSource.properties配置檔案實際上就不能夠使用了。因為每個封裝成jar包的檔案都變成了只讀的。所以你需要在你匯入這個jar包的專案中重新寫一個一模一樣的DataSource.properties配置檔案。檔案內容可到jar包中的DataSource.properties配置檔案中複製出來。並將其中的資料庫名稱還有mysql登入的賬號及密碼改成你自己的。在這裡插入圖片描述

因為我建立的是一個Maven專案。（建立該專案的好處在於，你想要什麼jar包，不需要自己去下，只需在該專案的某個地方進行搜尋就行。當然了，前提是你要配置好Maven的各種環境，比如說搭好本地倉庫啊等等）。我匯入的包有這些：
在這裡插入圖片描述

純html的Ajax：

純乾貨：21天帶你玩轉容器

#純乾貨：當你學會這些技術，再也不用愁找不到Java開發工作了

純乾貨：手把手地教你搭建Oracle Sharding資料庫分片技術

不算政治，純搞笑：俄羅斯人眼中 2050 年全球四大勢力範圍圖

純乾貨：微信小程式開發初級篇

純css：table表格，讓thead固定，tbody有滾動條

純新手：centOS 上搭建confluence + mysql

Web前端面試指導(十八)：用純CSS創建一個三角形的原理是什麽？

開源純C#工控網關+組態軟件(三)加入一個新驅動：西門子S7

【JavaScript】計數器+classList使用-純js案例：全選反選

晶尚純草創始人：晶尚純草是真是假？所謂騙局從何而來？

分享：純 css 瀑布流和 js 瀑布流

純前端開發案例：用 SpreadJS 搭建信息系統軟件開發平臺

zblog2.3的缺點：純靜態化無法實現欄目名加id的網址結構[圖]

純cpp實現：獲取某個目錄下面所有相同類型文件的路徑字符串

mac：使用VLC播放純視訊YUV檔案（命令列）

mac：使用VLC播放純音訊PCM檔案（命令列）

數學推導+純Python實現機器學習演算法：邏輯迴歸

純前端，html頁面間傳值方式：

純幹貨：21天帶你玩轉容器

純html的Ajax：

相關推薦