ajaxをリフレッシュせずに自分のページに自分のPHPレスポンスを表示するにはどうすればよいですか？

Question

私はこのPHPスクリプトを介して入力を処理したいと思い、このフォーム

<form action="send.php" method="post"> 
      <div class="col-md-12"> 
      <div class="input-group input-group-lg"> 
       <span class="input-group-addon" id="sizing-addon1"><i class="fa fa-credit-card"></i></span> 

      <input id="nfc" name="nfc" type="text" required class="form-control" placeholder="Wristband UID will appear here...." aria-describedby="sizing-addon1"> 
      </div> 

<br> 
       <div class="input-group input-group-lg"> 
        <span class="input-group-addon" id="sizing-addon1"><i class="fa fa-phone"></i></span> 
        <input id="phone" name="phone" type="text" value="254" required class="form-control" placeholder="Registered Phone Number" aria-describedby="sizing-addon1"> 
      </div> 

<br> 
      <button type="submit" class="btn btn-color btn-lg">OK, Im Done</button> 
</div> 
      <div id="alert"></div> 
</form> 

あります

<?php 
$nfc = $_POST["nfc"]; 
$phone = $_POST["phone"]; 


$post = [ 
'nfc' => $nfc, 
//'password' => '9907', 
'phone' => $phone, 

]; 

header("Content-Type: application/json"); 

$ch = curl_init('myAPIUrl');//posts input to my api and i get a response 

curl_setopt($ch, CURLOPT_POSTFIELDS, $post); 


curl_setopt($ch, CURLOPT_RETURNTRANSFER, true); 

$server_output = curl_exec ($ch); 

curl_close ($ch); 

header("refresh:1400;url=http://www.swype.co.ke/counter/index.html"); 

var_dump($server_output); 
?> 

と同じページ上のdivのid「ALERT」でフォームの応答を示しています。私のAPI URLはパラメータが入力フィールドであるapiです。私は以下のようにAPI応答を得ます。

string(121) "{"idUser":42,"rfid":"4534543","username":"","transactionStatus":"NFC tag has been updated successfully","statusCode":200}" 

Answer 1

PHP経由で入力を処理するには、フォームデータをサーバーに送信する必要があります。サーバーからの応答でアラートを表示するには、フォームを送信して（ページを更新する）、AJAXを使用してフォームデータを送信して応答を待つ必要があります。

---

今では、PHPを使用してAJAXで行う可能性のあることをやっています。このような何か試してみてください：

$("form").submit(function(event) { 
    // request json with 
    $.getJSON("http://www.swype.co.ke/counter/index.html", 
    // whatever data you want to send from your form 
    { name: "John", time: "2pm" }, 
    function(data) { 
     // show the result of processing the data 
     alert(data); 
    } 
); 

    // prevent form from refreshing the page 
    event.preventDefault(); 
});