导出pdf之--终于完成

关于form提交表单和onclick事件的触发

我们在提交的时候会对数据进行验证，在form表单的提交按钮上绑定处理JavaScript事件的问题总结。

<script type="text/javascript">
function check(){
    var password = document.getElementById("password").value;
    var pwd = document.getElementById("pwd").value;
    if(password==pwd){
        alert("验证正确");
        document.getElementById('form1').submit(); //验证成功进行表单提交
    }else{
        alert("验证错误，请重新输入");
        //window.location.href="index.jsp"; 可以将其连接到指定的位置
    }
}
</script>

<form action="deal" method="post" id="form1">
    用 户 名:<input type="text" name="username" id="username">
    密   码:<input type="password" name="password" id="password">
    确认密码:<input type="password" name="pwd" id="pwd">
<input type="button" onclick="check()" value="提交" > 
</form>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20

这种做法是利用按钮(注意不是submit)先进行前台验证，然后在验证成功的情况下进行表单提交，

<script type="text/javascript">
function  check2(){
    var password = document.getElementById("password").value;
    var pwd = document.getElementById("pwd").value;
    if(password==pwd){
        alert("验证正确");
        return true;
    }else{
        alert("验证错误，请重新输入");
        //window.location.href="index.jsp";  
        return false;
    }
}
</script>

<form action="deal.action" method="post" id="form1" onsubmit="return check2();">
    用  户  名:<input type="text" name="username" id="username">
    密    码:<input type="password" name="password" id="password">
    确认密码:<input type="password" name="pwd" id="pwd">
<input type="submit" value="提交" >   
</form>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21

方法二是利用form表单的onsubmit方法进行调用，当进行表单提交时，会先执行onsubmit( )方法，然后栽根据返回的false进行处理，注意这里只有在返回false的情况下不进行提交。

拼装form的形式：

<a href="javascript:downloadFile('${msSend.attachmentAddress }','${fileName }')">${fileName }</a><br>

[javascript] view plain copy

1. function downloadFile(path, fileName) {   
2.         var form = $("<form>");   //定义一个form表单  
3.         form.attr('style', 'display:none');   //在form表单中添加查询参数  
4.         form.attr('target', '');  
5.         form.attr('method', 'post');  
6.         form.attr('action', "${base}messageController/downloadFile");  
7.       
8.         var input1 = $('<input>');  
9.         input1.attr('type', 'hidden');  
10.         input1.attr('name', 'path');  
11.         input1.attr('value', path);  
12.         var input2 = $('<input>');  
13.         input2.attr('type', 'hidden');  
14.         input2.attr('name', 'fileName');  
15.         input2.attr('value', fileName);  
16.         $('body').append(form);  //将表单放置在web中   
17.         form.append(input1);   //将查询参数控件提交到表单上  
18.         form.append(input2);   
19.         form.submit();  
20.      }  

本来renderFile是可以运行的。文件保存到后台，然后二次ajax产生客户端的文件产

如何处理ajax中嵌套一个ajax

在做项目的时候 遇到过第二次了 当我第二次去问'公子'的时候 被吐槽了 原来我以前遇到过 只是忘记了...他老人家竟然还记得...

ajax由于他的异步特性 在第一次请求中的循环中嵌套第二个ajax会数据会读不出来

我这边一共有三种方法 

第一种

描述：如果条件许可,把两次请求都放在服务端处理掉一起发回来,这些就在客户端只有一次ajax了

优点：代码放在服务端,安全性比较,且服务端处理速度较快

缺点：可能请求的数据格式是json,这样在服务端处理JSON数据还需要对JSON进行反序列化,这样就比较麻烦

第二种

描述：是我第一次解决这个问题的时候用的比较蠢的办法,第一次请求的ajax,循环值PUSH到公共变量中去，然后用这个公共变量作为参数去请求第二个ajax

 1  $.ajax({
 2         cache: false,
 3         type: 'POST',
 4         url: url1,
 5         dataType: 'json',
 6         success: function (data) {
 7             var list="";
 8             //用,做隔断发回后台用split取值
 9             for(var i=0;i<data.length-1;i++)
10             {
11                  list+= data[i].id;
12                 if (i != data.length - 1) {
13                     list+= ",";
14                 }
15             }
16             
17              $.ajax({
18                 cache: false,
19                 type: 'POST',
20                 url:url2,
21                 data: { para: list},
22                 dataType: 'json',
23                 success: function(result) {
24                 .......
25                  }
26              })
27         }
28 })            

优点：节省开销

缺点：这样写的确有点蠢...除了蠢之外 我再补充一点 这样做第二次ajax只能是自己去请求自己服务器,如果是别人的服务 不可能给你拆分参数

第三种

描述：使用async ：false。ajax默认async是为ture的，当async: true 时，ajax请求是异步的。但是其中有个问题：ajax请求和其后面的操作是异步执行的，那么当页面还未执行完，就可能已经执行了 ajax请求后面的操作。当async:false时，ajax请求为同步，这时Ajax请求将整个浏览器锁死,直到请求结束

 1 $.ajax({
 2         cache: false,
 3         type: 'POST',
 4         url: url1,
 5         async: false,
 6         dataType: 'json',
 7         success: function (result) {
 8               for(var i=0;i<result.length-1;i++)
 9              {
10                   $.ajax({
11                       cache: false,
12                       type: 'POST',
13                       url: url2,
14                       async: false,
15                       dataType: 'json',
16                       success: function (data) {
17                       ...
18                       }
19                 });
20                }
21          }
22 })

优点：可以按照逻辑顺序正常的写代码

缺点：同步时整个页面是被锁死的

最后，遇到了，二次ajax的输入框，怎么也传递不到后台的情况

<form id="downloadFile" name="downloadFile" action="${ctx}/htmlPdf/downloadPdf"  method="post" enctype="multipart/fom-data">

<input type="hidden" id="fileId" name="fileName" value=""/>

</form>

欲哭无泪啊，怎么getPara("fileName")都是null。

刘向可 告诉我 去掉 method="post" 改用默认的 "get"。