使用ajax提交表单

Posted 2023-02-22

【中文标题】使用ajax提交表单

【英文标题】：submit the form using ajax

【发布时间】：2012-11-16 16:33:59

【问题描述】：

我正在开发一个应用程序（我的大学的一种社交网络）。我需要添加评论（在特定数据库中插入一行）。为此，我的 html 页面中有一个包含各种字段的 HTML 表单。在提交时，我不使用表单的操作，但我使用自定义 javascript 函数在提交表单之前详细说明一些数据。

function sendMyComment() 

    var oForm = document.forms['addComment'];
    var input_video_id = document.createElement("input");
    var input_video_time = document.createElement("input");

    input_video_id.setAttribute("type", "hidden");
    input_video_id.setAttribute("name", "video_id");
    input_video_id.setAttribute("id", "video_id");
    input_video_id.setAttribute("value", document.getElementById('video_id').innerHTML);

    input_video_time.setAttribute("type", "hidden");
    input_video_time.setAttribute("name", "video_time");
    input_video_time.setAttribute("id", "video_time");
    input_video_time.setAttribute("value", document.getElementById('time').innerHTML);

    oForm.appendChild(input_video_id);
    oForm.appendChild(input_video_time);

    document.forms['addComment'].submit();

最后一行将表单提交到正确的页面。它工作正常。但我想使用 ajax 提交表单，但我不知道如何执行此操作，因为我不知道如何捕获表单输入值。谁能帮帮我？

【问题讨论】：

您进行过搜索吗？检查这些链接 ***.com/questions/2530635/… 和 ***.com/questions/1960240/jquery-ajax-submit-form

【参考方案1】：

实际上没有人给出纯粹的javascript 答案（按照 OP 的要求），所以这里是：

function postAsync(url2get, sendstr)    
    var req;
    if (window.XMLHttpRequest) 
        req = new XMLHttpRequest();
         else if (window.ActiveXObject) 
        req = new ActiveXObject("Microsoft.XMLHTTP");
        
    if (req != undefined) 
        // req.overrideMimeType("application/json"); // if request result is JSON
        try 
            req.open("POST", url2get, false); // 3rd param is whether "async"
            
        catch(err) 
            alert("couldnt complete request. Is JS enabled for that domain?\\n\\n" + err.message);
            return false;
            
        req.send(sendstr); // param string only used for POST

        if (req.readyState == 4)  // only if req is "loaded"
            if (req.status == 200)  // only if "OK"
                 return req.responseText ; 
            else     return "XHR error: " + req.status +" "+req.statusText; 
            
        
    alert("req for getAsync is undefined");


var var_str = "var1=" + var1  + "&var2=" + var2;
var ret = postAsync(url, var_str) ;
    // hint: encodeURIComponent()

if (ret.match(/^XHR error/)) 
    console.log(ret);
    return;
    

在你的情况下：

var var_str = "video_time=" + document.getElementById('video_time').value 
     + "&video_id=" + document.getElementById('video_id').value;

【讨论】：

次要的 nitpick - 当它实际同步工作时，您调用了方法“postAsync”（请求的 async 属性设置为“false”）

@Psychemaster，很好。这是根据我实际使用的代码修改的，在某些时候我认为它可以指定为函数的参数。我想我只是从未更改过函数名称的那一部分。

我必须添加 req.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 才能正常工作。

@sevko，是的，这在很大程度上取决于您返回的数据。例如，如果您接收 JSON 格式的文本，您可能必须指定“application/json”。

【参考方案2】：

怎么样

$.ajax(
  type: 'POST',
  url: $("form").attr("action"),
  data: $("form").serialize(), 
  //or your custom data either as object foo: "bar", ... or foo=bar&...
  success: function(response)  ... ,
);

【讨论】：

为什么我们需要序列化它？

在这种情况下您可能需要序列化，以便在与后端代码通信时值可以保持其类型（尽管我相信它们是非常通用的类型）。如果您在后端使用 JS，这可能非常有用（我通常使用 Python 或其他东西，但发现这会有所帮助）。

【参考方案3】：

您可以使用 FormData 捕获表单输入值并通过 fetch 发送它们

fetch(form.action,method:'post', body: new FormData(form));

function send(e,form) 
  fetch(form.action,method:'post', body: new FormData(form));

  console.log('We send post asynchronously (AJAX)');
  e.preventDefault();

<form method="POST" action="myapi/send" onsubmit="send(event,this)">
    <input hidden name="crsfToken" value="a1e24s1">
    <input name="email" value="[e-mail]">
    <input name="phone" value="123-456-789">
    <input type="submit">    
</form>

Look on chrome console>network before 'submit'

