加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 （https://www.lidatong.com.cn/）- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置： 首页 > 百科 > 正文

　如今来说，AJAX在现在是热得不能再热的技术。没有人能否认，它

发布时间：2020-12-16 00:52:04 所属栏目：百科 来源：网络整理
导读：JavaScript技能的不足致使很长一段时间对于前端交互处理望而却步，看着编程语言TOP排行榜JavaScript的热度，加上好多网站的用户体验越来越如心，这些都离不开JavaScript。 说白了，开发人员之所以多年冷落JavaScript，终究是没能驾驭了JavaScript。但是，逃

JavaScript技能的不足致使很长一段时间对于前端交互处理望而却步，看着编程语言TOP排行榜JavaScript的热度，加上好多网站的用户体验越来越如心，这些都离不开JavaScript。

说白了，开发人员之所以多年冷落JavaScript，终究是没能驾驭了JavaScript。但是，逃避总不是办法，开发出交互很差劲的网站，后台处理在牛逼，也没法吸引用户。随着互联网和Web2.0的发展，网上冲浪再也不是简单的获取资讯，信息，更多融入了个人情感，自媒体，社区化，群体的元素，而这些元素的融入自然少不了更加人性化的交互服务。


说了这些，多源自越来越多很好体现效果的网站的诞生。


言归正传，下面的例子是一个简单的数据操作，完全是通过Ajax完成。

1.数据库表结构：

2.实体类：Account(参见数据库表结构)

3.数据源获取类（JDBC）

4.数据库操作CRUD

5.处理Ajax的请求的服务类ActionServlet

jQuery提供的Ajax函数如下：

