java 前端--form表单4中提交方式

1.通过type=submit提交

    一般表单提交通过type=submit实现，input type="submit",浏览器显示为button按钮，通过点击这个按钮提交表单数据跳转到/url.do

<form   name= "myform" method = 'post'  action = 'user_login_submit.action' onsubmit = "return checkUser();" >
    <table width="100%" border="0">
        <tr>
            <td><input type="text" value="" class="text2" name = "username" id = "userid"/></td>
        </tr>
        <tr>
            <td><input type="password" value="" class="text2" name = "userpass" id = "userpassid"/></td>
        </tr>
        <tr>
             <td>
                <input type="submit" value="提交" class="btn2"  />  
             </td>
        </tr>
    </table>
</form>

<script type="text/javascript">
    function checkUser(){
        var result = document.getElementById("userid").value;
        var password = document.getElementById("userpassid").value;
        if(result == ""  ){
            alert("用户名不能为空");
            return false;
        }
        if(password == ""  ){
            alert("密码不能为空");
            return false;
        }else{
            return true;
        }
    }
</script>

2.js提交form表单

js事件触发表单提交，通过button、链接等触发事件，js调用submit()方法提交表单数据，jquery通过submit()方法

<form id="form" action="/url.do" method="post">
   <input type="text" name="name"/>
</form>
  
js: document.getElementById("form").submit();
jquery: $("#form").submit();

3.ajax异步提交表单数据

采用ajax异步方式，通过js获取form中所有input、select等组件的值，将这些值组成Json格式，通过异步的方式与服务器端进行交互，
一般将表单数据传送给服务器端，服务器端处理数据并返回结果信息等

<form id="form"  method="post">
   <input type="text" name="name" id="name"/>
</form>
 
 
 var params = {"name", $("#name").val()}
 $.ajax({
      type: "POST",
      url: "/url.do",
      data: params,
      dataType : "json",
      success: function(respMsg){
      }
   });
          

4.button按钮提交 点击按钮链接到具体的代码

 
<button id="btn" type="button">Click Me!</button>

  $("#btn").click(
                function() {
                    $.post("json.do", function(data) {
                        var html = "";
                        for (var i = 0; i < data.length; i++) {
                            html += "<tr><td>" + data[i].id + "</td><td>"
                                    + data[i].name + "</td><td>" + data[i].sex
                                    + "</td></tr>";
                        }
                        ;
                        $("#content").html(html);
                    });
                });
    });