【参考方案4】：

您可以将 onclick 函数添加到提交按钮，但您将无法通过按 Enter 提交函数。就我而言，我使用这个：

<form action="" method="post" onsubmit="your_ajax_function(); return false;">
    Your Name <br/>
    <input type="text" name="name" id="name" />
    <br/>
    <input type="submit" id="submit" value="Submit" />
</form>

希望对你有帮助。

【参考方案5】：

这是一个通用的解决方案，它遍历表单中的每个字段并自动创建请求字符串。它正在使用新的 fetch API。自动读取表单属性：method 和action 并抓取表单内的所有字段。支持一维数组字段，如emails[]。可以作为通用解决方案来轻松管理具有单一事实来源的许多（可能是动态的）表单 - html。

document.querySelector('.ajax-form').addEventListener('submit', function(e) 
    e.preventDefault();
    let formData = new FormData(this);
    let parsedData = ;
    for(let name of formData) 
      if (typeof(parsedData[name[0]]) == "undefined") 
        let tempdata = formData.getAll(name[0]);
        if (tempdata.length > 1) 
          parsedData[name[0]] = tempdata;
         else 
          parsedData[name[0]] = tempdata[0];
        
      
    

    let options = ;
    switch (this.method.toLowerCase()) 
      case 'post':
        options.body = JSON.stringify(parsedData);
      case 'get':
        options.method = this.method;
        options.headers = 'Content-Type': 'application/json';
      break;
    

    fetch(this.action, options).then(r => r.json()).then(data => 
      console.log(data);
    );
);

<form method="POST" action="some/url">
    <input name="emails[]">
    <input name="emails[]">
    <input name="emails[]">
    <input name="name">
    <input name="phone">
</form>

【参考方案6】：

使用jQuery 会容易得多，因为这只是大学的任务，您不需要保存代码。

因此，您的代码将如下所示：

function sendMyComment() 
    $('#addComment').append('<input type="hidden" name="video_id" id="video_id" value="' + $('#video_id').text() + '"/><input type="hidden" name="video_time" id="video_time" value="' + $('#time').text() +'"/>');
    $.ajax(
        type: 'POST',
        url: $('#addComment').attr('action'),
        data: $('form').serialize(), 
        success: function(response)  ... ,
    );

【参考方案7】：

我建议对这种类型的需求使用 jquery。试试这个

<div id="commentList"></div>
<div id="addCommentContainer">
    <p>Add a Comment</p> <br/> <br/>
    <form id="addCommentForm" method="post" action="">
        <div>
            Your Name <br/>
            <input type="text" name="name" id="name" />


            <br/> <br/>
            Comment Body <br/>
            <textarea name="body" id="body" cols="20" rows="5"></textarea>

            <input type="submit" id="submit" value="Submit" />
        </div>
    </form>
</div>​

$(document).ready(function()
    /* The following code is executed once the DOM is loaded */

    /* This flag will prevent multiple comment submits: */
    var working = false;
    $("#submit").click(function()
    $.ajax(
         type: 'POST',
         url: "mysubmitpage.php",
         data: $('#addCommentForm').serialize(), 
         success: function(response) 
            alert("Submitted comment"); 
             $("#commentList").append("Name:" + $("#name").val() + "<br/>comment:" + $("#body").val());
         ,
        error: function() 
             //$("#commentList").append($("#name").val() + "<br/>" + $("#body").val());
            alert("There was an error submitting comment");
        
     );
);
);​

【讨论】：

很棒的功能，但 var working = false 自己什么也没做。我假设您打算在条件中使用它来防止多次提交。

【参考方案8】：

我想通过使用fetch() API 添加一个新的纯javascript 方法来执行此操作，在我看来它更简洁。这是一种实现网络请求的现代方式。在您的情况下，由于您已经有一个 form element，我们可以简单地使用它来构建我们的请求。

const formInputs = oForm.getElementsByTagName("input");
let formData = new FormData();
for (let input of formInputs) 
    formData.append(input.name, input.value);


fetch(oForm.action,
    
        method: oForm.method,
        body: formData
    )
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.log(error.message))
    .finally(() => console.log("Done"));

如您所见，它比XMLHttpRequest 使用起来非常简洁且简洁。

【参考方案9】：

如今，使用普通的 'ol JS 实现这一点要容易得多。

const form = document.querySelector('#your-form'),
      data = new URLSearchParams();
for (const pair of new FormData(form)) 
    data.append(pair[0], pair[1]);


fetch(form.action, 
    method: form.method || 'POST',
    body: data,
).then(response => response.json())  //  or .text()
.then(data => 
    console.log('SUBMITTED', data);
);