咸糖记录编程的地方

Do what you love and the money will follow.

目录
jsp 与 ajax 交互
/  

jsp 与 ajax 交互

##背景:

在写web 作业的时候想要把之前的 查询学校成绩的模块加入进去
但是模块是用python写的 使用java 调用很麻烦,于是使用了flask框架

##实现
搭建了一个简陋的api python代码如下:

import sys
sys.path.append('../')
from flask import Flask,jsonify,abort,request
from until.getScore import getScore
from flask_cors import *
app = Flask(__name__)
CORS(app, supports_credentials=True)




@app.route('/api/get_score', methods=['POST'])
def create_task():
    print(request.json)
    if not request.json or not ('username' in request.json and 'password' in request.json):
        abort(400)
    user = request.json
    
    username = user['username']
    password = user['password']


    if username and password:
        data = getScore(username, password)
        return jsonify({'data': data}), 201
    else:

        abort(400)


if __name__ == '__main__':
    app.run(debug=False, port=5010,host='0.0.0.0')

主要就是接受post请求然后使用另外一个爬虫模块去使用模型去识别验证码
模拟登陆学校的网站 抓取成绩并且返回json

下面就是编写ajax了
需要从表单获取账号密码,并且转换为json格式 但是这个json 又必须再转换为string

 $.ajax({
            //some parms need to take care
            type: "POST",//method type
            contentType : "application/json",//post data type
            dataType: "json",//return type
                url: "http://111.231.255.225:5010/api/get_score" ,//url
            data: JSON.stringify($('#form1').serializeObject()),
            success: function (result) {
                var dataArray=result['data'];
                //first get type from dataArray
                if ((typeof dataArray == "string") && dataArray.startsWith("用户名")){
                    alert("用户名不存在!")
                } else if((typeof dataArray == "string") && dataArray.startsWith("密码")){
                    alert("密码错误!")
                }
                else {
                    addToHtml(dataArray)
                }


            },
            error : function() {
                alert("请求错误");
            }
        });

contentType:"application/json;charset=utf-8", 指的是传给服务器端的json格式 并且编码为utf-8
dataType:"json", 指的是返回的数据是json格式

下面的addToHtml函数是用来将获取的数据嵌入html 并且渲染出来

在写话题页面的时候我也使用了ajxa对评论和回复进行局部刷新 也是本篇的重点

$.ajax(
            {
                url:"ServletGetComment", //访问路径
                type:"POST",    //访问方式
                data:JSON.stringify({"userid":userid,"body":oSize,"mainTitleId":mainTitleId}), //传入服务端的数据
                dataType:"json",
                contentType:"application/json;charset=utf-8",
                complete : function(data){
                    data=data["responseJSON"]

                    // the this obj will lose effectiveness in ajax  so  we need  to give a quote for this obj
                    oHtml = '<div class="comment-show-con clearfix"><div class="comment-show-con-img pull-left"><img src="/ServletShowImage?userImg=${user.ueser.ueserImg}"  width="50px" height="50px" alt=""></div> <div class="comment-show-con-list pull-left clearfix">' +
                        '<small style="color: #919191">#第'+data['topicId']+'楼</small><div class="pl-text clearfix"> <a href="#" class="comment-size-name">'+username+'('+userid+')'+'</a> <span class="my-pl-con">&nbsp;'+ oSize +'</span> </div> <div class="date-dz"> <span class="date-dz-left pull-left comment-time">'+now+'</span> <div class="date-dz-right pull-right comment-pl-block"> <a href="javascript:;" class="date-dz-pl pl-hf hf-con-block pull-left">回复</a> <span class="pull-left date-dz-line">|</span> <a href="javascript:;" class="date-dz-z pull-left"><i class="date-dz-z-click-red"></i>赞 (<i class="z-num">0</i>)</a> </div> </div><div class="hf-list-con"></div></div> </div>';
                    if(oSize.replace(/(^\s*)|(\s*$)/g, "") != ''){
                        mythis.parents('.reviewArea ').siblings('.comment-show').prepend(oHtml);
                        mythis.siblings('.flex-text-wrap').find('.comment-input').prop('value','').siblings('pre').find('span').text('');
                    }

                    console.log(data);
                },


            });

这是ajax代码 没什么好讲的 和上面的相似 就是将评论整理成json字符串 传给服务器

ajax 与servlet 交互如下图所示:
avatar

java 中的request中的json 需要解析 所以我们需要编写一个方法:

public String readJSONString(HttpServletRequest request){
        StringBuffer json = new StringBuffer();
        String line = null;
        try {
            BufferedReader reader = request.getReader();
            while((line = reader.readLine()) != null) {
                json.append(line);
            }
        }
        catch(Exception e) {
            System.out.println(e.toString());
        }
        return json.toString();
    }

但是java 仍然不能愉快的操作json字符串 所以 我用了正则表达式

String commentJson=readJSONString(request);
        request.setCharacterEncoding("utf-8");
        response.setCharacterEncoding("utf-8");
        // Fortunately the regex is same
        // Match userId and passWord in JsonStr
        String userIdPattern = "id\":(\\d+),\"body\":\"(.*?)\",\"mainTitleId\":(\\d+)}";
        Pattern r = Pattern.compile(userIdPattern);
        Matcher m = r.matcher(commentJson);

        if (m.find( )) {

            String userId=m.group(1) ;
            String body= m.group(2);
            String mainTitleId=m.group(3);
}

庆辛的是 正则模块是相通的 感动流涕 !

然后我们将数据库取出的数据转换成Json数据串类型

response.setContentType("text/json");

            String jsonString = "{\"userId\":\""+ueser.getId()+"\",\"body\":\""+body+"\",\"crateTime\":\""+createTime
                                +"\",\"mainTitleId\":\""+mainTitleId+"\",\"topicId\":\""+topicId+"\"}";
            response.setCharacterEncoding("UTF-8");
            response.setContentType("application/json; charset=utf-8");
            PrintWriter writer = response.getWriter();
            writer.append(jsonString);

也许我需要搞一个json的jar包 转义转的我十分窒息


标题:jsp 与 ajax 交互
作者:xiantang
地址:http://xiantang.info/articles/2019/06/03/1559551069760.html

评论