Fatal编程技术网
  • javascript/
  • Javascript 在成功提交表单后，如何在jQueryAjax表单中发出警告？

Javascript 在成功提交表单后，如何在jQueryAjax表单中发出警告？

javascript php jquery ajax

Javascript 在成功提交表单后，如何在jQueryAjax表单中发出警告？,javascript,php,jquery,ajax,Javascript,Php,Jquery,Ajax,我正试图通过jquery$.ajax（）提交一个PHP表单。其提交成功，但当我试图提醒消息时-alert（成功）关于成功。不是。猜猜看 代码： $.ajax({ url: 'basic_cms_manager_home_fb_form_submit.php', type: 'POST', data: formData, cache: false, dataType: 'json', success: function(data, textStatus, jqXHR) {

我正试图通过
jquery$.ajax（）提交一个PHP表单。其提交成功，但当我试图提醒消息时-
alert（成功）关于成功。不是。猜猜看

代码：


$.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（数据）；n其他技巧。我的问题是，当整个脚本都在工作时，为什么警报不工作？为什么它会给出parseerror？
成功不是一个变量，而是一个字符串。你需要在它周围加上引号，比如
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
为null，则检查将失败。考虑做< /P>

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


如果您想继续使用代码


  • 确保
    数据
    是有效的JSON
    • 

  • 数据。错误
    来自服务器，它可能不是您所认为的。使用
    console.log
    确定其真实值。此外，将其更改为更有意义的内容，如
    • 
data.status=>“成功”或“失败”
    

    简单。Remove-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>

    

    
使用PHP和jQuery上传Ajax图像
$（文档）.ready（函数（e）{
$（“#uploadimage”）。在（'submit'，（函数（e）上{
e、 预防默认值（）；
$（“#消息”）.empty（）；
$（“#加载”）.show（）；
$.ajax({
url:“ajax\u upload\u image\u submit.php”，//请求发送到的url
类型：“POST”，//要发送的请求类型，称为方法
数据：newformdata（this），//发送到服务器的数据，一组键/值对（即表单字段和值）
contentType:false，//向服务器发送数据时使用的内容类型。
cache:false，//无法请求缓存页面
processData:false，//若要发送DOMDocument或未处理的数据文件，将其设置为false
success:function（data）//请求成功时要调用的函数
{
$（“#加载”）.hide（）；
$（“#消息”）.html（数据）；
}
});
}));
//用于在验证后预览图像的函数
$（函数（）{
$（“#文件”）.change（函数（）{
$（“#message”）.empty（）；//删除以前的错误消息
var file=this.files[0]；
var imagefile=file.type；
var match=[“image/jpeg”、“image/png”、“image/jpg”]；
如果（！（（imagefile==match[0]）| |（imagefile==match[1]）| |（imagefile==match[2]））
{
$（'#previewing'）.attr（'src'，'noimage.png'）；
$（“#message”）.html（“
    请选择有效的图像文件”
    “+”注意“+”仅允许jpeg、jpg和png图像类型”）；
返回false；
}
其他的
{
var reader=new FileReader（）；
reader.onload=imagesisload；
reader.readAsDataURL（this.files[0]）；
}
});
});
函数imageIsLoaded（e）{
$（“#文件”）.css（“颜色”、“绿色”）；
$（“#图像预览”）.css（“显示”、“块”）；
$（'#previewing'）.attr（'src'，e.target.result）；
$（'预览'）.attr（'宽度'，'250px'）；
$（'#previewing'）.attr（'height'，'230px'）；
};
});
身体{
字体系列：“Roboto Condensed”，无衬线；
}
h1
{
文本对齐：居中；
背景色：#96DAD1；
高度：70像素；
颜色：rgb（95,89,89）；
边际：0-29px0；
填充顶部：14px；
字体大小：35px；
}
梅因先生{
位置：绝对位置；
顶部：50px；
左：20%；
宽度：450px；
高度：530px；
边框：2倍纯色灰色；
}
.主标签{
颜色：rgba（0,0,0,0.71）；
左边距：60像素；
}
#图像预览{
位置：绝对位置；
字体大小：30px；
顶部：100px；
左：100px；
宽度：250px；
高度：230像素；
文本对齐：居中；
线高：180px；
字体大小：粗体；
颜色：#C0C0；
背景色：#FFFFFF；
溢出：自动；
}
#选择图像{
填充：19px 21px 14px 15px；
位置：绝对位置；
底部：0px；
宽度：414px；
背景色：#EDFCFF；
}
.提交{
字体大小：16px；
背景：线性梯度（#ffbc00 5%，#ffdd7f 100%）；
边框：1px实心#e5a900；
颜色：#4E4D4B；
字体大小：粗体；
光标：指针；
宽度：300px；
边界半径：5px；
填充：10px0；
大纲：无；
边缘顶部：20px；
左边距：15%；
}
。提交：悬停{
背景：线性梯度（#ffdd7f 5%，#ffbc00 100%）；
}
#文件{
颜色：红色；
填充物：5px；
边框：5px实心#96DAD1；
背景色：#96DAD1；
边缘顶部：10px；
左边距：15%；
宽度：72%；
}
#messag