欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

一个简单的AJAX异步通信实例

程序员文章站 2022-03-06 13:57:39
...
textarea失去焦点时异步提交

index.jsp关键代码如下:

第一步：页面编写 其他控件也可，不限于textarea

<s:form action="" method="post">
         <div >
           <p > 今日心情：</p>
       <p >
        <textarea id="ta" name="signature"  onblur="ajax_submit();" ><s:property value="user.signature"/>  //siganature 是user对象的一个属性
        </textarea>
       </p>
      </div>
  </s:form>

第二步：在上述页面<head></head>之间加入如下js
<script language="javascript">

//定义一个变量用于存放XMLHttpRequest对象   
   var xmlHttp;   
   var deleteStatus ;//存放页面表格删除状态
   //改函数用于创建一个XMLHttpRequest对象   
   function createXMLHttpRequest(){   
       if(window.ActiveXObject){   
           xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");   
       }else if(window.XMLHttpRequest){   
           xmlHttp = new XMLHttpRequest();   
       }   
   }   

   //这是一个启动AJAX异步通信的方法   
   function ajax_submit(){   
      
       //创建一个XMLHttpRequest对象   
       createXMLHttpRequest();   

       //将状态绑定到一个函数   
       xmlHttp.onreadystatechange=processAjax;   
       //通过POST方法向指定的URL建立服务器的调用   
       var url="<%=basePath%>/workPlanAction!deleteWorkPlanDetail.action?dto.workplanDetailId="+detailid;   
       xmlHttp.open("POST",url,true);  

       //发送请求   
       xmlHttp.send(null);   
   }   
   //这是一个用来处理状态改变的函数   
   function processAjax(){   
       //定义一个变量用于存放 从服务器返回的响应结果   
       var responseContext="";   
       if(xmlHttp.readyState==4){   
           if(xmlHttp.status==200){   
               responseContext = xmlHttp.responseText;    
             // document.getElementById("ta").value=responseContext;   
           }   
       }   
   }  

</script>



第三步：编写action类 关键代码

//待导入包省略

public class UpdateSignatureAction extends ActionSupport implements ServletRequestAware{

public String execute(){

String responseText="";   
        //读取请求的参数   
        HttpServletRequest request = ServletActionContext.getRequest();   
        responseText=request.getParameter("signature"); 
        responseText=new String(responseText.getBytes("ISO-8859-1"),"GBK"); //去掉此行，会出现乱码
  HttpServletResponse response = ServletActionContext.getResponse();   
  response.setContentType("text/plain");//设置输出为文字流  
        response.setCharacterEncoding("UTF-8");   
        PrintWriter out = response.getWriter();   

        //直接输出响应的内容   
        out.println(responseText);   
        out.flush();   
        out.close(); 

其他将签名持久化到数据库的操作略去

return null;

}

}

 

相关标签： Ajax JavaScript Microsoft JSP

上一篇： webpack单入口和多入口配置

下一篇： 多页应用 Webpack4 配置优化与踩坑记录

推荐阅读