成功提交表单后，如何在 jquery ajax 表单中发出警报？答案

【问题标题】：How to - alert ,in jquery ajax form, after successful form submission?成功提交表单后，如何在 jquery ajax 表单中发出警报？
【发布时间】：2016-09-26 13:51:08
【问题描述】：

我正在尝试通过 jquery $.ajax(); 提交 PHP 表单。它成功提交，但是当我试图提醒一条消息时 - alert(SUCCESS); 成功。它不是。有什么猜测吗？

代码：

$.ajax({
  url: 'basic_cms_manager_home_fb_form_submit.php',
  type: 'POST',
  data: formData,
  cache: false,
  dataType: 'json',
  success: function(data, textStatus, jqXHR) {
    if (typeof data.error === 'undefined') {
      // Success so call function to process the form
      alert("SUCCESS");
      console.log('SUCCESS: ' + data.success);
    } else {
      // Handle errors here
      console.log('ERRORS: ' + data.error);
    }
  },
  error: function(jqXHR, textStatus, errorThrown) {
    // Handle errors here
    console.log('ERRORS: ' + textStatus);
  },
  complete: function() {
    // STOP LOADING SPINNER
  }
});

注意：我已经尝试过：console.log(data); n 其他技巧。我的问题是为什么 Alert 不工作，当整个脚本工作时，为什么它给出 parseerror？

【问题讨论】：

把alert(SUCCESS);改成alert("SUCCESS");，或者如果你想提醒data.success的内容，做：alert(data.success)
它已经在那里了，抱歉弄错了。我更新了它。但问题仍然存在。
控制台日志有效吗？您确定data.error 根本不存在于响应中吗？或者它只是空的？（那么它不会是未定义的）。在您的 if 语句之前执行 console.log(data) 并使用输出更新您的问题。
console.log 有效，但它给出了 ParseError。但是，数据已提交。
ParseError 表示服务器没有返回有效的 json。检查浏览器开发工具的网络选项卡以查看响应。

标签： javascript php jquery ajax

【解决方案1】：

SUCCESS 不是一个变量，而是一个字符串。你需要在它周围加上引号，比如alert("SUCCESS");

还弃用了.success 和.error 方法。请改用.done 和.fail，或者您可以简单地执行以下操作

 $.ajax({
    url: 'basic_cms_manager_home_fb_form_submit.php',
    type: 'POST',
    data: formData,
    cache: false,
    dataType: 'json',
    success: function(data)
    {

    alert("SUCCESS");       
    console.log('SUCCESS: ' + data.success);

    },
    error: function(jqXHR, textStatus, errorThrown)
    {
    // Handle errors here
    console.log('ERRORS: ' + textStatus);
    },
    complete: function()
    {
    // STOP LOADING SPINNER
    }
    });

另一件事

Typeof null 返回一个对象，因此如果data.errors 为空，您的检查将失败。考虑做

if (!data.errors) {
    ...
}

如果您想坚持使用您的代码。

【讨论】：

它已经在那里了，抱歉弄错了。我更新了它。但问题仍然存在。
评论数据类型："json" 比检查
您是否在成功通话中看到了 console.log(data)。
@ShubhamKhatri 我想知道，为什么你看不到代码？ n 停止将我的问题标记为重复，如果你不能解决或帮助，不要给我制造麻烦。好的。

【解决方案2】：

确保data 是有效的JSON
data.error 来自服务器，它可能不是你想象的那样。使用console.log 确定其真实值。此外，将其更改为更有意义的内容，例如

data.status => '成功'或'失败'

【讨论】：

【解决方案3】：

简单。删除 - dataType:'json'; & 使用 - formdata 发送所有数据。

<?php
/**
 * Created by PhpStorm.
 * User: Taz
 * Date: 9/29/2016
 * Time: 5:37 PM
 */
