IFrame的使用以及表单的提交方式

生活还是得靠一点一点的琐碎拼接而成，认真对待生活中的每一件事。
IFrame篇：

<select onchange="getContent()" data-placeholder="请选择分类" class="chosen-select form-control" name="serverInfoId" id ="serverInfoId"  autocomplete="off">                        <option value="">请选择分类</option>                         <c:forEach items="${region}" var="r">                            <optgroup label="${r.name }">                        <c:forEach items="${server}" var="s" >                            <c:if test="${r.id==s.serverRegion }">                            <option label="${s.storageIp}">${s.id}</option>                            </c:if>                        </c:forEach>                            </optgroup>                        </c:forEach>                </select><iframe style="width: 100%;height: 80%; border:0; background-color: #FFFFFF" name="upJsp" id="upJsp"></iframe>

在这部分主要是用到了onchange这个函数，当select内容发生变化的时候，执行下面这个函数，里面注释掉的error部分是测试是否执行正确。

function getContent(){    var serverInfoId = $("#serverInfoId").val();    $.ajax({        type:"get",        url:urlpath + "这里是controller的数据获取地址",        async:true,        //cache: false,        data:{serverInfoId:serverInfoId},        dataType: "json",        success:function(data){            if(data.success){                $("#upJsp").attr("src", "这里是jsp页面的地址或者是controller的页面跳转。");            }else{                confirmError(data.msg);            }        },    /*  error:function(XMLHttpRequest, textStatus, errorThrown) {             alert(XMLHttpRequest.status); //返回请求对象状态             alert(XMLHttpRequest.readyState); //请求对象状态码             alert(textStatus);  //错误类型             alert(errorThrown); //异常对象        }*/    });}

XMLHttpRequest.readyState: 状态码的意思0 － （未初始化）还没有调用send()方法1 － （载入）已调用send()方法，正在发送请求2 － （载入完成）send()方法执行完成，已经接收到全部响应内容3 － （交互）正在解析响应内容4 － （完成）响应内容解析完成，可以在客户端调用了XMLHttpRequest.status：http请求的状态1xx - 信息提示2xx - 成功3xx - 重定向4xx - 客户端错误5xx - 服务器错误这里的ajax用的是常规的写法，直接请求controller地址，返回数据进行判定展现。

表单提交方式篇：

目前我知道主要有三种方式，无关post和get传参的区别。①直接在jsp页面用form标签书写，最后用一个type为submit的button提交即可。页面的所有内容都通过所对应的name的值传递到了后台。如下：

<form action="请求controller的地址" class="form form-horizontal"  id="formUpload" enctype="multipart/form-data" method="post" target="ifResult">        <iframe style="display: none;" name="ifResult" id="ifResult"></iframe>

这里的iframe主要是接收请求controller地址后返回过来的数据。target="ifResult"指向了iframe。也可以指向div。②常规的ajax传参。但此方法只能进行字符串的传参。不能进行文件向后台传。具体事例如iframe篇的ajax样式。③运用jquery.form.js插件进行ajax表单的提交。如下;

var optionss = {         dataType:"json",         type:'post',         url: "后台controller获取数据的方法地址",         beforeSubmit:showRequest,          success:showResponse,        clearForm:true    };     $('#formUpload').ajaxForm(optionss);    function showRequest() {    }    function showResponse(data){          alert(data);    }   $("#formUpload").submit(function(){    $(this).ajaxSubmit({        success:function(data){            if(data.success){                alert("上传成功");            }        }    });})

此处主要有两个： $('#formUpload').ajaxForm(optionss)、$("#formUpload").submit(function(){$(this).ajaxSubmit({})});ajaxForm主要是为提交表单做准备。可以看到optionss的一些参数类似于常规ajax里面的那些条件限制。所以说是表单提交之前的一个准备。这里的 formUpload是form表单的id。ajaxSubmit是表单的提交。将id所对应的form表单提交给后台controller地址进行数据的获取。说的比较前笼统，没有细致去了解更多。每天进步一点。