第三方的AJAX框架submitActionFrom

最新推荐文章于 2021-08-05 16:09:01 发布

红叶飘落我心寂寞

最新推荐文章于 2021-08-05 16:09:01 发布

阅读量629

点赞数

分类专栏： java基础随笔文章标签： ajax ajax框架

本文链接：https://blog.csdn.net/oxhomehappy/article/details/50523313

版权

随笔同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

java基础

3 篇文章 0 订阅

订阅专栏

下面来说一下工作中用到的一个第三方的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);

}