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异步刷新）相关推荐

ajax 模拟表单提交,Ajax模拟Form表单提交，含多种数据上传
---恢复内容开始--- Ajax提交表单.使用FormData提交表单数据和上传的文件(这里的后台使用C#获取,你可以使用Java一样获取) 有时候前台的数据提交到后台,不想使用form表单上传,希 ...
php ajax form表单提交,Ajax方法实现Form表单提交的方法
这次给大家带来Ajax方法实现Form表单提交的方法,Ajax方法实现Form表单提交的注意事项有哪些,下面就是实战案例,一起来看一下. 写在前面的话在使用form表单的时候,一旦点击提交触发sub ...
from提交ajax,form表单提交与ajax消息传递
form表单提交与ajax消息传递 1.前后端传输数据编码格式contentType: urlencoded 对应的数据格式:name=xxx&password=666 后端获取数据:requ ...
layui的form表单提交数据，layui的select框默认选中
1.提交数据 1.1html <form class="layui-form" action="" method=""> < ...
jquery表单ajax json数据,jquery序列化form表单使用ajax提交后处理返回的json数据
1.返回json字符串: /** 将一个字符串输出到浏览器 */ protected void writeJson(String json) { PrintWriter pw = null; try ...
BJUI使用ajax异步表单提交时后台action要加@ResponseBody
场景在使用BJUI的ajaxform异步表单提交时,后台直接使用 @RequestMapping时不能正常回显消息. 知识储备 ajaxform异步表单提交通过data属性使用(带验证): < ...
ajax form表单提交_LayUI提交表单，监听select，分页组件
1.LayUI提交表单这几天做项目,用到提交layui框架的弹出层的表单,因为需要在提交表单后,关闭当前弹出层,同时刷新父窗口的数据,因此,用普通的提交就不行了,因为普通的提交到后台之后没有返回值, ...
from表单提交和JSON区别
form表单是"键值对"的数据格式,例如: a=1&b=2&c=3 而json格式则与之不同,如下: {"a":1,"b": ...
python中前后端通信方法Ajax和ORM映射（form表单提交）
后端从数据库获取数据给到前端: 第一种方式: admin.py文件代码: @admin.route('/showList') def show():# 获取数据库所有文章数据,得到一个个对象res=A ...