使用jQuery实现ajax

来源：互联网发布：淘宝商城名牌男装短袖编辑：程序博客网时间：2024/05/24 23:15

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

$.ajax(options)方法

url对应的Servlet路径
type（get/post）
date指传递的参数
success/error请求判断
async（boolean型）如果指定为false则表示同步提交请求；若为true指异步提交请求
dateType：json数据格式

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

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

<scripttype="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.7.2.js">
</script> --导入jquery库，注意路径
<scripttype="text/javascript">

function deleteuser(username){            //根据用户名删除用户信息
if (confirm('警告：您确认要删除吗？')) {
  $
    .ajax({
     url: "${pageContext.request.contextPath}/servlet/UserDeleteServlet",
     type: 'post',
     data: 'username=' + username,
     success: function(mm) {
      varrevalue = mm.replace(/\r\n/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) {
     varinhtml = "";
     inhtml+="<div><table><tr><td>用户名</td><td>密码</td></tr>";
     for(i = 0; i < json.contents.length; i++) {

inhtml+="<tr><td>"+ json.contents[i].name +"</td>";
inhtml+= "<td>" + json.contents[i].pass +"</td></tr>";

     }
     inhtml+= "</div>";
     $('#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(/\r\n/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(/\r\n/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< adminList.size(); 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();

0 0