當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
JSON表单提交（ajax异步刷新）
生活随笔
收集整理的這篇文章主要介紹了
JSON表单提交（ajax异步刷新）
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
JSON簡介：
JSON: JavaScript Object Notation(JavaScript 對象表示法)
JSON 是存儲和交換文本信息的語法。類似 XML。
JSON 比 XML 更小、更快，更易解析。
JSON 文本格式在語法上與創建 JavaScript 對象的代碼相同。
由于這種相似性，無需解析器，JavaScript 程序能夠使用內建的 eval() 函數，用 JSON 數據來生成原生的 JavaScript 對象。
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 {@Overridepublic 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 blocke.printStackTrace();}return false;}@Overridepublic 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="提交" οnclick="insertStu()"/></form><!-- 讀取數據 --><input type="button" οnclick="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，用來存儲讀取到的jsonStringBuffer jsn=new StringBuffer();//用io流的方式讀取js頁面傳過來的對象jsonBufferedReader 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();}}?
轉載于:https://www.cnblogs.com/dear-java/p/4999882.html
總結
以上是生活随笔為你收集整理的JSON表单提交（ajax异步刷新）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 大规模markpoint特效
- 下一篇： ExtJS4为form表单必填项添加红色