【初学者】基于jQuery框架下ajax的想法整理和应用实例展示

　　在进行了HTML（包含bootstrap框架）、java基础、Oracle数据库、java高级、JavaScript（包含JQuery框架）及Javaweb项目的编程学习后，笔者（初学者）决定对一些过程中的重难点及感悟思考进行总结，供自我反思与进步，也欢迎有兴趣者做交流。

（水平有限，不足敬谅！）

　　JSP动态网页中，ajax的应用范围十分广泛！但也会对初学者带来不少的困扰（个人感觉）。

　　笔者最先接触ajax，是可通过ajax实现注册登录过程中的动态提示，如注册时提示“该用户名已存在！”等；也可以应用json实现将所要编辑内容的已存在值返回模态框等；当然也包括在视频播放界面进行评论，网页只进行部分更新等这些常用且实用的功能。

　　简单来说，ajax通过异步方式实现功能，存在于网页与数据库之间，也只需与库进行少量的数据交换即可实现对部分网页的更新，而不会打断或影响网页全局的应用。方便快捷，效率极高，杜绝许多浪费；但也因为打破了原有的网页运作模式，在数据安全方面存在一定风险。

　　ajax通常以json形式传输数据——json是一种轻量级的主流数据交换格式，易于人、机读写，也以"key"-"value"的形式存储数据，如：

{"checkBook"："editBook"}。

　　ajax可谓涉猎广泛，但绝非广而不精！在使用jQuery的情况下使用ajax，代码十分精炼！只需定位所需的url、数据传输方式（get/post）、所要传输的少量数据、返回数据的格式（json/String）、及成功或失败后的函数即可。如：

    //编辑图书
    $('button[name="editBk"]').click(function () {
        var editNum = $(this).val();
        $.ajax({
            url: 'CheckBkServlet',
            type: 'get',
            data: {
                editNum: editNum
            },
            dataType: 'json',
            success: function (data) {
                var myJson = JSON.stringify(data);
                $('#editBkNum').val(data[0].bsNum);
                $('#editBkNam').val(data[0].bsNam);
                $('#editAut').val(data[0].bsAut);
                $('#editPub').val(data[0].bsPub);
                $('#editBkDat').val(data[0].bsDat);
                $('#editAmt').val(data[0].bsAmt);
                $('#editPri').val(data[0].bsPri);
                $('#editBkModal').modal('show');
            },
            error: function (xhr, textStstus) {
                console.log("错误");
            }
        });
    });

　　在对应的servlet中，结合输出流使用，部分代码如下：

        String num = request.getParameter("editNum");
        int editNum = 0;
        if (num != null) {
            editNum = Integer.parseInt(num);
        }
        TsBizInter tb = new TsBizImpl();
        Books editBk = tb.checkBk(editNum);
        ArrayList<Books> booksArrayList = new ArrayList<>();
        booksArrayList.add(editBk);
        JSONArray jsonArray = new JSONArray();
        jsonArray = jsonArray.fromObject(booksArrayList);
        PrintWriter printWriter = response.getWriter();
        printWriter.print(jsonArray);
        printWriter.flush();
        printWriter.close();

　　最终在模态框中展示出来的效果如下图：

【初学者】基于jQuery框架下ajax的想法整理和应用实例展示

猜你喜欢