从表单提交获取 JSON 响应

Get JSON response from Form Submit

本文关键字：响应 JSON 获取 表单提交      更新时间：2023-09-26

我不是前端开发人员，我花了相当多的时间尝试这样做。希望你们能帮助我。我有一个将文件发送到服务器中的 API 的表单，如下所示：

<form id="uploadForm" action="url/upload/" method="post" enctype="multipart/form-data" accept-charset="ISO-8859-1">   
      <div class="inputFileCustom">
        <input type="file" size="45" name="file" id="uploadFiles" accept="application/pdf"/>
        <label for="uploadFiles">
            <div class="ic-bt ic-bt-details ic-bt-text btn btn-border">
            Choose a file
            </div>
        </label>
    </div>
    <input type="submit" value="Upload PDF" class="btn btn-primary" />
</form>

url/upload返回一个 JSON，如下所示：

{ "status": "ok"/"fail" }

我需要两样东西：

  1. 阻止提交重定向到url/upload;
  2. 从服务器获取 JSON 响应，如果成功，则调用loadFiles()函数（该函数已在工作）。

我正在使用javascript来实现loadFiles()功能，但它非常简单。

您可以将 jquery 表单处理程序用作， 

<script>     
    // Attach a submit handler to the form 
  // Attach a submit handler to the form 

$("#uploadForm").submit(function(event) {
    var formData = new FormData();
    formData.append("uploadFiles", $('[name="file"]')[0].files[0]);
    event.stopPropagation();
    event.preventDefault();
    $.ajax({
      url: $(this).attr("action"),
      data: formData,
      processData: false,
      contentType: false,
      type: 'POST',
      success: function(data) {
        alert(data);
        loadFiles()
      }
    });
    return false;
  });
    </script>

请参阅此堆栈溢出问题

看起来你需要使用 Javascript 发布请求。如果您使用的是 JQuery，则可以使用 $.ajax例如：

$.ajax({
    url: '',
    type: '',
    data: {},
    success: function(data){
        console.log(data);
    }
})

使用此选项意味着它不会将页面重定向到窗体之外，以便您可以在同一屏幕上显示成功或错误消息。

有关详细信息，请参阅 http://api.jquery.com/jquery.ajax/

检查这个小提琴：https://jsfiddle.net/41mnz0z1/

$('#uploadForm').submit(function(e) {
    e.preventDefault();
    $.ajax({
        url: '/echo/json/',
        data: $(this).serialize(),
        type: 'POST',
        success: function(data) {
            alert(data);
        }
    });
});

e.preventDefault()阻止浏览器在提交表单后执行标准操作（将您重定向到另一个页面）。 data: $(this).serialize()将表单数据发送到所需的url: 'fileUpload.php'。

它与文件的工作方式相同。

1. Prevent submit to redirect to url/upload    
    <form id="uploadForm" action="url/upload/" method="post" enctype="multipart/form-data" accept-charset="ISO-8859-1" onsubmit ='return checkRegistration()'>   
              <div class="inputFileCustom">
                <input type="file" size="45" name="file" id="uploadFiles" accept="application/pdf"/>
                <label for="uploadFiles">
                    <div class="ic-bt ic-bt-details ic-bt-text btn btn-border">
                    Choose a file
                    </div>
                </label>
            </div>
            <input type="submit" value="Upload PDF" class="btn btn-primary" />
        </form>

     <script>
        function checkRegistration(){
            if(!form_valid){           
                return false;
            }
            return true;
        }
        </script>
相关文章：