使用ajax发送表单数据答案

【问题标题】：Send form data using ajax使用ajax发送表单数据
【发布时间】：2014-03-06 22:27:51
【问题描述】：

我想用 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;

但这不起作用。我不想使用表单数据。

【问题讨论】：

如果您想要一个没有硬编码的通用解决方案，请查看我的答案。

标签： javascript php jquery ajax

【解决方案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);
    });
}

【讨论】：

太棒了！ 第一个解决方案适用于多维数组，例如 ... name="item[0][id]" ！另一方面，.serialize() - 不适用于多维数组！
@Musa - 如何控制表单元素的序列化，以防有多个表单字段但只需要提交几个。例如，可能有一些预先填写的输入，如文档类型或当前日期，可能需要从数据中排除。
@user12379095 你可以禁用你不想序列化的字段

【解决方案2】：

在你的函数中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()

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

我自己编写了一个函数，可以将人们可能想要通过 AJAX 发送的大部分内容转换为 POST 查询的 GET。
以下部分功能可能很有趣：

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

【讨论】：

【解决方案5】：

您发布的代码有两个问题：

首先：<input type="buttom" 应该是 <input type="button"...。这可能只是一个错字，但如果没有button，您的输入将被视为type="text"，因为默认输入类型是text。

第二：在您的function f() 定义中，您使用form 参数认为它已经是jQuery 对象，通过使用form.attr("action")。然后类似地在$.post 方法调用中，您将传递fname 和lname，它们是HTMLInputElements。我相信您想要的是表单的操作 url 和输入元素的值。

尝试以下更改：

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。

【讨论】：

【解决方案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;
}

【讨论】：

【解决方案7】：

你可以试试这个吗：

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

【讨论】：