?>
<html>
<head>
    <title>Ajax Image Upload Using PHP and jQuery</title>
    <link rel="stylesheet" href="style.css" />
    <link href='http://fonts.googleapis.com/css?family=Roboto+Condensed|Open+Sans+Condensed:300' rel='stylesheet' type='text/css'>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script type="text/javascript">

        $(document).ready(function (e) {
            $("#uploadimage").on('submit',(function(e) {
                e.preventDefault();
                $("#message").empty();
                $('#loading').show();
                $.ajax({
                    url: "ajax_upload_image_submit.php", // Url to which the request is send
                    type: "POST",                       // Type of request to be send, called as method
                    data: new FormData(this),           // Data sent to server, a set of key/value pairs (i.e. form fields and values)
                    contentType: false,                 // The content type used when sending data to the server.
                    cache: false,                       // To unable request pages to be cached
                    processData:false,                  // To send DOMDocument or non processed data file it is set to false
                    success: function(data)             // A function to be called if request succeeds
                    {
                        $('#loading').hide();
                        $("#message").html(data);
                    }
                });
            }));

// Function to preview image after validation
            $(function() {
                $("#file").change(function() {
                    $("#message").empty(); // To remove the previous error message
                    var file = this.files[0];
                    var imagefile = file.type;
                    var match= ["image/jpeg","image/png","image/jpg"];
                    if(!((imagefile==match[0]) || (imagefile==match[1]) || (imagefile==match[2])))
                    {
                        $('#previewing').attr('src','noimage.png');
                        $("#message").html("<p id='error'>Please Select A valid Image File</p>"+"<h4>Note</h4>"+"<span id='error_message'>Only jpeg, jpg and png Images type allowed</span>");
                        return false;
                    }
                    else
                    {
                        var reader = new FileReader();
                        reader.onload = imageIsLoaded;
                        reader.readAsDataURL(this.files[0]);
                    }
                });
            });
            function imageIsLoaded(e) {
                $("#file").css("color","green");
                $('#image_preview').css("display", "block");
                $('#previewing').attr('src', e.target.result);
                $('#previewing').attr('width', '250px');
                $('#previewing').attr('height', '230px');
            };
        });


    </script>

    <style>


        body {
            font-family: 'Roboto Condensed', sans-serif;
        }
        h1
        {
            text-align: center;
            background-color: #96DAD1;
            height: 70px;
            color: rgb(95, 89, 89);
            margin: 0 0 -29px 0;
            padding-top: 14px;

            font-size: 35px;
        }
        .main {
            position: absolute;
            top: 50px;
            left: 20%;
            width: 450px;
            height:530px;
            border: 2px solid gray;

        }
        .main label{
            color: rgba(0, 0, 0, 0.71);
            margin-left: 60px;
        }
        #image_preview{
            position: absolute;
            font-size: 30px;
            top: 100px;
            left: 100px;
            width: 250px;
            height: 230px;
            text-align: center;
            line-height: 180px;
            font-weight: bold;
            color: #C0C0C0;
            background-color: #FFFFFF;
            overflow: auto;
        }
        #selectImage{
            padding: 19px 21px 14px 15px;
            position: absolute;
            bottom: 0px;
            width: 414px;
            background-color: #EDFCFF;

        }
        .submit{
            font-size: 16px;
            background: linear-gradient(#ffbc00 5%, #ffdd7f 100%);
            border: 1px solid #e5a900;
            color: #4E4D4B;
            font-weight: bold;
            cursor: pointer;
            width: 300px;
            border-radius: 5px;
            padding: 10px 0;
            outline: none;
            margin-top: 20px;
            margin-left: 15%;
        }
        .submit:hover{
            background: linear-gradient(#ffdd7f 5%, #ffbc00 100%);
        }
        #file {
            color: red;
            padding: 5px;
            border: 5px solid #96DAD1;
            background-color: #96DAD1;
            margin-top: 10px;


            margin-left: 15%;
            width: 72%;
        }
        #message{
            position:absolute;
            top:120px;
            left:815px;
        }
        #success
        {
            color:green;
        }
        #invalid
        {
            color:red;
        }
        #line
        {
            margin-top: 274px;
        }
        #error
        {
            color:red;
        }
        #error_message
        {
            color:blue;
        }
        #loading
        {
            display:none;
            position:absolute;
            top:50px;
            left:850px;
            font-size:25px;
        }



    </style>





</head>
<body>
<div class="main">
    <h1>Facebook Update</h1><br/>
    <hr>
    <form id="uploadimage" action="" method="post" enctype="multipart/form-data">
        <div id="image_preview"><img id="previewing" src="noimage.png" width="250" height="230" /></div>
        <hr id="line">
        <div id="selectImage">


            <label>Select Your Image</label><br/>
            <input type="file" name="file" id="file" required />

            <label>FB Link</label><br/>
            <input type="text" name="fb_link" id="fb_link" required />




            <label>Show/Hide Status</label><br/>
            <select name="show_fb" class="myselect" required>
                <option value="">---Select---</option>
                <option value="1">Show</option>
                <option value="0">Hide</option>
            </select>




            <input type="submit" value="Upload" class="submit" />
        </div>
    </form>
</div>
<h4 id='loading' >loading..</h4>
<div id="message"></div>
</body>
</html>

【讨论】：