Jquery取form表单中的所有参数

时间:2024-03-08 13:08:31

转载自:https://blog.csdn.net/qq_15204179/article/details/82144522

表单: 

  1.  
    <form class="" id="handle-form">
  2.  
    <input type="text" name="id" id="id" value="">
  3.  
    <input type="text" id="operator" name="operator" >
  4.  
    </form>

第一种获取form中数据的方法:

new FormData($(\'#uploadForm\')[0])用法与$("#handle-form").serialize()差不多,就是 可以上传文件但是对于jquery的要求是, 版本1.8及其以上方可支持;

注意:按钮type非submit,而是buttern,Action 为空或无;

 

var handle-form = $("#handle-form").serialize();
  1.  
    $.ajax({
  2.  
    url: "",
  3.  
    type: "post",
  4.  
    contentType: "application/json; charset=utf-8",
  5.  
    data: $("#handle-form").serialize();,
  6.  
    dataType: "json",
  7.  
    success: function (data) {
  8.  
     
  9.  
    }

 

第二种获取form中数据的方法:

注意:按钮type非submit,而是buttern,Action 为空或无;

  1.  
    var formSerial = {};
  2.  
    $($("#handle-form").serializeArray()).each(function(){
  3.  
    formSerial[this.name] = this.value;
  4.  
    });
  5.  
     
  6.  
    var fromValue = JSON.stringify(formSerial)
  1.  
    $.ajax({
  2.  
    url: "",
  3.  
    type: "post",
  4.  
    contentType: "application/json; charset=utf-8",
  5.  
    data: JSON.stringify(formSerial),
  6.  
    dataType: "json",
  7.  
    success: function (data) {
  8.  
     
  9.  
    }

form表单提交的几种方法:

 一.表单提交

  1.  
    <form action=’/login’ method=’post’ id = "loginForm">
  2.  
     
  3.  
    <input type=’text’ name=’username’ />
  4.  
     
  5.  
    <input type=’password’ name=’password’/>
  6.  
     
  7.  
    <input type=’submit’ value=’登陆\'/>
  8.  
     
  9.  
    </form>

 二.Ajax提交form表单

  1.  
    $(\'#loginForm\').submitForm({
  2.  
    url: "/login",
  3.  
    dataType: "text",
  4.  
    callback: function (data) {
  5.  
     
  6.  
    }
  7.  
    },
  8.  
    before: function () {
  9.  
     
  10.  
    }
  11.  
    }).submit();

三.form表单提交附件

需要设定form的enctype="multipart/form-data"并且添加<input type=’file’>
  1.  
    //jQuery提交
  2.  
    $("#jqueryBtn").click(function(){
  3.  
    $("#loginForm").submit();
  4.  
    })

 

  1.  
    //js提交
  2.  
    $("#jsBtn").click(function(){
  3.  
    document.loginForm.action="RegisterAction.action";
  4.  
    document.loginForm.submit();
  5.  
     
  6.  
    })
  7.  
     
  8.  
    //js提交
  9.  
    $("#jsBtn").click(function(){
  10.  
    document.getElementById(\'\').submit();
  11.  
    })
  12.  
     
  1.  
    //ajax提交
  2.  
    $("#ajaxBtn").click(function() {
  3.  
    var params = $("#loginForm").serialize();
  4.  
    $.ajax( {
  5.  
    type : "POST",
  6.  
    url : "RegisterAction.action",
  7.  
    data : params,
  8.  
    success : function(msg) {
  9.  
    alert("success: " + msg);
  10.  
    }
  11.  
    });
  12.  
    })