第三方的AJAX框架submitActionFrom

来源：互联网发布：经典sql语句大全编辑：程序博客网时间：2024/05/14 19:42

下面来说一下工作中用到的一个第三方的AJAX框架，试想一下，如果你想在一个from表单中输入几个参数，下面的table中就能够异步刷新出数据，看起来并没有刷新过页面，而第二个表单在排版上可以很自由，这是怎么做到的呢，我们可以用到一个第三方的AJAX框架submitActionFrom。不多说，下面就是代码.
页面代码：

<%@ page language="java" contentType="text/html; charset=UTF-8"    pageEncoding="UTF-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title><script language="javascript"    src="${pageContext.request.contextPath }/js/function.js"></script><script type="text/javascript"    src="${pageContext.request.contextPath }/js/pub.js"></script><script type="text/javascript"    src="${pageContext.request.contextPath }/js/jquery-1.11.3.min.js"></script><script type="text/javascript">    function test() {        //say();        submitActionWithForm('from2',                '${pageContext.request.contextPath}/submitAction.do', 'from1');    }</script></head><body>    <form id="from1" name="from1" method="post">        <a>你好</a> <input type="text" name="username" value="dddd"> <input            name="button" type="button" onclick="test()" value="点击异步刷新">        <input name="password" type="password" value="123123">    </form>    <form id="from2" name="from2" method="post">        <a href="${pageContext.request.contextPath }/toPageList1.do">用户列表</a>        </table>    </form></body></html>

后台代码很简单：

@RequestMapping(value="submitAction.do",method=RequestMethod.POST )    public String submitAction(HttpServletRequest request){        System.out.println("已进入后台");        String username= (String) request.getParameter("username");        System.out.println(username);        request.setAttribute("msg", "呵呵呵");        return "forward:page1.jsp";    }

最后是引入js文件，pub.js.
如此以来的效果就是我们把整个page1.jsp的内容作为参数覆盖了from2表单中的内容，
在日常的开发中挺有用的，大家不妨仔细看一下pub.js:

function Pub(){  } function submit(formindex) {                document.forms[formindex].submit();}function formsubmitAction(formindex,action) {            document.forms[formindex].action=action;                document.forms[formindex].submit();}function submitform(formname){   var theform =document.forms[formname];   theform.submit();}function reset(formindex){                document.forms[formindex].reset();}////////////////////////////////////////////////////////////////////////////////function checkAll(parent, itemName){  var parentbox = document.getElementsByName(itemName);  for (var i=0; i<parentbox.length; i++){   parentbox[i].checked = parent.checked;   }}function checkItem(child, allName){  var all = document.getElementsByName(allName)[0];  if(!child.checked) all.checked = false;  else  {    var childbox = document.getElementsByName(child.name);    for (var i=0; i<childbox.length; i++)     if(!childbox[i].checked) return;    all.checked = true;  }}function getAllCheckItemValue(storename,removevalue){var obj_all = document.getElementsByTagName("INPUT");var all_value="";for(i=0;i<obj_all.length;i++){if(obj_all[i].type=="checkbox")   if(obj_all[i].checked ){      if(obj_all[i].value!=removevalue)      all_value=all_value+obj_all[i].value+",";   }}var obj = document.getElementById(storename);obj.value=all_value;}function getAllCheckItemValueWithRemove(storename,removevalue){var obj_all = document.getElementsByTagName("INPUT");var all_value="";for(i=0;i<obj_all.length;i++){if(obj_all[i].type=="checkbox")   if(obj_all[i].checked ){      if(obj_all[i].value.indexOf("NULL")==-1){       if(obj_all[i].value!=removevalue)      all_value=all_value+obj_all[i].value+",";   }      }}var obj = document.getElementById(storename);obj.value=all_value;}///////////////////////////////////////////////////////////////////////////////////////////////////////function copyRole(paramname,action){var obj_all = document.getElementsByTagName("INPUT");var value="";for(i=0;i<obj_all.length;i++){if(obj_all[i].type=="radio")   if(obj_all[i].checked ){        value = obj_all[i].value;      }} if(value==""){ return false;}  document.forms[0].action=action+"?"+paramname+"="+value;  document.forms[0].submit();}/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////创建Ajax引擎function newXMLHttpRequest() {  var xmlreq = false;  if (window.XMLHttpRequest) {    xmlreq = new XMLHttpRequest();  } else if (window.ActiveXObject) {    try {      xmlreq = new ActiveXObject("Msxml2.XMLHTTP");    } catch (e1) {      try {        xmlreq = new ActiveXObject("Microsoft.XMLHTTP");      } catch (e2) {        alert(e2);      }    }  }  return xmlreq;}/**req:表示Ajax引擎eleid:表示表单Form2的名称responseXmlHandler:表示请求数据的方法体handleResponse**/function getReadyStateHandler(req, eleid,responseXmlHandler) {  return function () {    if (req.readyState == 4) {      if (req.status == 200) {        responseXmlHandler(req.responseText,eleid);      } else {        alert("HTTP error: "+req.status);        return false;      }    }  }}function getStatisticReadyStateHandler(req, eleid,responseXmlHandler,noteId) {  return function () {    if (req.readyState == 4) {      if (req.status == 200) {        responseXmlHandler(req.responseText,eleid);      } else {        alert("HTTP error: "+req.status);        return false;      }    }else{     var ele11 =document.getElementById(noteId);    ele11.innerHTML="Loading Data";    }  }}/**data:通过ajax的调用服务器响应的数据结果eleid：表示表单Form2的名称*/function handleResponse(data,eleid){      var ele =document.getElementById(eleid);      alert(ele);      ele.innerHTML = data;}function submitAction(domId,action){  var req = newXMLHttpRequest();  var handlerFunction = getReadyStateHandler(req, domId,handleResponse);  req.onreadystatechange = handlerFunction;  req.open("POST", action, false);  req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");  req.send(null);}function submitActionWithNote(domId,action,noteId){  var req = newXMLHttpRequest();  var handlerFunction = getStatisticReadyStateHandler(req, domId,handleResponse,noteId);  req.onreadystatechange = handlerFunction;  req.open("POST", action, true);  req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");  req.send(null);}//组织Form1表单中的数据function getParams2Str(sForm){ var strDiv=""; try {    //var objForm=document.forms[sForm];    var objForm=document.getElementById(sForm);  if (!objForm){      return strDiv;  }  var elt,sName,sValue;  for (var fld = 0; fld < objForm.elements.length; fld++) {      elt = objForm.elements[fld];          sName=elt.name;      sValue=elt.value;      if(fld==objForm.elements.length-1)          strDiv=strDiv + sName+"="+sValue+"";       else             strDiv=strDiv + sName+"="+sValue+"&";   }  alert(strDiv);  }  catch (ex) {    return strDiv;    }   return strDiv;}/*** 传递3个参数  * 参数一：domId:表示表单中Form2的名称  * 参数二：action:访问的URL地址  * 参数三：sForm:表示表单中Form1的名称*/function submitActionWithForm(domId,action,sForm){    alert(action);  //创建Ajax引擎  var req = newXMLHttpRequest();  //处理Ajax的事件处理函数，接收服务器响应的数据  var handlerFunction = getReadyStateHandler(req, domId,handleResponse);  req.onreadystatechange = handlerFunction;  //打开连接，false：同步，必须等待值加载完成之后，才往后执行  req.open("POST", action, false);  req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");   //发送请求，向服务器发送数据(表单Form1中的数据)  var str = getParams2Str(sForm);   req.send(str);}

0 0