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地址进行数据的获取。
说的比较前笼统，没有细致去了解更多。每天进步一点。