$.ajax(options)是jQuery中Ajax的最底层实现，下面这个例子采用此方法完成。

  • 测试页面

  • 代码：

    页面代码：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    姓名：

    心情：
    编号：
    网址：
    请稍等，数据正在加载...

    说明：使用Ajax来处理，移除表单标签，提交按钮等元素。

  • Ajax处理：

    实现添加信息，查询所有信息，删除指定编号信息，更新指定编号信息，查询指定编号信息。

  • 代码：


    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    $(document).ready(function() {
    $("#divs").hide();
    $("#urlcontent").hide();
    $("#loadMsg").hide();
    })
    functionshow() {
    $.ajax({
    global:true,
    type :'post',
    url :"control",
    data : {
    method :'show',
    },
    success :function(data) {
    vardivNode = $("#divs");
    divNode.html("");
    if(data !="null") {
    varo = eval("("+ data +")");
    vartitle = $("
    ");
    title
    .html("|编号|姓名|心情|发布时间|");
    title.appendTo(divNode);
    $.each(o,function(i,n) {
    vardiv = $("
    ");
    varspan ="|"
    $.each(n,function(pro,val) {
    span = span +""+ val +"|";
    })
    div.html(span).appendTo(divNode);
    })
    divNode.show();
    }else{
    $("#msg").html("没有数据信息");
    }
    }
    });
    }
    functionadd() {
    $("#divs").hide();
    vara_name = $("#a_name").val();
    vara_feeling = $("#a_feeling").val();
    if(a_name ==""|| a_feeling =="") {
    alert("输入信息不能为空！");
    return;
    }
    $.ajax({
    type :'post',
    url :"control",
    data : {
    method :'add',
    a_name : a_name,
    a_feeling : a_feeling
    },
    success :function(data) {
    $("#msg").html(data);
    $("#v_a_name").html(a_name);
    $("#v_a_feeling").html(a_feeling);
    }
    });
    }
    functionupdate() {
    $("#divs").hide();
    vara_id = $("#a_id").val();
    vara_name = $("#a_name").val();
    vara_feeling = $("#a_feeling").val();
    if(a_id ==""&& a_name ==""&& a_feeling =="") {
    alert("输入编号或者信息不能为空！");
    return;
    }
    $.ajax({
    type :'post',
    data : {
    method :'update',
    a_feeling : a_feeling,
    a_id : a_id
    },
    success :function(data) {
    $("#msg").html(data);
    $("#v_a_id").html(a_id);
    $("#v_a_name").html(a_name);
    $("#v_a_feeling").html(a_feeling);
    }
    });
    }
    functiondel() {
    $("#divs").hide();
    vara_id = $("#a_id").val();
    if(a_id =="") {
    alert("输入编号不能为空！");
    return;
    }
    $.ajax({
    type :'post',
    data : {
    method :'delete',
    success :function(data) {
    $("#msg").html(data);
    }
    });
    }
    functionquery() {
    vara_id = $("#a_id").val();
    if(a_id =="") {
    alert("输入编号不能为空！");
    return;
    }
    $.ajax({
    type :'post',
    data : {
    method :'query',
    success :function(data) {
    vardivNode = $("#divs");
    divNode.html("");
    if(data !="null") {
    varo = eval("("+ data +")");
    vartitle = $("
    ");
    title
    .html("|编号|姓名|心情|发布时间|");
    title.appendTo(divNode);
    $.each(o,n) {
    vardiv = $("
    ");
    varspan ="|";
    $.each(n,val) {
    span = span +""+ val +"|";
    })
    div.html(span).appendTo(divNode);
    })
    divNode.show();
    }else{
    $("#msg").html("没有数据信息");
    }
    }
    });
    }

    说明:Ajax提交的URL是对应的处理业务的Servlet程。

  • Servlet程序代码：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    packagecom.ajax.test;
    importjava.io.IOException;
    importjava.util.Calendar;
    importjava.util.Date;
    importjava.util.List;
    importjavax.servlet.ServletException;
    importjavax.servlet.annotation.WebServlet;
    importjavax.servlet.http.HttpServlet;
    importjavax.servlet.http.HttpServletRequest;
    importjavax.servlet.http.HttpServletResponse;
    @WebServlet("/ActionServlet")
    publicclassActionServletextendsHttpServlet {
    privatestaticfinallongserialVersionUID = 1L;
    privateDAO dao =newDAO();
    privateAccount account;
    publicActionServlet() {
    super();
    }
    protectedvoiddoGet(HttpServletRequest request,
    HttpServletResponse response)throwsServletException,IOException {
    doPost(request,response);
    }
    protectedvoiddoPost(HttpServletRequest request,IOException {
    response.setCharacterEncoding("UTF-8");
    String method = request.getParameter("method");
    if(method.equals("add")) {
    String a_name = request.getParameter("a_name");
    String a_feeling = request.getParameter("a_feeling");
    Date a_time = Calendar.getInstance().getTime();
    account =newAccount();
    account.setA_name(a_name);
    account.setA_feeling(a_feeling);
    account.setA_time(a_time);
    intresult = dao.add(account);
    if(result ==1) {
    response.getWriter().print(a_time +" "+ a_name +" 发布信息成功！");
    }else{
    response.getWriter().print(a_time +" "+ a_name +" 发布信息失败！");
    }
    }
    if(method.equals("delete")) {
    inta_id = Integer.parseInt(request.getParameter("a_id"));
    account =newAccount();
    account.setA_id(a_id);
    intresult = dao.delete(account);
    if(result ==1) {
    response.getWriter().print("删除信息成功！");
    }else{
    response.getWriter().print("删除信息失败！");
    }
    }
    if(method.equals("update")) {
    inta_id = Integer.parseInt(request.getParameter("a_id"));
    String a_name = request.getParameter("a_name");
    String a_feeling = request.getParameter("a_feeling");
    Date a_time = Calendar.getInstance().getTime();
    account =newAccount();
    account.setA_id(a_id);
    account.setA_name(a_name);
    account.setA_feeling(a_feeling);
    account.setA_time(a_time);
    intresult = dao.update(account);
    if(result ==1) {
    response.getWriter().print(a_time +" "+ a_name +" 更新信息成功！");
    }else{
    response.getWriter().print(a_time +" "+ a_name +" 更新信息失败！");
    }
    }
    if(method.equals("query")) {
    inta_id = Integer.parseInt(request.getParameter("a_id"));
    Account account = dao.queryById(a_id);
    if(account !=null) {
    String json = objctToJson(account);
    StringBuilder sb=newStringBuilder();
    sb.append("{'1':");
    sb.append(json);
    sb.append("}");
    response.getWriter().print(sb.toString());
    }else{
    response.getWriter().print("null");
    }
    }
    if(method.equals("show")) {
    ListaccountList = dao.query();
    StringBuilder sb =newStringBuilder();
    sb.append("{");
    for(inti =0,j = accountList.size(); i < j; i++) {
    Account account = accountList.get(i);
    sb.append(i);
    sb.append(":");
    sb.append(objctToJson(account));
    if(i != j -1) {
    sb.append(",");
    }
    }
    sb.append("}");
    response.getWriter().print(sb.toString());
    }
    }
    /**
    * 将对象信息转换为JSON格式的数据
    * @param account
    * @return
    */
    privateString objctToJson(Account account) {
    StringBuilder sb =newStringBuilder();
    sb.append("{");
    sb.append("'a_id':'"+ account.getA_id() +"',");
    sb.append("'a_name':'"+ account.getA_name() +"',");
    sb.append("'a_feeling':'"+ account.getA_feeling() +"',");
    sb.append("'a_time':'"+ account.getA_time() +"'");
    sb.append("}");
    returnsb.toString();
    }
    }


  • 下面是测试的效果图：

    至此：jQuery的Ajax底层实现操作实现了无刷新的数据库CRUD操作，整个过程在一个HTML页面中完成。

  • jQuery提供的$.get(),$.post()，load()方法是在$.ajax()的基础上进行封装，如果将$.ajax（）定为第一层，那么这些方法就是第二层，$.getScript()和$.getJSON()方法就是第三层。


由于上面贴了写代码，写的有些长了


您正在访问的是 百搜技术!希望百搜技术能协助您解决问题。如需提问,请移步 百搜论坛(http://bbs.baisoujs.com)进行提问!
本文网址： http://www.baisoujs.com/detail_138132539025715.html

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
    相关内容
      推荐文章
        站长推荐
        热点阅读

          【免责声明】本站内容转载自互联网，其发布内容言论不代表本站观点，如果其链接、内容的侵犯您的权益，烦请提交相关链接至邮箱bqsm@foxmail.com我们将及时予以处理。

          建议您使用1920×1080分辨率、谷歌浏览器Google Chrome、Microsoft Edge以获得本站的最佳浏览效果

          Copygight © 2008-2022 https://www.lidatong.com.cn/ All Rights Reserved. 李大同