フォームを正常に送信した後、jquery ajaxフォームで警告する方法

jquery $.ajax();でPHPフォームを送信しようとしています。その提出は成功しましたが、私はメッセージに注意を喚起しようとしています。成功するとalert(SUCCESS);です。そうではありません。どんな推測？フォームを正常に送信した後、jquery ajaxフォームで警告する方法

CODE：

$.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その他のトリック。私の質問は、スクリプト全体が動作しているときにアラートが機能しない理由と、それがパースエラーを起こす理由です。

出典

2016-09-26 luna.romania

変更 '警告（SUCCESS）;'警告（ "SUCCESS"）へ ';'、またはあなたがdata.success' 'の内容を通知したい場合は、実行します。'警告（data.success） ' –

それは既にそこにあった、間違って申し訳ありません。私はそれを更新しました。しかし問題はまだそこにある。 –

コンソールログは機能しますか？ 'data.error'がレスポンスに全く存在しないことは確かですか？それともただ空ですか？（それは未定義ではありません）。 if文の前に 'console.log（data）'を実行し、あなたの質問を出力に更新してください。 –

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がnullの場合、あなたのチェックが失敗します行うことができます。あなたのコードを維持したい場合は、

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

を実行することを検討してください。

出典

2016-09-26 13:53:47

それは既にそこにあった、間違って申し訳ありません。私はそれを更新しました。しかし問題はまだそこにある。 –

コメントのデータ型： "json"とチェックよりも – smehsoud

これらのどれも、私の問題を解決しました。ありがとう。 –

dataが
data.errorがサーバーから、それはあなたがそれが何を考えではないかもしれませんが有効JSONであることを確認してください。真の値を決定するにはconsole.logを使用してください。さらにもっと、

data.status => '成功' などより有意義なものに変更し

出典

2016-09-26 14:18:01

シンプルな '失敗'。削除 - 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>

出典

2016-09-29 14:16:57

フォームを正常に送信した後、jquery ajaxフォームで警告する方法

答えて

関連する問題