如何通过jQuery实现ajax

HTML5培训技术

一、 jQuery提供了$.ajax()方法,利用此方法我们可以轻松发起Ajax请求

$.ajax(options)方法

url对应的Servlet路径

type（get/post）

date指传递的参数

success/error请求判断

async（boolean型）如果指定为false则表示同步提交请求；若为true指异步提交请求

dateType：json数据格式

JSON中的每个结构单元均由花括号{}表示，每个结构中可以包含多个由逗号（，）分割的成员，而每个成员均是一个“键/值”对。
值不仅可以是普通的字符串，也可以是一个有序列表，用方括号[]标识，其中可以包含以逗号隔开的多个值。

示例：应用ajax实现增删改查

function deleteuser(username){            //根据用户名删除用户信息
if (confirm('警告：您确认要删除吗？')) {
  $
    .ajax( {
     url : "${pageContext.request.contextPath}/servlet/UserDeleteServlet",
     type : 'post',
     data : 'username=' + username,
     success : function(mm) {
      varrevalue = mm.replace(/rn/g, '');

      if(revalue == "success") {
       alert("删除成功!",function() {
        window.location.href= window.location.href;
       });
      }else
       alert("删除失败!",function() {
        window.location.href= window.location.href;
       });
     }
    });
}
}
function show(){                    //应用json格式
var dj = $('#dj').val();

$.ajax( {
    url : "${pageContext.request.contextPath}/servlet/UserSelectByDjServlet",
    type : 'get',
    contentType : "application/json;charset=utf-8",
    dataType :'json',
    data : 'dj=' + dj,
    success :function(json) {
     var inhtml ="";
     inhtml +="

";
for (i = 0;i < json.contents.length; i++) {

inhtml+= "

";
inhtml+= "";

     }
     inhtml +="";
     $('#div1').html(inhtml);

    },
    error : function(xhr,status, errorThrown) {
     alert("errorThrown="+ errorThrown);
    }
   });
}
《script》

2.添加页面

   $.ajax({
     url:"${pageContext.request.contextPath}/servlet/UserAddServlet",
     type : 'post',
      //data :'username='+username+'&password='+password+'&dj='+dj,
     data:{username:username,password:password,dj:dj}, //参数名:参数值
     success :function(mm){
       varrevalue=mm.replace(/rn/g,'');
       if(revalue=="success")
       {
        alert("添加成功!",function(){window.location.reload();});
       }
       else
        alert("添加失败!");
      }
     });
  }
《script》

3.修改页面

function alterUser() {
var oldname = $("#oldname").val();
var newname = $("#newname").val();

var password = $('#password').val();

if (newname.length == 0) {
  alert("用户名不能为空!");
  return false;
}
if (password.length == 0) {
  alert("密码不能为空!");
  return false;
}

$.ajax( {
  url :"${pageContext.request.contextPath}/servlet/UserUpdateServlet",
  type : 'post',
  data : 'oldname=' + oldname+ '&newname=' + newname + '&password=' +password,
  success : function(mm) {
   var revalue = mm.replace(/rn/g,'');

   if (revalue == "success") {
    alert("修改信息成功!");
   } else
    alert("修改信息失败!");
  }
});
}
《script》

4.应用json格式，在查询servlet中json格式如下：

StringBuffer sb = newStringBuffer(); //定义一个变量sb

sb.append("{"); //append追加，json格式在｛｝内，开始的｛
sb.append(""contents":[");//遇到双引号加/，contents为变量任意命名，注意冒号，开始加[

  for (int i = 0; i    Admin ad = adminList.get(i);
   if (i > 0) {
    sb.append(",");                           //如果有多个值，值中间加逗号
   }

sb.append("{"); //变量之间用｛｝引起来，开始的｛
sb.append(""name":"" +ad.getUser() + "","); //第一个参数名name任意

sb.append(""pass":""+ ad.getPass() + """); //第二个参数名

   sb.append("}");                                 //结束的｝
  }
  sb.append("]");                                   //结尾的]
  sb.append("}");                                   //结尾的}
  out.println(sb);                                  //输出sb
  out.flush();
  out.close();

上一篇：jQueryUI的拖拽功能

下一篇：jQuery实现图片滚动效果

HTML5培训技术

本文由欣才IT学院整理发布，未经许可，禁止转载。

支持11 不支持0

让更多人成为更优秀的互联网工程师

欣才学院微信公众号

欣才IT学院为小伙伴们提供专业PHP培训、python培训、java培训、HTML5培训让更多人成为更优秀的互联网工程师！期待您的到来！

用户名	密码
" + json.contents[i].name +"	" + json.contents[i].pass +"