web-dev-qa-db-ja.com

PHP ajaxを使用して配列を投稿する

AJAXを使用してPHPページに配列を投稿する問題があります。ガイダンスとして この質問 を使用していますが、なんらかの理由でまだできませんprint_r($_POST)を使用して確認できることから、空の配列を投稿していますが、HTML/Javascriptページでは、配列がいっぱいになったことを確認するアラートを使用しています。投稿は空の値をポストのMySQLデータベースに入力するため、機能しますが、なぜそれが空の配列を渡すのか理解できません。コードは次のとおりです。

JavaScript:

_<script type="text/javascript">
    var routeID = "testRoute";
    var custID = "testCustID";
    var stopnumber = "teststopnumber";
    var customer = "testCustomer";
    var lat = 10;
    var lng = 20;
    var timeStamp = "00:00:00";


    var dataArray = new Array(7);
  dataArray[0]= "routeID:" + routeID;
  dataArray[1]= "custID:" + custID;
  dataArray[2]= "stopnumber:" + stopnumber;
  dataArray[3]= "customer:" + customer;
  dataArray[4]= "latitude:" + lat;
  dataArray[5]= "longitude:" + lng; 
  dataArray[6]= "timestamp:" + timeStamp; 
  var jsonString = JSON.stringify(dataArray);
  function postData(){
    $.ajax({
       type: "POST",
       url: "AddtoDatabase.php", //includes full webserver url
       data: {data : jsonString}, 
       cache: false,

       success: function(){
           alert("OK");
       }
    });
  window.location = "AddtoDatabase.php"; //includes full webserver url
  }
alert(JSON.stringify(dataArray))
</script>
_

PHP:

_<?php
  print_r($_POST);


$routeID = $_POST['routeID'];
  $custID = $_POST['custID'];
  $stopnumber = $_POST['stopnumber'];
  $customer = $_POST['customer'];
  $latitude = $_POST['latitude'];
  $longitude = $_POST['longitude'];
  $timestamp = $_POST['timestamp'];

$mysqli= new mysqli("fdb5.biz.nf","username","password","database");

mysqli_select_db($mysqli,"database");

    $sql = "INSERT INTO Locations (routeID, custID, stopnumber, customer, latitude, longitude, timestamp) VALUES " .
           "('$routeID','$custID','$stopnumber','$customer','$latitude','$longitude','$timestamp')";
    mysqli_query($mysqli, $sql); 

    $error = mysqli_error($mysqli);  
echo $error;
?>
_

print_r($_POST)は、phpページにArray()のみを表示しますが、JavaScriptページのjsonStringアラートは_["routeID:testRoute", "custID:testCustID", "stopnumber:teststopnumber", "customer:testCustomer", "latitude:10", "longitude:20", "timestamp:00:00:00"]_を表示します

誰かが私が間違っていることを知っていますか?

8
EzAnalyst

注:コードが出力するmain原因はarray()です非同期(AJAX)リクエストが送信/処理される前にクライアントをリダイレクトしている
基本的には、下で説明するように、window.location = "AddtoDatabase.php";を成功コールバックに移動します。

最初の問題:配列を使用する代わりに、オブジェクトリテラル(phpでは〜= assoc配列)を使用する必要があります。

そのためには、このビットを変更します。

var dataArray = new Array(7);//<== NEVER do this again, btw
dataArray[0]= "routeID:" + routeID;
dataArray[1]= "custID:" + custID;
dataArray[2]= "stopnumber:" + stopnumber;
dataArray[3]= "customer:" + customer;
dataArray[4]= "latitude:" + lat;
dataArray[5]= "longitude:" + lng; 
dataArray[6]= "timestamp:" + timeStamp; 

代わりにこれを書いてください:

var dataObject = { routeID: routeID,
                   custID:  custID,
                   stopnumber: stopnumber
                   customer: customer,
                   latitude: lat,
                   longitute: lng,
                   timestamp: timeStamp};

それ以上のものはありません。最後に、次のようにデータを送信します。

