无法使用 jquery ajax 发布数据答案

【问题标题】：unable to post data using jquery ajax无法使用 jquery ajax 发布数据
【发布时间】：2016-09-07 06:16:06
【问题描述】：

我可以使用下面的表格获取 json 数据：

<form enctype="multipart/form-data" action="http://46.51.220.101/kookooapi/index.php/IVRSUploadFile/UploadFile" method="post">
    <input id="default_file" name="file" type="file" />
    <input id="account" name="account" type="hidden" value="testing"  />
    <input type="submit" value="Save">                               
</form>

但与 jquery ajax 一起使用时相同的表单会引发错误：501 (Not Implemented)

$('#default_file').change(function (e) {
    //on change event  
    formdata = new FormData();
    if ($(this).prop('files').length > 0)
    {
        file = $(this).prop('files')[0];
        formdata.append("music", file);
    }
});


function hitexternal(e) {
    $.ajax({
        url: "http://46.51.220.101/kookooapi/index.php/IVRSUploadFile/UploadFile",
        type: "POST",
        data: new FormData($("#default_file")[0], {data :{"account":"testing"}}),
        processData: false,
        contentType: 'application/json',
        success: function (response) {
            console.log('resp: ' , response);
        },
        error: function (jqXHR, textStatus, errorMessage) {
            console.log("error:" , errorMessage);
        }
    });
    e.preventDefault();
}

我错过了什么？

【问题讨论】：

我认为你错过了“如何构造 FormData” - developer.mozilla.org/en-US/docs/Web/API/FormData/FormData - 另外，你的 change 函数修改了一些全局变量......似乎没有被使用，所以它基本上没有意义就显示的代码而言

标签： javascript jquery ajax

【解决方案1】：

移除 FormData 作为表单输入的内容类型，并将其转换为键/值对

function hitexternal(e) {
    var formdata =  new FormData($("form")[0]);
    $.ajax({
        url: "http://46.51.220.101/kookooapi/index.php/IVRSUploadFile/UploadFile",
        type: "POST",
        data: formdata ,
        processData: false,
        contentType: 'multipart/form-data', // or set it as false to let jquery chose the right one for you
        success: function (response) {
            console.log('resp: ' , response);
        },
        error: function (jqXHR, textStatus, errorMessage) {
            console.log("error:" , errorMessage);
        }
    });
    e.preventDefault();

【讨论】：

500 错误？这意味着在您的 php 页面中您有一些错误
你能发布你的 php 吗？
尝试设置contentType: 'multipart/form-data', 如果这不起作用，那么您的服务器配置存在一些问题
请编辑您的答案，以便对其他人有所帮助。谢谢

【解决方案2】：

 function hitexternal(e) {
        e.preventDefault();
        var fd=new FormData();  
        fd.append('image',$("#default_file")[0].files[0]);  
        fd.append('account','testing');
        $.ajax({
            url: "http://46.51.220.101/kookooapi/index.php/IVRSUploadFile/UploadFile",
            type: "POST",
            data: fd,
            processData: false,
            contentType: false,
            datatype:'JSON',
            success: function (response) {
                console.log('resp: ' , response);
            },
            error: function (jqXHR, textStatus, errorMessage) {
                console.log("error:" , errorMessage);
            }
        });

    }

让我们试试这段代码

【讨论】：

现在给500 (Internal Server Error)
服务器上传函数中的参数是什么，因为将2个参数发送到函数中..

【解决方案3】：

501 是未实现的 HTTP 状态代码。当服务器不支持所需的设施时，会收到此状态代码。我不知道这是否相关，但通常当在客户端向不同域中的服务器请求 JSON 时，由于同源策略，您需要使用 JSONP 而不是 JSON。好消息是，他们的 API 似乎不支持使用 JSONP。你可以参考这些： How to mock a 501 error from ajax call Why do I get this 501 Not Implemented error? Post data into database via ajax. displays 501 internal error Enable ASP.NET ASMX web service for HTTP POST / GET requests http://www.computerhope.com/issues/ch001020.htm

【讨论】：

【解决方案4】：

你好，这里是答案，请检查

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<script>
    function savedata()
    {
        jQuery.post({
            url:"http://127.0.0.1/hk/ajaxpostaction.php",
            type:"POST",
            data:{"name":document.getElementById('username').value,"address":document.getElementById('address').value},
            success: function(response){
                alert("Post data : "+ result);
            },
            error: function(err){console.log('Error :  ' + err);}
        });
    }
</script>

</head>

<body>
    <form method="post">
            Name : <input type="text" id="username" name="username" />
            Address : <input type="text" id="address" name="address" />
            <input type="button" name="submit" onclick="savedata();" value="submit" />
    </form>
</body>
</html>

感谢和问候雇人

【讨论】：

【解决方案5】：

2020 年更新 jquery $.ajax post 方法的替代答案。花了一整夜之后，我制作了自己的解决方案，并与 php 脚本一起使用。我已经尝试了所有方法，从 $.post、$jqhr、$jqXHR 但没有运气

这个脚本告诉用户是否存在。但这种技术也可以用于其他用途。

jquery 3.5 版 PHP 7.4 版

我观察到数据不会发送到 PHP，即使在 php 脚本中使用 $_GET 也是如此，因此有效的方法是自己制作 url 并发布它！

Javascript 代码

    var email = $('#email').val();
    $.ajax({
            url: 'userexists.php?email='+email,
            method: 'POST',
            dataType:'text',
            contentType: 'application/x-www-form-urlencoded',
            data: {
              'email': email
            },

            // on success response
            success:function(response) {

              $("#result").html(response);

            },

            // error response
            error:function(e) {
              $("#result").html("Some error encountered.");
            }
          })

PHP 代码

<?php
  require 'dbconfig.php';

  $email = $_GET['email'];
  $usr = "SELECT * FROM users WHERE email = '$email' ";
  $results = $connection->query($usr);



  if (mysqli_num_rows($results) == 0) { // if new user . Insert a new record
    echo "fresh";
    echo $email;
  } else {   // If Returned user . update the user record   
    echo "taken";
  }


  $connection->close();
  exit();


?>

【讨论】：