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);
                    });
                });
    });