function postData()
{
    $.ajax({ type: "POST",
             url: "AddtoDatabase.php",
             data: dataObject,//no need to call JSON.stringify etc... jQ does this for you
             cache: false,
             success: function(resopnse)
             {//check response: it's always good to check server output when developing...
                 console.log(response);
                 alert('You will redirect in 10 seconds');
                 setTimeout(function()
                 {//just added timeout to give you some time to check console
                    window.location = 'AddtoDatabase.php';
                 },10000);
             }
    });

次に、postData関数がAJAXリクエストが送信される前にクライアントをリダイレクトします!$.ajaxへの呼び出し後、window.location = "AddtoDatabase.php";ステートメントがコード。ajax呼び出しの後にクライアントをリダイレクトする場合は、2番目の式をsuccessコールバック関数(responseを記録する関数)に移動する必要があります。スニペット^^。

これをすべて変更したら、$_POST変数はほぼ正しく見えるはずです。そうでない場合は、$_REQUESTオブジェクトを出力して、ajax呼び出しの応答を確認します。

最後に、ください準備されたステートメントをサポートするAPIを使用することに注意してください(したがって、mostから保護します)インジェクション攻撃)、それはチェックされていないPOST/GETデータをクエリにストリングすることが以前より安全であることを意味しません...
結論:準備済みステートメントなどの重要な安全機能をサポートするAPIを使用する場合は、それらの機能を使用します。

完全に明確で完全なものにするために、PHPコードも少し修正したバージョンを次に示します。

$routeID = $_POST['routeID'];
$custID = $_POST['custID'];
$stopnumber = $_POST['stopnumber'];
$customer = $_POST['customer'];
$latitude = $_POST['latitude'];
$longitude = $_POST['longitude'];
$timestamp = $_POST['timestamp'];
//you're connecting OO-style, why do you switch to procedural next?
//choose one, don't mix them, that makes for fugly code:
$mysqli = mysqli_connect('fdb5.biz.nf', 'username', 'password', 'database');//procedural
//or, more in tune with the times:
$mysqli= new mysqli("fdb5.biz.nf","username","password","database");//OO

mysqli_select_db($mysqli,"database");
//or
$mysqli->select_db('database');

必要に応じて、ドキュメントをチェックして、ここから先に使用するすべてのメソッドの対応する手順を確認してください。私はOOP-APIを好む

//making a prepared statement:
$query = 'INSERT INTO Locations 
          (routeID, custID, stopnumber, customer, latitude, longitude, timestamp) VALUES 
          (?,?,?,?,?,?,?)';
if (!($stmt = $mysqli->prepare($query)))
{
    echo $query.' failed to prepare';
    exit();
}
$stmt->bind_param('s', $routeID);
$stmt->bind_param('s',$custID);
//and so on
$stmt->bind_param('d', $latitude);//will probably be a double
$stmt->execute();//query DB

準備されたステートメントに関する有用なリンク:

20

シリアライズを使用する必要があります。その後......

<script>

jQuery(document).ready(function($){
/* attach a submit handler to the form */
$("#submit").click( function(event) {

/* stop form from submitting normally */
 event.preventDefault();

 /*clear result div*/
 $("#loginresponse").html('');

 /* use serialize take everthing into array */
    var frmdata = $("#formname").serialize();

$.ajax({
  url: "/file.php",
  type: "post",
  dataType: "json",
  data: frmdata,
  success: function(data, textStatus){
    if(data.redirect == 'true'){
       $('#formresponse').html(data.message);
      return true;
    }else{
      $('#formresponse').html(data.message);
      return false;
    }
  },
  error:function(){
      $("#formresponse").html('error');
  }
});
});
}); 

</script>

pHPよりも投稿でデータを取る

<?php
$routeID = $_POST['routeID'];
$custID = $_POST['custID'];
$stopnumber = $_POST['stopnumber'];
$customer = $_POST['customer'];
$latitude = $_POST['latitude'];
$longitude = $_POST['longitude'];
$timestamp = $_POST['timestamp'];
?>

そして、jsonエンコードで表示します。この方法でエラーを表示できます

<?php 

if(true)
    echo json_encode(array('redirect'=>'true', 'message'=>'form submitted'));
else
    echo json_encode(array('redirect'=>'false', 'message'=>'form not submited'));
?>
0
Erdem Ece