2017-07-20 12 views
1

ここでは、ボタンをクリックするとjQueryのAJAXメソッドを使用して入力を取得し、それをスリムなPHPページに送信するJavascriptファイルのフォームがあります。 PHPは単に名前が設定されていると仮定して"Hello and welcome person_name"を出力します。これはまさに私が望むものです。私はそのテキストをdiv要素に表示したいのですが、要求が成功した場合は同じページに、失敗した場合はalertにします。しかし、それがエラーであれば、div要素にテキスト"Error"を表示します。Ajaxリクエストはエラーを返しますが、ステータスコードは200です。OK

これをテストすると、divにテキスト"Error"が表示されます。私はページを視察し、ステータスが200 0Kで見て、応答が"Hello and welcome my_nameで、その他の詳細...

enter image description here

<form class="myform"> 
    <input type="text" name="username" placeholder="Username" class="a" id="x" required></input> 
    <input type="password" name="password" placeholder="Password" class="a" id="y" required></input> 
</form> 
<button class="b" id="n">Submit</button> 

<div id="display"></div> 
<p></p> 
$("button#n").click(function() { 
    $("p").html("YOU ARE HERE 1"); 

    var $username = $('input#x').val(); 
    var $password = $('input#y').val(); 
    var $mydata = $('.myform').serialize(); 

    if ($username != "" && $password != "") { 
    $.ajax({ 
     data: $mydata, 
     dataType: 'text', 
     type: 'POST', 
     url: 'http://localhost/products/s11.php', 
     success: function(responseText) { 
     $('#display').html(responseText); 
     }, 
     failure: function() { 
     alert("Failed"); 
     }, 
     error: function() { 
     $('#display').html("Error"); 
     } 
    }); 
    } 
    return false; 
}); 
<?php 
    if(isset($_POST['username'])) { 
    print "Hello and welcome" . " " . $_POST['username']; 
    } else { ?> 
    //do something else... 
+1

レスポンスが200 OKでも 'error'ハンドラがヒットした場合は、通常、レスポンスにフォーマット上の問題があることを意味します。 'error'ハンドラ関数に正しいパラメータを追加してください。 –

+0

を診断するためのエラー記述を得ることができます。' echo "Helloとwelcomeを使ってみてください。" "" $ _POST ['username']; '' print'の代わりに。 –

+0

'print'の代わりに' echo'を使います –

答えて

0

私はの先頭に次の最初に置きます私のPHPファイルと私の問題は解決されました

header("Access-Control-Allow-Origin:*"); 
 
header("Access-Control-Allow-Credentials:true"); 
 
header("Access-Control-Max-Age: 100000"); 
 
header("Access-Control-Allow-Headers: X-Requested-With, Content-Type, Origin, Cache-Control, Pragma, Authorization, Accept, Accept-Encoding"); 
 
header("Access-Control-Allow-Methods: PUT, POST, GET, OPTIONS, DELETE");

関連する問題