使用ajax发送表单数据
我想用ajax发送表单中的所有输入。我有一个这样的表单。
在.js文件中，我们有以下代码：
function f (form ,fname ,lname ){ att=form.attr("action") ; $.post(att ,{fname : fname , lname :lname}).done(function(data){ alert(data); }); return true;
但这不起作用。我不想使用表格数据。
就我们想要发送具有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); }); }
在你的函数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（）
$.ajax({ url: "target.php", type: "post", data: "fname="+fname+"&lname="+lname, }).done(function(data) { alert(data); });
我自己编写了一个函数，可以将大多数想要通过AJAX发送的东西转换为POST查询的GET。
以下部分function可能会引起关注：
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，但其他部分没有评论。 我不能保证其中没有错误：
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
您发布的代码有两个问题：
首先： 应为 这可能只是一个拼写错误但没有button您的输入将被视为type="text"因为默认输入类型是text 。
第二：在你的function f()定义中，你使用form参数认为它已经是一个jQuery对象，使用form.attr("action") 。 然后类似地在$.post方法调用中，您传递的是fname和lname ，它们是HTMLInputElement 。 我相信你想要的是form的动作url和input元素的值。
尝试以下更改：
HTML
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; }
这是小提琴 。
你能试试这个：
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; }
您可以使用jquery的serialize方法来获取表单值。 试试这样吧
function f( form ){ var formData = $(form).serialize(); att=form.attr("action") ; $.post(att, formData).done(function(data){ alert(data); }); return true; }