网办项目经验小结3-Ajax，获取URL参数

1：项目中，感觉这一句很有用：jsp中 String contextPath=request.getContextPath();

具体说明：

<a href="<%=request.getContextPath()%>/XXXX.jsp">
指的是根目录下的xxxx.jsp
假设你的要目录http://localhost:8080,
你现在访问的页面为http://localhost:8080/admin/manage.jsp
则<a href="<%=request.getContextPath()%>/XXXX.jsp">
指向的链接是：http://localhost:8080/xxxx.jsp
<a href="XXXX.jsp">链接的是当前jsp文件路径下的xxxx.jsp
上例指向的链接是：http://localhost:8080/admin/xxxx.jsp:

2：Ajax说明

ajax异步传输，并实现动态为页面动态增加控件的功能，这里可以直接使用jQuery获取网页控件，如$("#gov"),通过id获取控件

例子；

  function ajaxLoadGovs() {
 var ajaxUrl = contextPath+"/sxzc/queryServFolder/ajaxLoadGovs.action";
 $.ajax({
  url:ajaxUrl, 
  type:"GET", 
  dataType:"json", 
  beforeSend:function () {}, 
  success:function (json) {
  var target = document.getElementById("selectGovs");
  for (var i = 0; i < json.length; i++) {
   var everyData = json[i];
   var optionNode = document.createElement("option");
   optionNode.value = everyData.divisionCode;
   optionNode.innerHTML = everyData.divisionName;
   optionNode.selectvalue = everyData.divisionCode;
   optionNode.selectType = everyData.type;
   //var explore = userAgent();
   //if( explore == 'chrome'){}
   optionNode.onclick = function () {
    //alert( this.selectvalue);
    ajaxLoadOrgs(this.selectvalue,this.selectType);
   };
   target.appendChild(optionNode);
  }
  //
  ajaxLoadOrgs(json[0].divisionCode,json[0].type);
 }, error:function (msg) {
  alert("\u64cd\u4f5c\u53d1\u751f\u5f02\u5e38\uff01");
 }});
}

$.ajax 的使用需要服务器端向前端传递数据，后端怎样向前端传递参数，以什么格式传递？

通常服务器端传递向前端的数据格式一般为 json。

参数 url参数类型为json，json类型实则为字符串的一种，后台有一种向前台传送参数的方法就是利用  HttpServletResponse向前台传值

getWriter方法将Servlet引擎的数据缓冲区包装成PrintWriter类型的字符输出流对象后返回，PrintWriter对象可以直接输出字符文本内容。

Servlet程序向ServletOutputStream或PrintWriter对象中写入的数据将被Servlet引擎获取，Servlet引擎将这些数据当作响应消息的正文，然后再与响应状态行和各响应头组合后输出到客户端。

这个是传参的方法：

 protected void writeToJson(String text)
  {
    try
    {

      protected HttpServletResponse response;
      this.response.setContentType("text/plain;charset=gbk");
      Writer writer = this.response.getWriter();
      writer.write(text);
      writer.flush();
      writer.close();
    } catch (IOException e) {
      e.printStackTrace();
    }
  }

3:   通过名称获取URL参数

function getQueryString(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
        var r = window.location.search.substr(1).match(reg);
        if (r != null) return unescape(r[2]); return null;

  }

4:    window.location.******说明

属性	描述
hash	从井号 (#) 开始的 URL（锚）
host	主机名和当前 URL 的端口号
hostname	当前 URL 的主机名
href	完整的 URL
pathname	当前 URL 的路径部分
port	当前 URL 的端口号
protocol	当前 URL 的协议
search	从问号 (?) 开始的 URL（查询部分）

5：  在方法中创建元素（如：form），并且在方法中完成此元素的功能（如：完成form的表单发送）。

function openWindowSubmitData(results){
 hanUrl=results[0];
 var handleForm = document.createElement("form");   
    handleForm.method="post";   
    handleForm.action=hanUrl;   
    handleForm.target="handleFrameName";
    handleForm.id="handleFormId";
    var inputHtml = document.createElement("input");
    inputHtml.type="hidden";   
    inputHtml.name="infoStr";   
    inputHtml.id="infoStr";
    inputHtml.value=results[1];
    handleForm.appendChild(inputHtml); 
    $('#paddiv').append(handleForm);
    openBox('handleDivId');
 $('#handleFormId').submit();
 $("#handleFormId").remove();
}

6： 网页中遇到      $('div','li') 这个事jQuery中的写法

这个写法没有错误，是选择li里面所有div
要搞清楚$('div','li') 和 $('div , li') 和 $('div  li') 区别
$('div','li')是$(子，父)，是从父节点里找子，而不是找li外面的div
$('div , li')才是找所有的div和li，之间不存在父子关系
$('div li') 是找div里面所有li，包括子级，孙子级，总之就是div里面所有li，不管有几层关系