无法通过jQuery中的其他参数传递formData

时间:2018-06-21 20:24:31

标签: javascript php jquery ajax

我正在尝试将formData以及其他参数传递给PHP脚本。

使用$ .post方法,出现了“非法调用”错误。所以我放弃了$ .post方法,转而使用了$ .ajax方法。

如下:

import socket

host = ''
skServer = socket.socket(socket.AF_INET,socket.SOCK_STREAM)
skServer.bind((host,2525))
skServer.listen(10)
print "Server currently active"

while True:
    Content,Address = skServer.accept()
    print Address
    files = "C:\Users\Name_user\Desktop\Networking\Send_Receive/"
    fUploadFile = open(files+str('tmp.dms'),"rb")
    sRead = fUploadFile.read(1024)

    fUploadFile2 = open(files+str('tmp.seq'),"rb")
    sRead2 = fUploadFile2.read(1024)

    fUploadFile3 = open(files+str('tmp.bsp'),"rb")
    sRead3 = fUploadFile3.read(1024)

    while sRead:
        Content.send(sRead)
        sRead = fUploadFile.read(1024)

        Content.send(sRead2)
        sRead2 = fUploadFile2.read(1024)

#       Content.send(sRead3)   
#       sRead3 = fUploadFile3.read(1024)

    Content.close()
    print "Sending is over"
    break


skServer.close()

在PHP方面,我试图像这样获取参数对象:

$('#uploadBtn').on('click', function()
{
  var formData = new FormData($('#uploadfile')[0]); // the form data is uploaded file
  var booking = $('#bookingNum').val();
  var partner = $('#partnerCode').val();

  var parameters =
  {
    formData:formData,
    booking:booking,
    partner:partner
  } 

  $.ajax({
    url: 'process/customer.php',
    data: parameters,  // <- this may be wrong
    async: false,
    contentType: false,
    processData: false,
    cache: false,
    type: 'POST',
    success: function(data)
    {
      console.log(data);
    },
    error: function(jqHHR, textStatus, errorThrown)
    {
      console.log('fail: ' + errorThrown);
    }
  });
});

基本上,我正在上传要保存到目录的文件。但是问题是,我无法将任何东西发送到PHP端。我收到此警告:

“ jquery.js:2 [不推荐使用]不赞成在主线程上使用同步XMLHttpRequest,因为它对最终用户的体验有不利影响。要获得更多帮助,请检查https://xhr.spec.whatwg.org/。”

我需要能够将“ parameters”对象发送到PHP脚本,然后对其进行处理。

如何使用$ .ajax方法实现这一目标?那么如何在PHP端一次访问formData?

2 个答案:

答案 0 :(得分:1)

参数是您POSTing的对象。键值对将基于其属性。尝试像$_POST['formData']$_POST['booking']这样访问它们。

还...请重做代码以删除async:false ... TBH,这绝对不应该放在jQuery中,这绝对是可怕的。别难过,这是每个新手在首次使用ajax(包括我自己)时尝试的第一件事。您将导致UI线程在整个持续时间内挂起,从而阻止了呼叫期间所有用户的交互。

编辑 我没有意识到您首先尝试发布文件,因此这不是一个完整的答案,因为我认为您没有正确访问它。但是,此答案的重要部分是没有parameters的{​​{1}}索引(这就是为什么连您的回声“ hello”都不会回来的原因。)

如果您发布的对象看起来像

$_POST

他们将通过

进入php
{
  key1 : "value1",
  key2 : "value2"
}

注意,发布到服务器的文件通常位于$ _FILES超全局文件中。 (不知道AJAX是否会改变它,但我想不会)

EDIT2

将两者结合起来……这是一般的想法。让您的html + JS看起来像...

$_POST['key1'];//"value1";
$_POST['key2'];//"value2";
$('#form').on('submit', function()
{
  var form_data = new FormData();

  form_data.append("file", document.getElementById('fileInput').files[0]);
  var booking = $('#bookingNum').val();
  var partner = $('#partnerCode').val();

  form_data.append("booking ",booking); 
  form_data.append("partner",partner);  

  $.ajax({
    url: 'process/customer.php',
    method:"POST",
    data: form_data,
    contentType: false,
    cache: false,
    processData: false,
    success: function(data)
    {
      console.log(data);
    },
    error: function(jqHHR, textStatus, errorThrown)
    {
      console.log('fail: ' + errorThrown);
    }
  });
  
  return false;//prevent default form submission
});

并尝试使用

这样的php代码
<form id='form'>
  <input type='file' id='fileInput' />
  <label for='bookingNum'>Booking Num: </label>
  <input type='text' id='bookingNum' name='bookingNum' />
  <label for='partnerCode'>Partner Code:</label>
  <input type='text' id='partnerCode' name='partnerCode' />
  <button id='uploadBtn'>Submit</button>
</form>

答案 1 :(得分:0)

$('#uploadBtn').on('click', function()
{
  var form_data = new FormData();

  form_data.append("file", document.getElementById('ID').files[0]);
  var booking = $('#bookingNum').val();
  var partner = $('#partnerCode').val();

  form_data.append("booking ",booking); 
  form_data.append("partner",partner);  

  $.ajax({
    url: 'process/customer.php',
    method:"POST",
    data: form_data,
    contentType: false,
    cache: false,
    processData: false,
    success: function(data)
    {
      console.log(data);
    },
    error: function(jqHHR, textStatus, errorThrown)
    {
      console.log('fail: ' + errorThrown);
    }
  });
});