2016-11-15 2 views
0

ボタンをクリックした後、ページに全く反応がありません。フィードバックなしPHPとAJAX "POST"

postメソッドを使用して、変数をajaxファイルに取得します。ここにコードがあります。

オリジナル.phpは、値を取得するフォームを含むファイルであり、ajaxファイルに送信されます。

stockProcess.phpは、SQLプロセスを実行してデータベースの在庫を更新するajaxファイルです。

original.php

<div id='status'></div> 

<input type='number' name='quantity' style='max-width:50px' id='quantity'/> 

<button class='btn btn-xs btn-success' onClick='add('pen100')'> 
    <i class='ace-icon fa fa-plus bigger-120'></i> 
</button> 

<script type="text/javascript"> 
function add(serialNo) 
{ 
    var quantity = document.getElementById("quantity").value; 
    var type = "add"; 

    if (quantity == null) 
    { 
     document.getElementById("status").innerHTML = "<p><b><font color='red'>PLEASE INPUT A VALUE</font></b></p>"; 
    } 
    else if (quantity < 0) 
    { 
     document.getElementById("status").innerHTML = "<p><b><font color='red'>WRONG VALUE<br />PLEASE ENTER VALUE LARGER THAN 0</font></b></p>"; 
    } 
    else 
    { 
     if (window.XMLHttpRequest) 
     { 
      // code for IE7+, Firefox, Chrome, Opera, Safari 
      xmlhttp = new XMLHttpRequest(); 
     } 
     else 
     { 
      // code for IE6, IE5 
      xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); 
     } 
     xmlhttp.onreadystatechange = function() 
     { 
      if (this.readyState == 4 && this.status == 200) 
      { 
       document.getElementById("status").innerHTML = this.responseText; 
      } 
     }; 
     xmlhttp.open("POST","stockProcess.php?serialNo="+serialNo+"&quantity="+quantity+"&type="+type, true); 
     xmlhttp.send(); 
    } 
} 
</script> 

stockProcess.php

<?php 

$serialNo = $_POST['serialNo']; 
$quantity = $_POST['quantity']; 
$type = $_POST['type']; 

if ($type == "add") 
    { 
     $newQ = $quantity + 50; 
     $sqlAdd = "UPDATE medicinestock SET quantity=$newQ WHERE serialNo='$serialNo'"; 
     $queryAdd = $conn -> query($sqlAdd); 

     if ($queryAdd == TRUE) 
     { 
      echo "<b><p><font color='green'>STOCK HAS BEEN UPDATE</font></p></b>"; 
     } 
     else 
     { 
      $err = $conn -> error; 
      echo "<b><p><font color='red'>SYSTEM ERROR : $err</font></p></b>"; 
     } 
    } 
?> 
+0

単純なajaxのinstedはjQuery ajaxを使用することができます.. !! –

+1

代わりにこのメソッドを使用したい場合はどうすればいいですか?どの部分を修正する必要がありますか? – Asyraf

+0

あなたはjQueryについて考えていますか? –

答えて

-1

は、このコードを試してみてください。

<div id='status'></div> 
    <input type='number' name='quantity' style='max-width:50px' id='quantity'/> 
    <button class='btn btn-xs btn-success ajaxBtn' data-param-serialNo="pen100"> 
     <i class='ace-icon fa fa-plus bigger-120'></i> 
    </button> 

    <script> 
$(document).ready(function(e){ 
    $("button.ajaxBtn").on('click',function(e){ 
     e.preventDefault(); 
     var serialNo = $(this).attr('data-param-serialNo'); 
     var quantity = $('input[name="quantity"]').val(); 
     var type = "add"; 

     if(quantity == null){ 
     $('div#status').append("<p><b><font color='red'>PLEASE INPUT A VALUE</font></b></p>"); 
     }else if(quantity < 0){ 
     $('div#status').append("<p><b><font color='red'>WRONG VALUE<br />PLEASE ENTER VALUE LARGER THAN 0</font></b></p>"); 
     }else{ 
     $data = "serialNo="+serialNo+"&quantity="+quantity+"&type="+type; 
     $.ajax({ 
      url: "stockProcess.php", 
      data: $data, 
      type: 'POST', 
      dataType: 'json', 
      success: function (data) { 
      $("#status").append(data); 
      } 
     }); 
     } 
    }); 
}) 
    </script> 
+0

jQuery(function($)? – Asyraf

+0

TryAgainに更新済みのスクリプトを入れる必要がありますか? –

0

あなたは、この行にエラーがあります。

<button class='btn btn-xs btn-success' onClick='add('pen100')'> 

ただ、コードの下に変更:

onClick="add('pen100')"

+0

引用符で間違っていません。 – Asyraf

+0

@Asyraf、私はローカルでテストしました(あなたのスクリプトでコンソールにエラーが表示されます)。 –

+0

もしこれが好きなら、これは大丈夫でしょうか? <ボタンクラスは、=のonClick = 'BTN-XS BTN-成功BTN' "を追加( '?RM ')"> \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t <= 'エースアイコンFA FA-プラス大きい-120' 私のクラス> \t \t \t \t \t \t \t \t \t \t \t \t \t \t – Asyraf

0

Content-typeおよびその他のヘッダーを設定.Also send()にパラメータとして渡すことによってリクエストボディにデータを送信するためにあなたが持っているPOSTを使用して

var payLoad = "serialNo="+serialNo+"&quantity="+quantity+"&type="+type; 

xmlhttp.open("POST","stockProcess.php", true); 
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); //mandatory header 
xmlhttp.setRequestHeader("Content-length", payLoad.length); //recommended headers 
xmlhttp.setRequestHeader("Connection", "close"); 
xmlhttp.send(payLoad); //send 
0

私は通常、リフレッシュ不可能なフォームPOST用にAJAXネイティブを使用しています私はAJAXのことについては熟練していません。私はそれを使用しようとしています。

実際に私はプロジェクトを終了するために期日を追うので、通常のフォームPOSTに変更してください。コードの

は、すべての問題のため

original.php

<form method="POST" action="stockProcess.php"> 
//Button and Input number will be write here. 
</form> 

Soryです。^_^