前端后端交互的方法

前端后端交互的方法：

前端给后端：

1.form通过name来传送 所有value的值到 form的action属性的方法中  

form的常用提交方法：(转载自：http://blog.csdn.net/itmyhome1990/article/details/41849175)

<form id="myform" name="myform" method="post" onsubmit="return sumbitTest();"   

      action="RegisterAction.action">  

    <table>  

        <tr>  

            <td>姓名:</td>  

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

        </tr>  

        <tr>  

            <td>性别:</td>  

            <td>  

                <input type="radio" name="sex" value="1"> 男  

                <input type="radio" name="sex" value="0"> 女  

            </td>  

        </tr>  

        <tr>  

            <td>年龄:</td>  

            <td>  

                <select name="age">  

                    <option value="20">20</option>  

                    <option value="21">21</option>  

                    <option value="22">22</option>  

                </select>  

            </td>  

        </tr>  

        <tr>  

            <td colspan="2">  

                <input type="submit" value="Submit普通提交">  

                <input type="button" id="ajaxBtn" value="AJAX提交" />  

                <input type="button" id="jqueryBtn" value="jQuery提交" />  

                <input type="button" id="jsBtn" value="JS提交" />  

                <input type="submit" value="onSubmit提交" />  

            </td>  

        </tr>  

    </table>  

</form>  

<script type="text/javascript">  

    $(function() {  

        //ajax提交  

        $("#ajaxBtn").click(function() {  

            var params = $("#myform").serialize();  

            $.ajax( {  

                type : "POST",  

                url : "RegisterAction.action",  

                data : params,  

                success : function(msg) {  

                    alert("success: " + msg);  

                }  

            });  

        })  

  

        //jQuery提交  

        $("#jqueryBtn").click(function(){  

            $("#myform").submit();  

        })  

  

        //js提交   

        $("#jsBtn").click(function(){  

            document.myform.action="RegisterAction.action";     

            document.myform.submit();     

        })  

    })  

    function sumbitTest(){  

        return true; //return false则不会提交   

    }  

</script>  

2.ajax传值(转载自：http://blog.csdn.net/coffeesmile/article/details/20992829)

  $.ajax({  

        type: "POST",  

        url: "../order/orderCancel.action", //
 调用后端方法从而达到前后端互动效果

        data: {"orderId":orderId,"commant":commant},
   // 为url地址获取参数

        dataType:"json",
  // 规定为json数据

        async:false,  

        cache:false,
  

        success: function(data){  

            var member = eval("("+data+")"); //包数据解析为json 格式                                                            

            if(member.success=="true"){  

                flag = true;  

            }else if(member.success=="false") {  

                alert(member.info);  

            }  

        },  

        error: function(json){  

            alert("失败提交");  

        }  

    });  

ajax也可以和form表单进行关联：使用

$(

'#yourformid'

).serialize()将整个form表单提交

3.使用a标签的href属性来获得后台地址来传值，可以将页面数据获取然后传给后台

<a href='your url?your params'>

4.用window.open(url)也可以达到相同效果

后端传值给页面方法：

1.通过request(或者四大作用域)和跳转页面来传值，如：

public class test(){

      int i= 5;

      ......等等数据

    return  页面名称

}

2.用json工具

 getResponse().getWriter().write(jsonList(page,strFields));  //可以大量数据传送给前端