jquery ajax例子

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

1. $.ajax(options)方法

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

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

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

1.

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

function deleteuser(username) {            //根据用户名删除用户信息
 if (confirm('警告：您确认要删除吗？')) {
  $
    .ajax( {
     url : "${pageContext.request.contextPath }/servlet/UserDeleteServlet",
     type : 'post',
     data : 'username=' + username,
     success : function(mm) {
      var revalue = 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) {
     var inhtml = "";
     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.添加页面

<script  type="text/javascript" src="js/jquery-1.7.2.js"></script>
 <script type="text/javascript">

  function alterpws()
  {
   var username=$('#username').val();
   var password=$('#password').val(); 
   var dj;  
   if(username.length==0)
   {
    alert("用户名不能为空!");  
    return false;
   }  
   if(password.length==0)
   {
    alert("口令不能为空!");
    return false;
   }  
   if($("#dj").attr("checked")) //判断复选框是否已经打勾
   {
    dj="2";
   }
   else
   {
    dj="3";
   }

   $.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){
       var revalue=mm.replace(/\r\n/g,'');
       if(revalue=="success")
       {
        alert("添加成功!",function(){window.location.reload();});
       }
       else
        alert("添加失败!");
      }
     }); 
  }
</script>

3.修改页面

<script language="javascript" type="text/javascript"
   src="${pageContext.request.contextPath }/js/jquery-1.7.2.js">
</script>
  <script language="JavaScript">

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 = new StringBuffer();      //定义一个变量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();