无法使用ajax() post提交表单数据

Unable to submit form data using ajax() post

本文关键字:post 提交 表单 数据 ajax      更新时间:2023-09-26

我使用$.ajax()方法提交了一个表单数据,数据包含图像文件。在提交时,我遇到了以下问题:

  1. 表单无法在IE10,11中提交
  2. 虽然在chrome和FF中提交,但ajax()同时执行成功和错误方法
  3. 我能够在chrome和FF中提交数据,但它只显示错误信息
  4. 数据从Chrome和FF提交到DB
下面是我用来提交数据的代码
$.fn.serializeObject = function()
    {
        var o = {};
        var a = this.serializeArray();
        $.each(a, function() {
            if (o[this.name] !== undefined) {
                if (!o[this.name].push) {
                    o[this.name] = [o[this.name]];
                }
                o[this.name].push(this.value || '');
            } else {
                o[this.name] = this.value || '';
            }
        });
        return o;
    };
$(function() {
    $('form').submit(function() {
        var senddata = JSON.stringify($('form').serializeObject());
        $('#result').text(senddata);
        var form_data = new FormData($(this)[0]);
        form_data.append('jsonString', senddata); 
        var settings = {
          "async": true,
          "crossDomain": true,
          "url": "google.com",//sample url
          "method": "POST",       
          "processData": false,
          "contentType": false,
          "headers": {
            "Access-Control-Allow-Origin": "*",
            "cache-control": "no-cache"
          },
          "mimeType": "multipart/form-data",
          "cache": false,
          "data": form_data//,
          //"dataType": "jsonp"
        };
        $.ajax(settings).done(function (data) {
              console.log(data);
            })
            .success(function (data) { 
                alert("submitted");
            })
            .error(function (data){
                alert("failed");
                console.log(data);
            });
        return false;
    });
});
    <!-- language: lang-html -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <form action="">
            <input type="hidden" name="profileTypeId" value="112" maxlength="36" size="12"/>
            First Name:<input type="text" name="firstName" value="Hydtest" maxlength="12" size="12"/> <br/>
            Last Name:<input type="text" name="lastName" value="3SparrowTest" maxlength="36" size="12"/> <br/>
            email:<input type="text" name="emailId" value="jackSparrow@testmail.com" maxlength="36" size="12"/> <br/>
            Address1:<input type="text" name="address1" value="PiratesTest" maxlength="36" size="12"/> <br/>
            <input type="hidden" name="address2" value="PiratesTest" maxlength="36" size="12"/>
             <input type="hidden" name="city" value="caribbean" maxlength="36" size="12"/>        
            Profile Image: <input name="file" type="file" /><br />
            <p><input type="submit" /></p>
            </form>
    <!-- end snippet -->

我认为表单没有提交是因为图片。在把图片提交给服务器之前,你能不能试试base64编码?

这里是使用javascript的base64编码图像的参考:

https://davidwalsh.name/convert-image-data-uri-javascript