使用ajax發送表單數據

Question

我想用ajax發送表單中的所有輸入。我有一個這樣的表單。

<form action="target.php" method="post" > 
    <input type="text" name="lname" /> 
    <input type="text" name="fname" /> 
    <input type="buttom" name ="send" onclick="return f(this.form ,this.form.fname ,this.form.lname) " > 
</form> 

而且在.js文件中，我們有以下代碼：

function f (form ,fname ,lname){ 
    att=form.attr("action") ; 
    $.post(att ,{fname : fname , lname :lname}).done(function(data){ 
     alert(data); 
    }); 
    return true; 

但這不是working.i不想使用表格數據。

Answer 1

據我們希望把所有具有name屬性的表單輸入字段，可以爲各種形式的做到這一點，不管字段名稱如何：

第一個解決方案

function submitForm(form){ 
    var url = form.attr("action"); 
    var formData = {}; 
    $(form).find("input[name]").each(function (index, node) { 
     formData[node.name] = node.value; 
    }); 
    $.post(url, formData).done(function (data) { 
     alert(data); 
    }); 
} 

第二種解決：在這個解決方案，您可以創建輸入值的數組：

function submitForm(form){ 
    var url = form.attr("action"); 
    var formData = $(form).serializeArray(); 
    $.post(url, formData).done(function (data) { 
     alert(data); 
    }); 
} 

Answer 2

$.ajax({ 
    url: "target.php", 
    type: "post", 
    data: "fname="+fname+"&lname="+lname, 
}).done(function(data) { 
    alert(data); 
}); 

Answer 3

你可以試試這個：

function f(){ 
fname = $("input[name='fname']").val(); 
lname = $("input[name='fname']").val(); 
att=form.attr("action") ; 
$.post(att ,{fname : fname , lname :lname}).done(function(data){ 
alert(data); 
}); 
return true; 
} 

Answer 4

在你的函數form是一個DOM對象，爲了使用attr()你需要將其轉換爲jQuery對象。

function f(form, fname, lname) { 
    action = $(form).attr("action"); 
    $.post(att, {fname : fname , lname :lname}).done(function (data) { 
     alert(data); 
    }); 
    return true; 
} 

隨着.serialize()

function f(form, fname, lname) { 
    action = $(form).attr("action"); 
    $.post(att, $(form).serialize()).done(function (data) { 
     alert(data); 
    }); 
    return true; 
} 

此外，您可以使用.serialize()

Answer 5

我寫我自己，轉換大部分的東西功能的一個可能希望通過AJAX發送GET的POST查詢。
繼功能的一部分可能會感興趣：

if(data.tagName!=null&&data.tagName.toUpperCase()=="FORM") { 
    //Get all the input elements in form 
    var elem = data.elements; 
    //Loop through the element array 
    for(var i = 0; i < elem.length; i++) { 
     //Ignore elements that are not supposed to be sent 
     if(elem[i].disabled!=null&&elem[i].disabled!=false||elem[i].type=="button"||elem[i].name==null||(elem[i].type=="checkbox"&&elem[i].checked==false)) 
     continue; 
     //Add & to any subsequent entries (that means every iteration except the first one) 
     if(data_string.length>0) 
     data_string+="&"; 
     //Get data for selectbox 
     if (elem[i].tagName.toUpperCase() == "SELECT") 
     { 
     data_string += elem[i].name + "=" + encodeURIComponent(elem[i].options[elem[i].selectedIndex].value) ; 
     } 
     //Get data from checkbox 
     else if(elem[i].type=="checkbox") 
     { 
     data_string += elem[i].name + "="+(elem[i].value==null?"on":elem[i].value); 
     } 
     //Get data from textfield 
     else 
     { 
     data_string += elem[i].name + (elem[i].value!=""?"=" + encodeURIComponent(elem[i].value):"="); 
     } 
    } 
    return data_string; 
    } 

它不需要jQuery的，因爲我不使用它。但我確定jQuery的$.post接受字符串作爲seconf參數。

這裏是整個功能，其他部分雖然沒有評論。我不能承諾有沒有錯誤：

function ajax_create_request_string(data, recursion) { 
    var data_string = ''; 
    //Zpracovani formulare 
    if(data.tagName!=null&&data.tagName.toUpperCase()=="FORM") { 
    //Get all the input elements in form 
    var elem = data.elements; 
    //Loop through the element array 
    for(var i = 0; i < elem.length; i++) { 
     //Ignore elements that are not supposed to be sent 
     if(elem[i].disabled!=null&&elem[i].disabled!=false||elem[i].type=="button"||elem[i].name==null||(elem[i].type=="checkbox"&&elem[i].checked==false)) 
     continue; 
     //Add & to any subsequent entries (that means every iteration except the first one) 
     if(data_string.length>0) 
     data_string+="&"; 
     //Get data for selectbox 
     if (elem[i].tagName.toUpperCase() == "SELECT") 
     { 
     data_string += elem[i].name + "=" + encodeURIComponent(elem[i].options[elem[i].selectedIndex].value) ; 
     } 
     //Get data from checkbox 
     else if(elem[i].type=="checkbox") 
     { 
     data_string += elem[i].name + "="+(elem[i].value==null?"on":elem[i].value); 
     } 
     //Get data from textfield 
     else 
     { 
     if(elem[i].className.indexOf("autoempty")!=-1) { 
      data_string += elem[i].name+"="; 
     } 
     else 
      data_string += elem[i].name + (elem[i].value!=""?"=" + encodeURIComponent(elem[i].value):"="); 
     } 
    } 
    return data_string; 
    } 
    //Loop through array 
    if(data instanceof Array) { 
    for(var i=0; i<data.length; i++) { 
     if(data_string!="") 
     data_string+="&"; 
     data_string+=recursion+"["+i+"]="+data[i]; 
    } 
    return data_string; 
    } 
    //Loop through object (like foreach) 
    for(var i in data) { 
    if(data_string!="") 
     data_string+="&"; 
    if(typeof data[i]=="object") { 
     if(recursion==null) 
     data_string+= ajax_create_request_string(data[i], i); 
     else 
     data_string+= ajax_create_request_string(data[i], recursion+"["+i+"]"); 
    } 
    else if(recursion==null) 
     data_string+=i+"="+data[i]; 
    else 
     data_string+=recursion+"["+i+"]="+data[i]; 
    } 
    return data_string; 
} 

Answer 6

你可以使用jQuery的序列化方法來獲取表單值。試着這樣

<form action="target.php" method="post" > 
<input type="text" name="lname" /> 
<input type="text" name="fname" /> 
<input type="buttom" name ="send" onclick="return f(this.form) " > 
</form> 

function f(form){ 
    var formData = $(form).serialize(); 
    att=form.attr("action") ; 
    $.post(att, formData).done(function(data){ 
     alert(data); 
    }); 
    return true; 
} 

Answer 7

你已經發布的代碼有兩個問題：

第一：<input type="buttom"應該<input type="button"...。這可能只是一個錯字，但沒有button您的輸入將被視爲type="text"，因爲默認輸入類型爲text。

第二：在您的function f()定義中，您使用form參數，認爲它已經是jQuery對象，使用form.attr("action")。然後同樣在$.post方法調用中，您將通過fname和lname，它們是HTMLInputElement s。我相信你想要的是表單的動作url和input元素的值。

嘗試以下變化：

HTML

<form action="/echo/json/" method="post"> 
    <input type="text" name="lname" /> 
    <input type="text" name="fname" /> 

    <!-- change "buttom" to "button" --> 
    <input type="button" name="send" onclick="return f(this.form ,this.form.fname ,this.form.lname) " /> 
</form> 

的JavaScript

function f(form, fname, lname) { 
    att = form.action; // Use form.action 
    $.post(att, { 
     fname: fname.value, // Use fname.value 
     lname: lname.value // Use lname.value 
    }).done(function (data) { 
     alert(data); 
    }); 
    return true; 
} 

Here is the fiddle。