• js:<form></form>中有<a>按钮时不能跳转?


      在开发中,有一个FORM,大概是这样的:

    <script>  
    function formSubmit(){  
       document.getElementById("form1").submit();  
    }  
    </script>  
    <form action="xxx.php" id='form1' method="post">  
    <a href="javascipt:;"><img src="xxx.gif" onclick="formSubmit();"></a>  
    </form>  

    xxx.php里面是header跳转。然后问题就发生了。这个FORM是提交了,但,就是不能跳转。这是为什么呢,为什么呢?

    如果把<a>标签和img标签去掉,换成<input type="button" onclick="formSubmit()">,那就提交成功也跳转成功。为什么用<a>标签就不行呢?

    怀疑是<a>标签的href="javascript:;">的返回而导致了跳转提交的失败,于是把<a>标签去掉,在img标签中加上onclick,果然成功。

    当初采用<a>标签是因为鼠标样式的关系,既然知道这个原因,那么就尝试把href="javascript:;"改成传统的"#",跳转成功(用#的缺点在于,#是锚点,如果啥也不加,那么点击后,页面会自动滚动到顶部,不利于用户体验)

    或者,不使用<a>标签,直接就在<img>标签上加上样式style="cursor:pointer",也可以让鼠标移动到图片就是显示一个小手了。

    form表单只提交值,而不进行页面跳转

    <form action="saveReport.htm" method="post">
        ……
        <input type="submit" value="保存报告"/>
    </form>

    点击submit按钮或直接回车可以将数据提交到saveReport页面,但是提交后也会跳转到saveReport页面

     

    如何做到

    将数据提交到saveReport(form的action指向)页面,但是页面又不进行跳转即保持当前页面不变呢??

    这种需要在load一个页面的时候尤其迫切。

    利用jquery的ajaxSubmit函数以及form的onsubmit函数完成,如下:

    <form id="saveReportForm" action="saveReport.htm" method="post" onsubmit="return saveReport();">
        <input type="submit" value="保存报告"/>
    </form>

    form增加一个id用于在jquery中调用,增加一个onsubmit函数用于submit前自己提交表单

    saveReport对应函数为

    function saveReport() {
        // jquery 表单提交
        $("#showDataForm").ajaxSubmit(function(message) {
              // 对于表单提交成功后处理,message为提交页面saveReport.htm的返回内容
           });
        
        return false; // 必须返回false,否则表单会自己再做一次提交操作,并且页面跳转
    }

    表单提交原理

    1.HTTP是如何提交表单的

    <form>标签的属性enctype设置以何种编码方式提交表单数据。可选的值有三个:

       application/x-www-form-urlencoded:

    这是默认的编码方式。它只处理表单域里的value属性值,采用这种变法方式的表单会将表单域的值处理成URL方式。

      multipart/form-data: 

    这种编码方式会以二进制流的方式来处理表单数据,这中编码方式会把文件域指定的文件内容也封装到请求参数里。

       text/plain:

    这种方式当表单的action属性值为mailto:URL的形式时比较方便,这种方式主要适用于直接通过表单发送邮件。

     

    2.文件标签

       <input type="file" name="myfile">标签用来提交文件。要注意的是,这个标签的value值并不是所选择的文件内容,而是这个文件的完整路径名。正如前面所说的,表单在提交表单时,如果采用默认编码方式,文件的内容是不会被提交的。要提交文件内容要采用multipart/form-data编码方式,这需要在服务器端从提交的二进制流中读取文件内容。

     

    3.从客户端获得输入流

    Request.InputStream能够以二进制数据的方式获取请求主体(包含了表单域内容)。它包含了请求主体的内容。通过这个InputStrem可以读取表单的内容(包括文件内容)。

     

    4.文件上传简介

    通过Request.InputStream 方法获得表单数据流后,我们就可以手动处理表单数据了。

      先来看看form标签是怎么写的:

     

    <form action="upload.ashx"enctype="mutltipart/form-data" method="post">

          <input type="file" name="f" />  

        <input type="text" name="comment"></input>  

          <input type="submit" name="btnUpload " value="上传" />  

    </form>  

      

          当表单的enctype被设置成multipart/form-data后, comment文本域的内容可以通过request.form[“comment”]来获得,文件f的内容只能通过request.inputstream来获得,但是request.inputstream并不是只包含了文件的内容,还包括了comment文本域的内容,看看打印出inputstream的内容:

        ------WebKitFormBoundaryQqpAxgR2Pgik6uyY

          Content-Disposition: form-data; name="f"; filename="hello.txt"

          Content-Type: application/octet-stream

          Hello!!!

          ------WebKitFormBoundaryQqpAxgR2Pgik6uyY

          Content-Disposition: form-data; name="comment"

          文件上传

          ------WebKitFormBoundaryQqpAxgR2Pgik6uyY

          Content-Disposition: form-data; name="buttom"

         上传

         ------WebKitFormBoundaryQqpAxgR2Pgik6uyY--

     

    可以看到提交的表单数据是混合了所有请求参数的数据。 从上面表单数据的内容可以看到,每个请求参数都以----开头的行开始,后面跟的字符不同的浏览器不同。接下来俩行是参数的描述,然后空行后接参数的值(对文件input稍微有所不同,即空行后是附加的文件内容)。表单数据以--开始和结尾的行结束。

    明白了表单数据的格式后,就可以编程解析表单数据了,我们可以把文件从表单数据中解析出来。

     
     
     

     

  • 相关阅读:
    计科4班曾祥刚2016024290
    线程:子线程先循环十次,主线程在循环20次,再子线程循环十次,主线程循环20次,如此循环50次
    java经典程序(11-20)
    java经典程序(1-10)
    String,File和xml
    自写一个双向链表
    i love my girl
    javamail发邮件
    Java反射机制(创建Class对象的三种方式)
    java基础面试题
  • 原文地址:https://www.cnblogs.com/zjfazc/p/2567388.html
Copyright © 2020-2023  润新知