关于使用Ajax异步传输JSON格式信息至Servlet处理

关于使用Ajax传输JSON格式信息至Servlet处理

首先准备一些前端页面

<form>
    姓名：<input type="text" id="username"></br>
    消费：<input type="text" id="pay"></br>
    生日：<input type="date" id="userdate"></br>
    <input type="button" onclick="tj()" value="上传">
  </form>

其中x1(),x2(),x3()方法都是为了验证表单内容所准备。
接下来是使用JavaScript添加表单的验证方法

//记得导入Jquery
  <script src="js/jquery-1.8.3.min.js"></script>

首先要声明一个XMLHttpRequest进行数据收发。很关键，勿忘。

var http = new XMLHttpRequest();//可以发送数据，也可以接收数据
		//tj()是点击方法
      function tj() {
          if (x1() && x2() && x3()){
              //全部成功，进行数据传输,首先获取数据并转存为json对象
              var usname = document.getElementById("username");
              var userpay = document.getElementById("userpay");
              var userdate = document.getElementById("userdate");
              //此时的json数据还不能作为json对象发送
              var jsonsj = {
              username:usname.value,
              userpay:userpay.value,
              userdate:userdate.value
              };
              //发送请求
              //设置传输属性：传输方式、传输位置、是否异步
              http.open("post","/DataServlet",true);
              //开始传输：选择数据，这里选择刚刚声明的json
              //JSON.stringify(jsonsj)是为了将jsonsj转换成可以传输的json数据，此处很关键。
              http.send(JSON.stringify(jsonsj));
          }else {
              alert("未成功,有数据格式有误")
          }
      }

之后如果需要接收服务器传回的数据，可以添加以下方法

//当readstate属性改变时，查看XMLHttpRequest中由服务器传回的数据
      http.onreadystatechange =function () {
          //新建一个发送数据的特殊js对象
          if (http.readyState == 4 && http.status == 200) {
              //处于第四步等待状态，并且页面200状态正常，既可以开始执行
              var tex = http.responseText;//获取接收到的数据
              console.log(tex);
          }
      };

到这里，页面发送json数据的过程执行完了，之后要去sevlet中编写接收Json数据的代码。

需要json相关jar包，java-json.jar

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

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //声明字符集格式
        request.setCharacterEncoding("UTF-8");
        response.setContentType("text/html;charset=UTF-8");
        //首先声明一个StringBuilder用于接收数据
        StringBuilder stringBuilder = new StringBuilder();
        String len = null;
        //使用request.getReader()方法获取传入的JSON对象
        BufferedReader reader = request.getReader();
        System.out.println(reader);
        while ((len=reader.readLine())!=null){
        //取出传入
            stringBuilder.append(len);
        }
        //将json转换成为字符串类型
        String str = stringBuilder.toString();
        JSONObject jsonObject = null;
        try {
            jsonObject = new JSONObject(str);
        } catch (JSONException e) {
            e.printStackTrace();
        }
        //声明三个变量准备接收数据
        String username = null;
        String userpay = null;
        String userdate = null;
        try {
        	//根据键值就可以取出传入的数据
            username= jsonObject.getString("username");
            userpay = jsonObject.getString("userpay");
            userdate=jsonObject.getString("userdate");
        } catch (JSONException e) {
            e.printStackTrace();
        }
        System.out.println("username="+username);
        System.out.println("userpay="+userpay);
        System.out.println("userdate="+userdate);
    }

新手码苗，代码冗余比较大，代码比较臃肿，请各位见谅。
最后一步Servlet接收数据也是在网上看文章学习到的技巧，感谢这位大哥的帖子，附上源地址：利用ajax向服务器发送json格式的数据，以及服务器端的接收和处理